กราฟแบบฝัง

โดยปกติแล้ว ขั้นตอนเข้าสู่ระบบ วิซาร์ด หรือขั้นตอนย่อยอื่นๆ ภายในแอปจะแสดงเป็นกราฟการนําทางที่ฝังได้ดีที่สุด การฝังโฟลว์การนําทางย่อยแบบสําเร็จรูปด้วยวิธีนี้จะช่วยให้เข้าใจและจัดการโฟลว์หลักของ UI ของแอปได้ง่ายขึ้น

นอกจากนี้ กราฟแบบฝังยังนํามาใช้ซ้ำได้ นอกจากนี้ กราฟที่ฝังยังให้ระดับการรวมข้อมูลด้วย โดยปลายทางที่อยู่นอกกราฟที่ฝังจะไม่มีสิทธิ์เข้าถึงปลายทางใดๆ ในกราฟที่ฝังโดยตรง แต่ควรnavigate() ไปยังกราฟที่ฝังอยู่โดยตรง ซึ่งตรรกะภายในจะเปลี่ยนแปลงได้โดยไม่ส่งผลต่อส่วนที่เหลือของกราฟ

ตัวอย่าง

กราฟการนําทางระดับบนสุดของแอปควรเริ่มต้นด้วยปลายทางเริ่มต้นที่ผู้ใช้เห็นเมื่อเปิดแอป และควรมีปลายทางที่ผู้ใช้เห็นขณะเลื่อนไปมาในแอป

รูปที่ 1 กราฟการนำทางระดับบนสุด

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

แนวทางปฏิบัติแนะนำคือตั้งค่าหน้าจอการจับคู่เป็นปลายทางเริ่มต้นของกราฟการนําทางระดับบนสุด และย้ายหน้าจอชื่อและหน้าจอลงทะเบียนไปยังกราฟที่ฝังอยู่ ดังที่แสดงในรูปที่ 1

รูปที่ 2 ตอนนี้กราฟการนำทางระดับบนสุดมีกราฟที่ฝังอยู่

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับสถานการณ์การนำทางแบบมีเงื่อนไขได้ที่การนำทางแบบมีเงื่อนไข

เขียน

หากต้องการสร้างกราฟการนําทางที่ฝังอยู่โดยใช้การเขียน ให้ใช้ฟังก์ชัน NavGraphBuilder.navigation() คุณใช้ navigation() ได้เช่นเดียวกับการใช้ฟังก์ชัน NavGraphBuilder.composable() และ NavGraphBuilder.dialog() เมื่อเพิ่มปลายทางลงในกราฟ

ความแตกต่างหลักๆ คือ navigation จะสร้างกราฟที่ฝังอยู่แทนปลายทางใหม่ จากนั้นเรียกใช้ composable() และ dialog() ภายในแลมดาของ navigation() เพื่อเพิ่มปลายทางลงในกราฟที่ฝัง

พิจารณาวิธีที่ข้อมูลโค้ดต่อไปนี้ใช้กราฟในรูปที่ 2 โดยใช้ Compose

// Routes
@Serializable object Title
@Serializable object Register

// Route for nested graph
@Serializable object Game

// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver

NavHost(navController, startDestination = Title) {
   composable<Title> {
       TitleScreen(
           onPlayClicked = { navController.navigate(route = Register) },
           onLeaderboardsClicked = { /* Navigate to leaderboards */ }
       )
   }
   composable<Register> {
       RegisterScreen(
           onSignUpComplete = { navController.navigate(route = Game) }
       )
   }
   navigation<Game>(startDestination = Match) {
       composable<Match> {
           MatchScreen(
               onStartGame = { navController.navigate(route = InGame) }
           )
       }
       composable<InGame> {
           InGameScreen(
               onGameWin = { navController.navigate(route = ResultsWinner) },
               onGameLose = { navController.navigate(route = GameOver) }
           )
       }
       composable<ResultsWinner> {
           ResultsWinnerScreen(
               onNextMatchClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               },
               onLeaderboardsClicked = { /* Navigate to leaderboards */ }
           )
       }
       composable<GameOver> {
           GameOverScreen(
               onTryAgainClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               }
           )
       }
   }
}

