Cách tạo thành phần điều hướng Android

Việc thiết kế một ứng dụng có xu hướng cồng kềnh và thường xuyên có một bảng trắng với các mũi tên chỉ từ các điểm khác nhau đến các điểm khác.

Những gì ban đầu bạn nghĩ sẽ là một ứng dụng có một hoặc hai hoạt động, đột nhiên xuất hiện nhiều luồng, phân đoạn và phạm vi tương tác rộng rãi của người dùng. Thật tuyệt phải không, nếu chúng ta có thể lấy bất cứ thứ gì có trên bảng trắng đó và sao chép nó một cách dễ dàng bằng mã?

Nói lời chào với Thành phần Điều hướng.

Đối với những người không quen thuộc, Thành phần Điều hướng không phải là một lớp giao diện người dùng khác mà bạn đặt thay vì một bố cục cho hoạt động / phân đoạn của bạn. Hãy coi nó giống như một bản đồ, nơi thay vì các lục địa, bạn có các mảnh vỡ của mình và bạn sẽ cần chỉ đường để đi từ lục địa này sang lục địa khác. Nó trình bày các phân đoạn của bạn và các kết nối giữa chúng theo cách từ trên xuống. Trong bài viết này, chúng ta sẽ xem xét các khía cạnh chính của thành phần này và tìm hiểu cách chúng ta có thể tích hợp nó vào các ứng dụng của mình.

Sẵn sàng ra khơi? ⛵️

Học Dây thừng

Thành phần Điều hướng có sẵn từ Android Studio 3.3 trở lên. Để sử dụng nó, bạn hãy thêm các phần phụ thuộc sau vào dự án của bạn:

android {
    ...
}

dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.0.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.0.0'
}

Để có thứ gì đó hoạt động, hãy tưởng tượng chúng tôi đã thiết kế một ứng dụng có cấu trúc sau:

• Bắt đầu Fragment
• Phân đoạn A
• Phân đoạn B

Người dùng có thể chuyển đến Phân đoạn A hoặc Phân đoạn B từ Phân đoạn bắt đầu.

Nếu chúng ta muốn thực hiện tất cả những điều này mà không có Thành phần Điều hướng, chúng ta sẽ phải thêm tất cả mã quá quen thuộc để mở một đoạn khi một trong các nút được nhấp vào.

val myFragment : MyFragment = MyFragment()
supportFragmentManager.beginTransaction().add(R.id.container, myFragment).commit()

Trong ví dụ nhỏ của chúng tôi, con số này là một vài dòng ngắn và khá không phức tạp, nhưng tôi nghĩ tất cả chúng ta có thể đồng ý rằng điều này sẽ không mở rộng một cách thích hợp nếu ứng dụng của chúng tôi lớn hơn và có nhiều luồng người dùng phức tạp hơn.

All Aboard

Để bắt đầu sử dụng Thành phần Điều hướng, chúng ta cần tạo một đồ thị điều hướng. Biểu đồ này sẽ hoạt động như một bản đồ của chúng tôi, phác thảo luồng người dùng trong ứng dụng của chúng tôi. Để tạo một tệp, nhấp chuột phải vào thư mục res và tạo tệp tài nguyên mới. Chúng tôi sẽ đặt tên của chúng tôi: user_flow_graph.xml . Đảm bảo đánh dấu loại tệp là Điều hướng.

Mỗi chuyến đi đều bắt đầu từ căn cứ địa và của chúng tôi cũng không khác gì. Nhà của chúng tôi được gọi là NavHost . Điều này sẽ hoạt động như một trình giữ chỗ cho các điểm đến được hoán đổi khi người dùng tương tác với giao diện người dùng của chúng tôi. Chúng tôi cần thêm NavHost vào bố cục chính của hoạt động của mình:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <fragment
        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/user_flow_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

Chúng tôi đã thêm một phần tử phân mảnh sẽ chứa nơi các phân mảnh của chúng tôi sẽ được hiển thị và hoán đổi. Chú ý đến navGraph thuộc tính mà chúng tôi đã liên kết với tệp XML đã tạo trước đó của chúng tôi.

Bây giờ, chúng tôi cần thêm điểm đến xuất phát, vì ứng dụng của chúng tôi sẽ không biên dịch nếu chúng tôi không làm như vậy.

Khi mở user_flow_graph.xml, chúng ta cần nhấp vào biểu tượng dấu cộng nhỏ trong Trình chỉnh sửa điều hướng:

Bạn có thể thấy trong menu bật lên, rằng chúng tôi có thể tạo một trình giữ chỗ sẽ cần được điền vào sau này hoặc chúng tôi có thể chọn từ bất kỳ phân đoạn nào mà chúng tôi có:

Luồng người dùng của chúng tôi bắt đầu từ Start Fragment, vì vậy trước tiên hãy chọn nó.

Hãy thêm hai phân đoạn khác của chúng ta, phân đoạn A và phân đoạn B.

