Google은 흑인 공동체를 위한 인종 간 평등을 진전시키기 위해 노력하고 있습니다. Google에서 어떤 노력을 하고 있는지 확인하세요.

중첩된 탐색 그래프

일련의 대상은 루트 그래프라는 상위 탐색 그래프 내에 중첩 그래프로 그룹화될 수 있습니다. 중첩 그래프는 자체 포함된 로직 흐름과 같은 앱의 UI 섹션을 구성하고 재사용하는 데 유용합니다.

중첩 그래프는 대상을 캡슐화합니다. 루트 그래프와 마찬가지로 중첩 그래프에는 시작 대상으로 식별된 대상이 있어야 합니다. 루트 그래프의 대상과 같이 중첩 그래프 외부의 대상은 시작 대상을 통해서만 중첩 그래프에 액세스합니다.

그림 1은 간단한 송금 앱의 탐색 그래프를 보여줍니다. 왼쪽의 시작 대상부터 그래프에는 2개의 흐름(송금을 위한 상단의 흐름과 계정 잔액 확인을 위한 하단의 흐름)이 있습니다.

그림 1. 송금 탐색 그래프

대상을 중첩 그래프로 그룹화하려면 다음과 같이 하세요.

  1. 탐색 편집기에서 Shift 키를 길게 누른 상태에서 중첩 그래프에 포함할 대상을 클릭합니다.
  2. 컨텍스트 메뉴를 마우스 오른쪽 버튼으로 클릭하여 열고 Move to Nested Graph > New Graph를 선택합니다. 대상은 중첩 그래프에 포함되어 있습니다. 그림 2에서는 탐색 편집기의 중첩 그래프를 보여줍니다.

    그림 2. 그래프 편집기의 중첩 그래프
  3. 중첩 그래프를 클릭합니다. 다음 속성은 Attributes 패널에 표시됩니다.

    • Type - '중첩 그래프'를 포함합니다.
    • ID - 중첩 그래프의 시스템 지정 ID를 포함합니다. 이 ID는 코드에서 중첩 그래프를 참조하는 데 사용됩니다.
  4. 중첩 그래프를 더블클릭하여 대상을 표시합니다.

  5. Text 탭을 클릭하여 XML 뷰를 전환합니다. 중첩된 탐색 그래프가 그래프에 추가되었습니다. 이 탐색 그래프에는 자체 navigation 요소와 자체 ID 및 중첩 그래프의 첫 번째 대상을 가리키는 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. 코드에서 루트 그래프를 중첩 그래프에 연결하는 작업의 리소스 ID를 전달합니다.

    Kotlin

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

    자바

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

  7. Design 탭으로 돌아가서 Root를 클릭하여 루트 그래프로 돌아갈 수 있습니다.

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

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

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

참고 자료

탐색에 관한 자세한 내용은 다음 참고 자료를 참조하세요.

샘플

Codelab

동영상