Thành phần điều hướng

Thứ Hai, 22/03/2021

Tram Ho

Giới thiệu

Thành phần điều hướng theo thuật ngữ đơn giản, các thành phần cần thiết để thực hiện điều hướng và Điều hướng đề cập đến các tương tác cho phép người dùng điều hướng qua các khu vực khác nhau trong ứng dụng. Thành phần Điều hướng của Android Jetpack giúp bạn triển khai điều hướng, từ các lần nhấp vào nút đơn giản đến các mẫu phức tạp hơn, chẳng hạn như thanh ứng dụng và ngăn điều hướng. Thành phần Điều hướng cũng đảm bảo trải nghiệm người dùng nhất quán và có thể dự đoán được bằng cách tuân thủ một bộ nguyên tắc đã thiết lập như Điểm đến bắt đầu cố định, Thể hiện trạng thái Điều hướng dưới dạng chồng điểm, đảm bảo Lên và Quay lại giống hệt nhau trong tác vụ của ứng dụng của bạn, v.v.

Để tích hợp Thành phần Điều hướng, hãy bắt đầu bằng cách thêm các thư viện.

Thêm thư viện

build.gradle

dependencies {
  def nav_version = "2.3.3"

  // Java language implementation
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"

  // Kotlin
  implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
  implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

  // Feature module Support
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // Testing Navigation
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

  // Jetpack Compose Integration
  implementation "androidx.navigation:navigation-compose:1.0.0-alpha08"
}

dependencies {

def nav_version = "2.3.3"

// Java language implementation

implementation "androidx.navigation:navigation-fragment:$nav_version"

implementation "androidx.navigation:navigation-ui:$nav_version"

// Kotlin

implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"

implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

// Feature module Support

implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

// Testing Navigation

androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

// Jetpack Compose Integration

implementation "androidx.navigation:navigation-compose:1.0.0-alpha08"

}

Tiếp theo, chúng ta cần tạo một đồ thị điều hướng. Bạn có thể hỏi biểu đồ điều hướng là gì, biểu đồ điều hướng là biểu thị các đường dẫn điều hướng của ứng dụng. Nó là một tệp tài nguyên chứa tất cả các hành động và đích của ứng dụng. Nói một cách đơn giản hơn, đó là thiết kế đồ họa trình bày cách người dùng có thể điều hướng ứng dụng của bạn. Bạn sẽ hiểu rõ hơn khi chúng tôi tạo một vài màn hình và tích hợp các thành phần điều hướng liên kết chúng với nhau. Hai khía cạnh quan trọng cần lưu ý khi sử dụng biểu đồ điều hướng là:

Đích đến: Đây là các màn hình nội dung trong ứng dụng.
Hành động: Đây là những logic kết nối giữa các điểm đến. Chúng đại diện cho các đường dẫn thực tế mà người dùng có thể đi.

Cách thêm đồ thị Điều hướng vào một dự án

Nhấp vào Chế độ xem mã sẽ hiển thị cho bạn chế độ xem văn bản nơi chúng tôi có thẻ phần tử điều hướng và không có gì khác vì chúng tôi không thêm hoặc liên kết bất kỳ màn hình nào. Đích và Hành động sẽ phản ánh trong biểu đồ khi chúng được thêm vào và sẽ được hiển thị dưới dạng các phần tử con.

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_graph"&gt;

&lt;/navigation&gt;

<?xml version="1.0" encoding="utf-8"?>

<navigation xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_graph">

</navigation>

Cách thêm Máy chủ điều hướng vào Hoạt động

Máy chủ điều hướng hoạt động như nền tảng cốt lõi, nó là vùng chứa nơi các điểm đến của bạn được hoán đổi vào / ra khi điều hướng ứng dụng xảy ra trong ứng dụng. Theo tài liệu, một máy chủ điều hướng phải lấy từ NavHost. Việc triển khai NavHost mặc định của thành phần Điều hướng, NavHostFragment, xử lý việc hoán đổi các điểm đến phân mảnh. Bây giờ chúng ta sẽ thêm một vùng chứa và chỉ định biểu đồ điều hướng trong bố cục hoạt động chính.

activity_main.xml

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"&gt;

    &lt;androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" /&gt;

&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<androidx.fragment.app.FragmentContainerView

android:id="@+id/nav_host_fragment"

android:name="androidx.navigation.fragment.NavHostFragment"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:defaultNavHost="true"

