วิธีสร้างส่วนประกอบการนำทางของ Android

การออกแบบแอปพลิเคชันมักจะยุ่งยากและบ่อยครั้งกว่านั้นจะมีกระดานไวท์บอร์ดที่มีลูกศรชี้จากจุดต่างๆ ไปยังจุดอื่นๆ

สิ่งที่คุณคิดในตอนแรกน่าจะเป็นแอปพลิเคชันที่มีกิจกรรมหนึ่งหรือสองกิจกรรม จู่ๆ ก็ดูเหมือนจะมีหลายโฟลว์ แฟรกเมนต์ และการโต้ตอบกับผู้ใช้ที่หลากหลาย คงจะดีไม่น้อยถ้าเราสามารถเอาสิ่งที่อยู่บนไวท์บอร์ดนั้นและทำซ้ำได้อย่างง่ายดายในโค้ด?

ทักทายกับส่วนประกอบการนำทาง

สำหรับผู้ที่ไม่คุ้นเคย ส่วนประกอบการนำทางไม่ใช่คลาส UI อื่นที่คุณวางไว้แทนที่จะเป็นเลย์เอาต์สำหรับกิจกรรม/ส่วนย่อยของคุณ คิดว่ามันเหมือนแผนที่ แทนที่จะเป็นทวีป คุณมีชิ้นส่วน และคุณจะต้องมี ทิศทาง ที่จะได้รับจากทวีปหนึ่งไปยังอีกทวีปหนึ่ง มันแสดงชิ้นส่วนของคุณและการเชื่อมต่อระหว่างพวกเขาในลักษณะจากบนลงล่าง ในบทความนี้ เราจะพูดถึงประเด็นหลักขององค์ประกอบนี้และเรียนรู้ว่าเราจะผสานรวมเข้ากับแอปพลิเคชันของเราได้อย่างไร

พร้อมที่จะออกเดินทาง? ⛵️

การเรียนรู้เชือก

คอมโพเนนต์การนำทางมีอยู่ใน Android Studio 3.3 และหลังจากนั้น หากต้องการใช้ ให้เพิ่มการพึ่งพาต่อไปนี้ในโปรเจ็กต์ของคุณ:

android {
    ...
}

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

เพื่อให้ได้สิ่งที่ใช้งานได้ สมมติว่าเราออกแบบแอปพลิเคชันที่มีโครงสร้างดังต่อไปนี้:

• เริ่มแฟรกเมนต์
• ส่วน A
• ส่วน B

ผู้ใช้สามารถไปที่ Fragment A หรือ Fragment B จาก Start Fragment

หากเราต้องการทำทั้งหมดนี้โดยไม่มีส่วนประกอบการนำทาง เราจะต้องเพิ่มโค้ดที่คุ้นเคยทั้งหมดในการเปิดส่วนย่อยเมื่อคลิกปุ่มใดปุ่มหนึ่ง

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

ในตัวอย่างเล็กๆ ของเรา มีจำนวนบรรทัดสั้นๆ หลายบรรทัดและค่อนข้างไม่ซับซ้อน แต่ฉันคิดว่าเราทุกคนเห็นพ้องต้องกันว่าจะไม่ปรับขนาดอย่างเหมาะสมหากแอปพลิเคชันของเรามีขนาดใหญ่ขึ้นและมีขั้นตอนของผู้ใช้ที่ซับซ้อนมากขึ้น

ทั้งหมดบนเรือ

ในการเริ่มใช้ส่วนประกอบการนำทาง เราต้องสร้างกราฟการนำทาง กราฟนี้จะทำหน้าที่เป็นแผนที่ของเรา โดยสรุปการไหลของผู้ใช้ในแอปพลิเคชันของเรา หากต้องการสร้างไฟล์ ให้คลิกขวาที่โฟลเดอร์ res และสร้างไฟล์ทรัพยากรใหม่ เราจะตั้งชื่อของเราว่า user_flow_graph.xml . อย่าลืมทำเครื่องหมายประเภทของไฟล์เป็นการนำทาง

การเดินทางทุกครั้งเริ่มต้นจากฐานบ้านและการเดินทางของเราก็ไม่ต่างกัน บ้านเราเรียกว่า NavHost . ซึ่งจะทำหน้าที่เป็นตัวยึดตำแหน่งสำหรับปลายทางที่จะสลับเมื่อผู้ใช้โต้ตอบกับ UI ของเรา เราจำเป็นต้องเพิ่ม NavHost ลงในเลย์เอาต์หลักของกิจกรรมของเรา:

<?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>

เราได้เพิ่มองค์ประกอบแฟรกเมนต์ที่จะจัดเก็บชิ้นส่วนของเราที่จะแสดงและสลับ ให้ความสนใจกับ navGraph ที่เราเชื่อมโยงกับไฟล์ XML ที่เราสร้างไว้ก่อนหน้านี้

ตอนนี้ เราต้องเพิ่มปลายทางเริ่มต้น เนื่องจากแอปพลิเคชันของเราจะไม่มีการคอมไพล์หากเราไม่ทำ

เมื่อเปิด user_flow_graph.xml เราจำเป็นต้องคลิกที่ไอคอนเครื่องหมายบวกขนาดเล็กในตัวแก้ไขการนำทาง:

คุณสามารถเห็นได้ในเมนูที่ปรากฏขึ้นว่าเราสามารถสร้างตัวยึดตำแหน่งซึ่งจะต้องกรอกในภายหลังหรือเลือกจากส่วนย่อยที่เรามี:

