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

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> ที่เกี่ยวข้องที่นี่เป็นองค์ประกอบย่อย หากมี กราฟซ้อนกัน กราฟเหล่านั้นจะปรากฏเป็นองค์ประกอบย่อย <navigation>

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

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

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

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

กลับไปที่เครื่องมือแก้ไขการนำทาง แล้วสังเกตว่า Android Studio ได้เพิ่มปลายทางนี้ลงในกราฟแล้ว

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

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

ดูวิธีอื่นๆ ในการเพิ่มปลายทางลงในกราฟการนำทางได้ที่ ปลายทาง เพิ่มเติม

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

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

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

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

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

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

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

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

กลับไปที่เครื่องมือแก้ไขการนำทาง แล้วสังเกตว่า Android Studio ได้เพิ่มปลายทางนี้ลงในกราฟแล้ว

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

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

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

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

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

คลิกแท็บข้อความ เพื่อแสดงมุมมอง 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>

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

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

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

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

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

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

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

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

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

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

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

    • ช่องประเภท มี "การดำเนินการ"
    • ช่องรหัส มีรหัสสำหรับการดำเนินการ
    • ช่องปลายทาง มีรหัสสำหรับ Fragment หรือ Activity ปลายทาง

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

    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> โดยการดำเนินการจะมีรหัสของตัวเองและรหัสของปลายทางที่ควรนำผู้ใช้ไป อย่างน้อยที่สุด

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

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