ตัวแก้ไขการนำทาง

Android Studio มี GUI ที่ช่วยให้คุณสร้างและแก้ไขกราฟการนำทางได้ ซึ่งเป็นเครื่องมือแก้ไขไฟล์ทรัพยากร XML พื้นฐาน

ภาพรวม

หลังจากเพิ่มกราฟ XML ลงในแอปแล้ว Android Studio จะเปิดกราฟในเครื่องมือแก้ไขการนำทาง ในเครื่องมือแก้ไขการนำทาง คุณสามารถแก้ไขกราฟการนำทางด้วยภาพ หรือแก้ไข XML พื้นฐานได้โดยตรง

รูปที่ 1 เครื่องมือแก้ไขการนำทาง
  1. แผงปลายทาง: แสดงโฮสต์การนำทางและปลายทางทั้งหมด ในเครื่องมือแก้ไขกราฟ
  2. เครื่องมือแก้ไขกราฟ: มีการแสดงภาพกราฟการนำทาง คุณสามารถสลับระหว่างมุมมองการออกแบบกับ การแสดง XML พื้นฐานในมุมมองข้อความ
  3. แอตทริบิวต์: แสดงแอตทริบิวต์ของรายการที่เลือกใน กราฟการนำทาง

คลิกแท็บข้อความเพื่อดู XML ที่เกี่ยวข้อง ซึ่งควรมีลักษณะคล้ายกับ ข้อมูลโค้ดต่อไปนี้

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

องค์ประกอบ <navigation> คือองค์ประกอบรูทของกราฟการนำทาง เมื่อเพิ่มปลายทางและการดำเนินการเชื่อมต่อลงในกราฟ คุณจะเห็นองค์ประกอบที่เกี่ยวข้อง <destination> และ <action> ที่นี่เป็นองค์ประกอบย่อย หากคุณมี[กราฟที่ซ้อนกัน][2] กราฟเหล่านั้นจะปรากฏเป็นองค์ประกอบย่อย <navigation>

เพิ่มปลายทาง

คุณสร้างปลายทางจาก Fragment หรือกิจกรรมที่มีอยู่ได้ นอกจากนี้ คุณยัง ใช้เครื่องมือแก้ไขการนำทางเพื่อสร้างปลายทางใหม่หรือสร้างตัวยึดตำแหน่งเพื่อ แทนที่ด้วย Fragment หรือกิจกรรมในภายหลังได้ด้วย

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

  1. ในเครื่องมือแก้ไขการนำทาง ให้คลิกไอคอนปลายทางใหม่ แล้วคลิกสร้างปลายทางใหม่
  2. ในกล่องโต้ตอบคอมโพเนนต์ Android ใหม่ที่ปรากฏขึ้น ให้สร้าง Fragment ดูข้อมูลเพิ่มเติมเกี่ยวกับ Fragment ได้ที่ [ภาพรวมของ Fragment][3]

กลับไปที่ Navigation Editor แล้วคุณจะเห็นว่า Android Studio ได้เพิ่มปลายทางนี้ลงในกราฟแล้ว

รูปที่ 2 แสดงตัวอย่างปลายทางและ[ปลายทางตัวยึดตำแหน่ง][4]

รูปที่ 2 ปลายทางและตัวยึดตำแหน่ง

ดูวิธีอื่นๆ ในการเพิ่มจุดหมายลงในกราฟการนำทางได้ที่[จุดหมายเพิ่มเติม][5]

สร้างปลายทางจาก Fragment หรือกิจกรรมที่มีอยู่

ในเครื่องมือแก้ไขการนำทาง หากมีประเภทปลายทางอยู่แล้วที่ต้องการเพิ่มลงในกราฟการนำทาง ให้คลิกปลายทางใหม่

จากนั้นคลิกปลายทางที่ต้องการในเมนูแบบเลื่อนลงที่ปรากฏขึ้น ตอนนี้คุณสามารถดูตัวอย่างปลายทางในมุมมองการออกแบบพร้อมกับ XML ที่เกี่ยวข้องในมุมมองข้อความของกราฟการนำทาง

สร้างปลายทางของ Fragment ใหม่

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

  1. ในเครื่องมือแก้ไขการนำทาง ให้คลิกไอคอนปลายทางใหม่

    จากนั้นคลิกสร้างปลายทางใหม่

  2. ในกล่องโต้ตอบคอมโพเนนต์ Android ใหม่ที่ปรากฏขึ้น ให้สร้าง Fragment

กลับไปที่ Navigation Editor แล้วคุณจะเห็นว่า Android Studio ได้เพิ่มปลายทางนี้ลงในกราฟแล้ว

รูปที่ 3 แสดงตัวอย่างปลายทางและ [placeholder destination][2]

รูปที่ 3 ปลายทางและตัวยึดตำแหน่ง

โครงสร้างของปลายทาง

คลิกปลายทางเพื่อเลือก และจดบันทึกแอตทริบิวต์ต่อไปนี้ในแผงแอตทริบิวต์

  • ฟิลด์ประเภทจะระบุว่าปลายทางได้รับการติดตั้งใช้งานเป็น Fragment, Activity หรือคลาสที่กำหนดเองอื่นๆ ในซอร์สโค้ดหรือไม่
  • ฟิลด์ป้ายกำกับมีชื่อที่ผู้ใช้อ่านได้ของปลายทาง ซึ่งอาจแสดงใน UI เช่น หากคุณเชื่อมต่อ [NavGraph][10] กับ Toolbar โดยใช้ [setupWithNavController()][11] ด้วยเหตุนี้ ให้ใช้ สตริงทรัพยากรสำหรับค่านี้
  • ฟิลด์ ID มีรหัสปลายทางซึ่งใช้เพื่ออ้างอิงถึง ปลายทางในโค้ด
  • เมนูแบบเลื่อนลงชั้นเรียนจะแสดงชื่อชั้นเรียนที่เชื่อมโยงกับ ปลายทาง คลิกเมนูแบบเลื่อนลงนี้เพื่อเปลี่ยนชั้นเรียนที่เชื่อมโยงเป็น ปลายทางประเภทอื่น