app:navGraph="@navigation/nav_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bằng cách thêm vào các app:navGraph="@navigation/nav_graph" chúng tôi đã gắn liền các NavHostFragment với nav graph nav_graph . Chúng tôi cũng có thể phát hiện và chặn nút quay lại của hệ thống bằng cách sử app:defaultNavHost="true" để NavHostFragment sẽ phát hiện ra điều này.

Thêm điểm đến vào biểu đồ điều hướng

Để thêm điểm đến mới, chỉ cần nhấp vào nút Điểm đến mới và tạo một đoạn trống như được hiển thị trong cửa sổ bật lên bên dưới.

Tôi đang gọi đích này là FirstFragment. Bạn sẽ nhận thấy rằng đích đã được thêm vào biểu đồ trong nav_graph (Bạn luôn có thể thay đổi sang dạng xem Thiết kế để xem thiết kế bố cục). Ngoài ra, trong chế độ xem văn bản, bạn cũng sẽ nhận thấy rằng phân đoạn đã được thêm vào cùng với các thuộc tính id, tên, nhãn và bố cục.

    &lt;fragment
        android:id="@+id/firstFragment"
        android:name="com.example.navigationdemo.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first"&gt;

<fragment

android:id="@+id/firstFragment"

android:name="com.example.navigationdemo.FirstFragment"

android:label="fragment_first"

tools:layout="@layout/fragment_first">

Tiếp theo, chúng ta nên cho ứng dụng biết nơi bắt đầu bất cứ khi nào nó được khởi chạy bằng cách chỉ định một màn hình làm điểm đến bắt đầu.

Chỉ định một màn hình làm điểm đến bắt đầu

Để đặt firstFragment làm điểm đến bắt đầu, bạn có thể thay đổi thành dạng xem Thiết kế trong nav_graph, sau đó trong cây thành phần chỉ cần nhấp chuột phải vào firstFragment và sau đó chọn Set as Start Destination . Một cách khác để làm điều này là trước tiên nhấp vào FirstFragment sau đó chọn biểu tượng trang chủ ở trên cùng. Bây giờ phân đoạn đầu tiên của bạn sẽ có biểu tượng gắn liền với nó chỉ định rằng nó bây giờ là điểm đến bắt đầu của bạn.

Bây giờ chúng ta đã hiểu về các điểm đến và cách sử dụng nó, chúng ta hãy đi sâu vào các hành động. Như đã nêu trước đây, các hành động đóng vai trò là kết nối giữa các điểm đến. Bạn có thể xác định các hành động bằng các mũi tên trỏ từ điểm đến này đến điểm đến khác trong biểu đồ. Tuy nhiên, các hành động không chỉ giới hạn ở 2 điểm đến. Họ cũng có thể điều hướng đến bất kỳ điểm đến cụ thể nào bằng cách tạo chúng dưới dạng hành động toàn cầu. Chỉ xác định một hành động thôi là không đủ trong việc điều hướng qua ứng dụng, chúng tôi cũng phải viết một số logic đằng sau nhưng nhiều hơn về điều đó sau. Bây giờ chúng ta sẽ tạo thêm một điểm đến và kết nối chúng.

Sử dụng hành động để kết nối 2 điểm đến

Thêm một điểm đến mới và gọi phân đoạn này là SecondFragment. Bây giờ chúng ta có 2 đoạn trong biểu đồ, hãy nhấp vào FirstFragment và một vòng tròn xuất hiện ở khu vực trung tâm. Kéo vòng kết nối này vào SecondFragment.

Thay đổi sang dạng xem Văn bản để quan sát thẻ hành động mới được thêm vào. Nó bao gồm các thuộc tính id và đích xác định điểm đến.

    &lt;fragment
        android:id="@+id/firstFragment"
        android:name="com.example.navigationdemo.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first"&gt;
        &lt;action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment" /&gt;
    &lt;/fragment&gt;

<fragment

android:id="@+id/firstFragment"

android:name="com.example.navigationdemo.FirstFragment"

android:label="fragment_first"

tools:layout="@layout/fragment_first">

<action

android:id="@+id/action_firstFragment_to_secondFragment"

app:destination="@id/secondFragment" />

</fragment>

Bây giờ chúng ta hãy đi sâu hơn vào các thành phần điều hướng bằng cách sử dụng NavController.

NavController