Chúng tôi kết nối hai điểm đến bằng cách nhấp vào dấu chấm xuất hiện khi chúng tôi di chuột qua một điểm đến và kéo nó đến một điểm đến khác.

Những gì chúng tôi vừa tạo giữa phân đoạn Bắt đầu và các phân đoạn A và B, là hành động .

Rùng mình Timbers

Bạn có thể đã tự hỏi mình, nếu chỉ bằng cách kết nối các điểm đến, công việc của chúng tôi ở đây được hoàn thành và theo một cách kỳ diệu nào đó, mọi thứ sẽ hoạt động.

Chà, sẽ không.

Chúng tôi cần cho mã của chúng tôi biết để điều hướng đến một điểm đến. Vì vậy, làm thế nào chúng ta có thể làm điều đó? Một số phép thuật có liên quan đến quá trình này.

Điều đầu tiên chúng ta sẽ làm là thêm một plugin gradle có tên Safe Args . Nó sẽ đảm bảo an toàn cho loại khi chúng tôi điều hướng giữa các điểm đến của mình.

buildscript {
   /...
    }
    dependencies {
        ...
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.0.0"
        
    }
}

Chúng tôi cũng sẽ cần thêm plugin sau vào build.gradle của ứng dụng:

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

Ngoài ra, hãy đảm bảo rằng android.useAndroidX =true trong tệp gradle.properties của bạn.

Trước khi tiếp tục, hãy hiểu lý do tại sao chúng tôi cần thêm tất cả các cấu hình này. Về cơ bản, khi chúng tôi tạo các hành động trước đó, ở hậu trường, Android Studio tạo mã mà chúng tôi sẽ sử dụng để kích hoạt các hành động. Mã này bao gồm các phương thức và lớp đại diện cho mỗi hành động. Hãy lấy phân đoạn Bắt đầu của chúng tôi làm ví dụ. Mã được tạo cho các hành động mà chúng tôi đã khai báo sẽ có một lớp được gọi là StartFragmentDirections . Các phương thức cho lớp này đại diện cho các hành động mà chúng ta đã tạo trước đó. Vì vậy, đối với cả hai phân đoạn của chúng ta, chúng ta sẽ nhận được:

• StartFragmentDirections.actionStartFragmentToFragmentA ()
• StartFragmentDirections.actionStartFragmentToFragmentB ()

Bây giờ các hành động của chúng tôi đã được dịch thành mã, hãy sử dụng chúng:

val action = StartFragmentDirections.actionStartFragmentToFragmentA()

Bước cuối cùng trong quá trình này yêu cầu chúng ta sử dụng NavController. Đối tượng này chịu trách nhiệm quản lý điều hướng trong NavHost của chúng tôi. Bạn có thể truy cập nó bằng một trong ba phương pháp sau:

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

Vì vậy, kết hợp với nhau, chúng ta sẽ có:

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA()
    button.findNavController().navigate(action)
}

Cắt cánh buồm của bạn

Điều gì sẽ xảy ra nếu chúng tôi muốn chuyển dữ liệu giữa các điểm đến của chúng tôi? Hãy tưởng tượng một kịch bản trong đó nếu người dùng nhấp vào một mặt hàng nhất định, chúng ta muốn làm điều gì đó với mặt hàng đó ở điểm đến tiếp theo của chúng ta. Đối với điều đó, chúng tôi có các đối số đích. Mở user_flow_graph.xml của chúng tôi và nhấp vào Fragment A. Bạn sẽ nhận thấy ở phía bên tay phải, một menu mô tả chi tiết các thuộc tính khác nhau của Fragment A. Một trong những thuộc tính đó sẽ là Arguments.

Để thêm đối số, chỉ cần nhấp vào biểu tượng ➕. Một cửa sổ bật lên sẽ mở ra và trong đó chúng ta có thể cấu hình đối số của mình. Bạn có thể đặt tên, chọn loại và thêm giá trị mặc định. Hãy thêm đối số kiểu Chuỗi vào Phân đoạn A, đó sẽ là thông báo được truyền từ Phân đoạn bắt đầu.

Trong phân đoạn Bắt đầu của chúng tôi, nơi chúng tôi đã xác định hành động của mình và đang gọi phương thức đã tạo, chúng tôi sẽ chuyển vào đối số của mình.

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA("Hello From Start Fragment")
    button.findNavController().navigate(action)
}

Để truy cập nó trong Fragment A, chúng ta sẽ cần:

• truy cập gói và nhận giá trị thông điệp của chúng tôi

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val bundle = arguments
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = bundle?.getString("message")
        return root
    }
}

• sử dụng navArgs nếu chúng tôi đang sử dụng phần phụ thuộc -ktx

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val args : FragmentAArgs by navArgs()
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = args.message
        return root
    }
}

✋ khi sử dụng navArgs, bạn sẽ cần thêm hỗ trợ cho Java8 trong tệp build.gradle của mình.

Bạn có thể tìm thấy tất cả mã được hiển thị ở đây trong kho lưu trữ GitHub này.