การไหลของผู้ใช้ของเราเริ่มต้นจากส่วนเริ่มต้น ดังนั้นเรามาเลือกกันก่อน

มาเพิ่มอีกสองส่วนของเรา ส่วน A และส่วน B.

เราเชื่อมต่อสองปลายทางโดยคลิกที่จุดที่ปรากฏขึ้นเมื่อเราวางเมาส์เหนือปลายทางแล้วลากไปยังอีกที่หนึ่ง

สิ่งที่เราเพิ่งสร้างขึ้นระหว่างส่วนเริ่มต้นและส่วนย่อย A และ B คือ การกระทำ .

สั่นฉันทิมเบอร์

คุณอาจเคยถามตัวเองว่าถ้าเพียงแค่เชื่อมต่อจุดหมายปลายทาง งานของเราที่นี่ก็เสร็จเรียบร้อยและด้วยวิธีที่มหัศจรรย์ ทุกอย่างก็จะได้ผล

ก็ไม่แน่

เราจำเป็นต้องบอกรหัสของเราเพื่อนำทางไปยังปลายทาง แล้วเราจะทำได้อย่างไร? เวทมนตร์บางอย่างมีส่วนเกี่ยวข้องในกระบวนการนี้

สิ่งแรกที่เราจะทำคือเพิ่มปลั๊กอิน gradle ชื่อ Safe Args . มันจะรับประกันความปลอดภัยประเภทเมื่อเรานำทางระหว่างจุดหมายปลายทางของเรา

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

นอกจากนี้เรายังจะต้องเพิ่มปลั๊กอินต่อไปนี้ใน build.gradle ของแอปพลิเคชันของเรา:

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

นอกจากนี้ ตรวจสอบให้แน่ใจว่า android.useAndroidX=true ในไฟล์ gradle.properties ของคุณ

ก่อนที่เราจะดำเนินการต่อ มาทำความเข้าใจว่าทำไมเราจึงจำเป็นต้องเพิ่มการกำหนดค่าเหล่านี้ทั้งหมด โดยพื้นฐานแล้ว เมื่อเราสร้างการกระทำก่อนหน้านี้ เบื้องหลัง Android Studio จะสร้างโค้ดที่เราจะใช้เพื่อเปิดใช้งานการกระทำ รหัสนี้ประกอบด้วยเมธอดและคลาสที่แสดงการกระทำแต่ละอย่าง ลองใช้ส่วนเริ่มต้นของเราเป็นตัวอย่าง รหัสที่สร้างขึ้นสำหรับการดำเนินการที่เราประกาศจะมีคลาสชื่อ StartFragmentDirections . เมธอดสำหรับคลาสนี้แสดงถึงการกระทำที่เราสร้างไว้ก่อนหน้านี้ ดังนั้นสำหรับชิ้นส่วนทั้งสองของเรา เราจะได้:

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

เมื่อการกระทำของเราได้รับการแปลเป็นโค้ดแล้ว มาใช้งานกัน:

val action = StartFragmentDirections.actionStartFragmentToFragmentA()

ขั้นตอนสุดท้ายในกระบวนการนี้ต้องการให้เราใช้ NavController ออบเจ็กต์นี้มีหน้าที่จัดการการนำทางภายใน NavHost ของเรา คุณสามารถเข้าถึงได้โดยใช้หนึ่งในสามวิธีต่อไปนี้:

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

รวมกันเราจะได้:

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

ตัดแต่งใบเรือของคุณ

จะเป็นอย่างไรถ้าเราต้องการส่งข้อมูลระหว่างจุดหมายปลายทางของเรา ลองนึกภาพสถานการณ์ที่หากผู้ใช้คลิกที่รายการใดรายการหนึ่ง เราต้องการทำอะไรกับรายการนั้นในปลายทางถัดไป สำหรับสิ่งนั้น เรามีอาร์กิวเมนต์ปลายทาง เปิด user_flow_graph.xml ของเราแล้วคลิกที่ Fragment A คุณจะสังเกตเห็นทางด้านขวามือ เมนูที่มีรายละเอียดแอตทริบิวต์ต่างๆ ของ Fragment A หนึ่งในแอตทริบิวต์เหล่านั้นคือ Arguments

หากต้องการเพิ่มอาร์กิวเมนต์ ให้คลิกที่ไอคอน ➕ หน้าต่างป๊อปอัปจะเปิดขึ้นและในนั้นเราสามารถกำหนดค่าอาร์กิวเมนต์ของเราได้ คุณสามารถตั้งชื่อ เลือกประเภท และเพิ่มค่าเริ่มต้นได้ มาเพิ่มอาร์กิวเมนต์ประเภท String ให้กับ Fragment A ซึ่งจะเป็นข้อความที่ส่งผ่านจากส่วนย่อยเริ่มต้น

ในส่วนเริ่มต้น ที่เรากำหนดการกระทำและเรียกวิธีการที่สร้างขึ้น เราจะส่งต่อข้อโต้แย้งของเรา

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

ในการเข้าถึงใน Fragment A เราจะต้อง:

• เข้าถึงบันเดิลและรับค่าข้อความของเรา

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
    }
}

• ใช้ navArgs หากเราใช้การพึ่งพา -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
    }
}

✋ เมื่อใช้ navArgs คุณจะต้องเพิ่มการรองรับ Java8 ในไฟล์ build.gradle ของคุณ

คุณจะพบรหัสทั้งหมดที่แสดงไว้ที่นี่ในที่เก็บ GitHub