คลิกแท็บข้อความเพื่อแสดงมุมมอง XML ของกราฟการนำทาง XML มีแอตทริบิวต์ id, name, label และ layout เดียวกันสำหรับ ปลายทาง ดังในข้อมูลโค้ดต่อไปนี้

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

นอกจากนี้ คุณยังใช้ [เครื่องมือสร้างเลย์เอาต์][1] เพื่อเพิ่ม NavHostFragment ลงในกิจกรรมได้โดยทำดังนี้

  1. ในรายการไฟล์โปรเจ็กต์ ให้ดับเบิลคลิกไฟล์ XML ของเลย์เอาต์กิจกรรม เพื่อเปิดในเครื่องมือสร้างเลย์เอาต์
  2. ในแผงพาเล็ต ให้เลือกหมวดหมู่คอนเทนเนอร์ หรือค้นหา "NavHostFragment"
  3. ลากNavHostFragmentมุมมองไปยังกิจกรรม
  4. ในกล่องโต้ตอบกราฟการนำทางที่ปรากฏขึ้น ให้เลือกกราฟการนำทางที่เกี่ยวข้องเพื่อเชื่อมโยงกับ NavHostFragment นี้ แล้วคลิกตกลง

เชื่อมต่อปลายทาง

การดำเนินการคือการเชื่อมต่อเชิงตรรกะระหว่างปลายทาง การดำเนินการจะ แสดงในกราฟการนำทางเป็นลูกศร โดยปกติแล้ว การดำเนินการจะเชื่อมต่อปลายทางหนึ่งกับอีกปลายทางหนึ่ง แต่คุณก็สร้าง[การดำเนินการส่วนกลาง][6] ที่จะนำคุณไปยังปลายทางที่เฉพาะเจาะจงจากที่ใดก็ได้ในแอปได้เช่นกัน

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

คุณใช้ตัวแก้ไขการนำทางเพื่อเชื่อมต่อปลายทาง 2 แห่งได้โดยทำดังนี้

  1. ในแท็บออกแบบ ให้วางตัวชี้ไว้ที่ด้านขวาของปลายทางที่คุณต้องการให้ผู้ใช้นำทางจาก วงกลมจะปรากฏที่ด้านขวาของปลายทาง ดังแสดงในรูปที่ 4

    รูปที่ 4 ปลายทางที่มีการเชื่อมต่อการดำเนินการ วงกลม

  2. ลากเคอร์เซอร์ไปยังปลายทางที่ต้องการให้ผู้ใช้ไปยัง และ ปล่อย เส้นที่ได้ระหว่างปลายทางทั้ง 2 แสดงถึง การดำเนินการ ดังที่แสดงในรูปที่ 5

    รูปที่ 5 เชื่อมต่อปลายทางกับการดำเนินการ

  3. คลิกลูกศรเพื่อไฮไลต์การดำเนินการ แอตทริบิวต์ต่อไปนี้จะปรากฏในแผงแอตทริบิวต์

    • ฟิลด์ประเภทมีค่าเป็น "การดำเนินการ"
    • ฟิลด์ ID มีรหัสของการดำเนินการ
    • ฟิลด์ปลายทางมีรหัสของ Fragment ปลายทาง หรือกิจกรรม

  4. คลิกแท็บข้อความเพื่อสลับไปที่มุมมอง XML ตอนนี้ระบบได้เพิ่มองค์ประกอบการดำเนินการลงในปลายทางของแหล่งที่มาแล้ว การดำเนินการมีแอตทริบิวต์รหัสและแอตทริบิวต์ปลายทางที่มีรหัสของปลายทางถัดไป ดังที่แสดงในตัวอย่างต่อไปนี้

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/blankFragment">
   <fragment
       android:id="@+id/blankFragment"
       android:name="com.example.cashdog.cashdog.BlankFragment"
       android:label="@string/label_blank"
       tools:layout="@layout/fragment_blank" >
       <action
           android:id="@+id/action_blankFragment_to_blankFragment2"
           app:destination="@id/blankFragment2" />
   </fragment>
   <fragment
       android:id="@+id/blankFragment2"
       android:name="com.example.cashdog.cashdog.BlankFragment2"
       android:label="@string/label_blank_2"
       tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

ในกราฟการนำทาง การดำเนินการจะแสดงด้วยองค์ประกอบ <action> อย่างน้อยที่สุด การดำเนินการจะมีรหัสของตัวเองและรหัสของปลายทางที่ควรนำผู้ใช้ไป

ปลายทางตัวยึดตำแหน่ง

คุณใช้ตัวยึดตำแหน่งเพื่อแสดงปลายทางที่ยังไม่ได้ติดตั้งใช้งานได้ ตัวยึดตำแหน่งทำหน้าที่เป็นภาพแทนปลายทาง ใน เครื่องมือแก้ไขการนำทาง คุณสามารถใช้ตัวยึดตำแหน่งได้เช่นเดียวกับ ปลายทางอื่นๆ

[1]: /studio/write/layout-editor [2]: /guide/navigation/navigation-nested-graphs [3]: /guide/components/fragments [4]: /guide/navigation/navigation-create-destinations#placeholders [5]: /guide/navigation/navigation-create-destinations [6]: /guide/navigation/navigation-global-action [10]: /reference/androidx/navigation/NavGraph [11]: /reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)