หากต้องการไปยังปลายทางที่ฝังอยู่โดยตรง ให้ใช้ประเภทเส้นทางเช่นเดียวกับปลายทางอื่นๆ เนื่องจากเส้นทางเป็นแนวคิดส่วนกลางที่ใช้ระบุปลายทางที่หน้าจอใดๆ ไปยังได้

navController.navigate(route = Match)

XML

เมื่อใช้ XML คุณสามารถใช้เครื่องมือแก้ไขการนําทางเพื่อสร้างกราฟที่ฝังอยู่ โดยทำตามขั้นตอนต่อไปนี้

  1. ในเครื่องมือแก้ไขการนําทาง ให้กดแป้น Shift ค้างไว้ แล้วคลิกปลายทางที่ต้องการรวมไว้ในกราฟที่ฝัง

  2. คลิกขวาเพื่อเปิดเมนูตามบริบท แล้วเลือกย้ายไปยังกราฟที่ฝัง > กราฟใหม่ โดยปลายทางจะอยู่ในกราฟที่ซ้อนกัน รูปที่ 2 แสดงกราฟที่ฝังอยู่ในเครื่องมือแก้ไขการนําทาง

    รูปที่ 2 กราฟที่ฝังในตัวแก้ไขการนําทาง

  3. คลิกกราฟที่ฝัง แอตทริบิวต์ต่อไปนี้จะปรากฏในแผงแอตทริบิวต์

    • ประเภทซึ่งมี "กราฟที่ฝัง"
    • รหัสซึ่งมีรหัสที่ระบบกำหนดให้กับกราฟที่ฝัง รหัสนี้ใช้เพื่ออ้างอิงกราฟที่ฝังจากโค้ดของคุณ

  4. ดับเบิลคลิกที่กราฟที่ฝังอยู่เพื่อแสดงปลายทาง

  5. คลิกแท็บข้อความเพื่อสลับเป็นมุมมอง XML เพิ่มกราฟการนําทางแบบฝังลงในกราฟแล้ว กราฟการนําทางนี้มีองค์ประกอบ navigation ของตัวเอง พร้อมด้วยรหัสของตัวเองและแอตทริบิวต์ startDestination ที่ชี้ไปยังปลายทางแรกในกราฟที่ฝังอยู่

    <?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/mainFragment">
   <fragment
       android:id="@+id/mainFragment"
       android:name="com.example.cashdog.cashdog.MainFragment"
       android:label="fragment_main"
       tools:layout="@layout/fragment_main" >
       <action
           android:id="@+id/action_mainFragment_to_sendMoneyGraph"
           app:destination="@id/sendMoneyGraph" />
       <action
           android:id="@+id/action_mainFragment_to_viewBalanceFragment"
           app:destination="@id/viewBalanceFragment" />
   </fragment>
   <fragment
       android:id="@+id/viewBalanceFragment"
       android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
       android:label="fragment_view_balance"
       tools:layout="@layout/fragment_view_balance" />
   <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
       <fragment
           android:id="@+id/chooseRecipient"
           android:name="com.example.cashdog.cashdog.ChooseRecipient"
           android:label="fragment_choose_recipient"
           tools:layout="@layout/fragment_choose_recipient">
           <action
               android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
               app:destination="@id/chooseAmountFragment" />
       </fragment>
       <fragment
           android:id="@+id/chooseAmountFragment"
           android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
           android:label="fragment_choose_amount"
           tools:layout="@layout/fragment_choose_amount" />
   </navigation>
</navigation>

  6. ในโค้ด ให้ส่งรหัสทรัพยากรของการดำเนินการที่เชื่อมต่อกราฟรูทกับกราฟที่ฝังอยู่

Kotlin

view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
  1. กลับไปที่แท็บออกแบบ แล้วกลับไปที่กราฟรูทโดยคลิกรูท

อ้างอิงกราฟการนำทางอื่นๆ ด้วย include

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

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้ <include>

<!-- (root) nav_graph.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

    <strong><include app:graph="@navigation/included_graph" /></strong>

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <strong><action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" /></strong>
    </fragment>

    ...
</navigation>

<!-- included_graph.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"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/second_graph"</strong>
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการนําทางได้จากแหล่งข้อมูลต่อไปนี้

Codelabs

วิดีโอ