Để điều hướng đến một điểm đến, chúng tôi sử dụng NavController. Điều này có thể được tìm thấy bằng cách sử dụng các phương thức findNavController () được gọi bởi một Activity, Fragment hoặc đơn giản là một View.

Fragment.findNavController ()
Activity.findNavController (viewId: Int)
View.findNavController ()

Trước khi tiếp tục, chúng ta sẽ cần thêm gradle cho Safe Args. Safe Args là một plugin tạo ra các lớp trình tạo whcich cho phép chúng tôi chuyển các đối số giữa các đích của chúng tôi một cách an toàn.

Trong build.graddle cấp cao nhất (Không phải ứng dụng mà là ứng dụng khác, nơi chúng tôi có google (), jcenter () ….) thêm classpath trong các phần phụ thuộc:

dependencies {
    def nav_version = "2.3.4"
    classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
}

dependencies {

def nav_version = "2.3.4"

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"

}

Tiếp theo vì chúng tôi đang sử dụng Kotlin chỉ thêm cái này vào build.gradle của ứng dụng:

apply plugin: "androidx.navigation.safeargs.kotlin"

Đồng bộ hóa và khiển trách dự án của bạn và safe arg sẽ tự động tạo mã chứa các lớp / phương thức cho tất cả các hành động mà chúng tôi đã tạo.

Một điều cần lưu ý là bởi vì chúng tôi đã tạo NavHostFragment bằng FragmentContainerView, chúng tôi sẽ phải truy xuất NavController trực tiếp từ NavHostFragment vì làm ngược lại như cố gắng tìm nó bằng ID sẽ dẫn đến thất bại.

Bây giờ, hãy mở bố cục phân đoạn đầu tiên và thêm một nút duy nhất.

gment_first.xml

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".FirstFragment"&gt;

    &lt;Button
        android:id="@+id/btnNext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="To Second Fragment" /&gt;
&lt;/FrameLayout&gt;

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="20dp"

tools:context=".FirstFragment">

<Button

android:id="@+id/btnNext"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="To Second Fragment" />

</FrameLayout>

Tiếp theo, thêm văn bản vào bố cục phân đoạn thứ hai.

gment_second.xml

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondFragment"&gt;
    
    &lt;TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="Welcome to Second Fragment" /&gt;
&lt;/FrameLayout&gt;

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".SecondFragment">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:textSize="20sp"

android:text="Welcome to Second Fragment" />

</FrameLayout>

Bây giờ bố cục đã sẵn sàng, chúng ta có thể thêm một hành động vào nút bấm từ phân đoạn đầu tiên và điều hướng đến phân đoạn thứ hai. Mở lớp FirstFragment.

FirstFragment

package com.example.navigationdemo

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import androidx.navigation.findNavController

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val root =  inflater.inflate(R.layout.fragment_first, container, false)

        val fragmentBtnNext : Button = root.findViewById(R.id.btnNext)

        fragmentBtnNext.setOnClickListener { button -&gt;
            val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment()
            button.findNavController().navigate(action)
        }

        return root
    }
}

package com.example.navigationdemo

import android.os.Bundle

import androidx.fragment.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.Button

import androidx.navigation.findNavController

class FirstFragment : Fragment() {

override fun onCreateView(

inflater: LayoutInflater,

container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

val root = inflater.inflate(R.layout.fragment_first, container, false)

val fragmentBtnNext : Button = root.findViewById(R.id.btnNext)

fragmentBtnNext.setOnClickListener { button ->

val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment()

button.findNavController().navigate(action)

}

return root

}

Hãy nhớ rằng, bảo vệ an toàn chịu trách nhiệm tạo lớp FirstFragmentDirections có một phương thức actionFirstFragmentToSecondFragment duy nhất trả về một đối tượng NavDirection.

Qucik Lưu ý Vì đây là một dự án được xây dựng bằng kotlin, nên android sẽ tự động thêm android.useAndroidX=true vào tệp gradle.properties. Nếu nó không có mặt, bạn phải thêm nó.

Chạy ứng dụng.

Mảnh thứ hai

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Thành phần điều hướng

Giới thiệu

Cách thêm đồ thị Điều hướng vào một dự án

Cách thêm Máy chủ điều hướng vào Hoạt động

Thêm điểm đến vào biểu đồ điều hướng

Chỉ định một màn hình làm điểm đến bắt đầu

Sử dụng hành động để kết nối 2 điểm đến

NavController

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript