탐색 구성 요소, 탐색 그래프 설계

(2020 년 9 월 9 일)

이 블로그에서는 중첩 그래프와 두 대상간에 데이터를 전달하는 방법에 대한 논의를 가져오고 싶습니다.

중첩 된 내비게이션 그래프

내비게이션 그래프를 사용하여 일련의 목적지를 함께 그룹화하고 재사용 할 수 있습니다. 예를 들어 애플리케이션의 여러 위치에서 사용할 수있는보기를 사용합니다. 따라서 별도의 레이아웃 파일을 만들고 재사용하려는 위치에 포함하기 만하면됩니다. 네비게이션 그래프도 마찬가지입니다. 공통 흐름은 diff XML 파일로 분리하여 여러 위치에 포함 할 수 있습니다.

예제를 사용하여 설명 : The Custom Meal

Healthify 앱의 맞춤형 식사 기능은 사용자가 식사 콤보를 만드는 데 도움이됩니다. 사용자가 아침 식사로 과일과 토스트를 좋아한다면 매일 두 가지를 모두 추가 할 필요가 없습니다. 그는이 두 항목의 콤보 식사를 만들고 특정 콤보를 확인할 수 있습니다. 이는 시간을 절약 할 수있는 큰 장점입니다.

맞춤 식사 흐름 @ (eyepoppper)

위에 표시된 것은 맞춤형 식사 흐름입니다. 사용자는 식사 이름을 지정하고 식사에 항목을 추가하여 콤보를 만들 수 있습니다. 간단한 요리가 없으면 재료를 추가 할 수 있습니다.

추가 버튼을 누르면 사용자가 검색 화면으로 이동하고 검색된 음식을 목록에 추가 할 수 있으며 마지막으로 클릭하여 저장합니다. 저장 버튼을 누르면 사용자에게 성공 화면이 표시되고이 흐름이 시작된 화면으로 돌아갑니다.

콤보 흐름 만들기에 대한 탐색 그래프를 만들어 보겠습니다.



xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/create\_meal\_graph"
app:startDestination="@id/createMealFragment">
android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" >
android:id="@+id/action\_createMealFragment\_to\_save"
app:destination="@id/processMealFragment" /> android:id="@+id/action\_createMealFragment\_to\_add"
app:destination="@id/searchFoodFragment" />
android:id="@+id/searchFoodFragment"
android:name="com.example.healthify.SearchFoodFragment"
android:label="search\_food"
tools:layout="@layout/fragment\_search\_food"/>

android:id="@+id/processMealFragment"
android:name="com.example.healthify.ProcessMealFragment"
android:label="done"
tools:layout="@layout/fragment\_process\_meal"/>

여기에 2 개의 작업이있는 CreateMealFragment가 있습니다.

  1. action\_createMealFragment\_to\_save-> 사용자가 식사 이름과 재료를 입력 한 후 저장을 클릭하면 ProcessMealFragment로 이동하므로 해당 작업의 대상은 processMealFragment.
  2. action\_createMealFragment\_to\_add-> 사용자가 더하기 아이콘을 클릭하여 콤보에 더 많은 재료를 추가하면 다음을 수행 할 수있는 검색 화면으로 이동합니다. 음식을 검색하고 추가하므로이 작업의 대상은 searchFoodFragment입니다.

이 흐름에는 3 개의 diff 후크가 있습니다.

식사 후크 만들기

사용자는 식사 추적기 화면 (그림 1)에서 CREATE COMBO 버튼을 클릭하거나 CREATE A COMBO 버튼을 클릭하여이 흐름에 들어갈 수 있습니다. 식사 콤보 화면 (그림 2) 또는 검색 흐름의 ADD FOOD 버튼 (그림 3)에서.

HOOK 1 : 식사 추적기 화면



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/meal\_tracker\_graph"
app:startDestination="@id/mealTrackerFragment"> android:id="@+id/mealTrackerFragment"
android:name="com.example.healthify.MealTrackerFragment"
android:label="MealTrackerFragment"
tools:layout="@layout/fragment\_meal\_tracker">
android:id="@+id/action\_merge\_flow"
app:destination="@id/create\_meal\_graph" />
...

여기에 MealTrackerFragment가 있으며 식사 그래프. CREATE COMBO 버튼을 클릭하면 사용자가 식사 흐름 생성으로 들어갑니다.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_merge\_flow)
}

HOOK 2 : 식사 콤보 화면



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/my\_meal\_graph"
app:startDestination="@id/myMealFragment"> android:id="@+id/myMealFragment"
android:name="com.example.healthify.MyMealFragment"
android:label="MyMealFragment"
tools:layout="@layout/fragment\_my\_meal">
android:id="@+id/action\_create\_meal"
app:destination="@id/create\_meal\_graph" />
...

여기에 MyMealFragment가 있습니다. 포함 create\_meal\_graph. CREATE A COMBO 버튼을 클릭하면 사용자가 식사 흐름 만들기에 들어갑니다.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_create\_meal)
}

Hook 3 : 검색 흐름. 여기서는 중첩 된 그래프와 두 대상간에 데이터를 전달하는 방법

내비게이션을 사용하면 목적지에 대한 인수를 정의하여 내비게이션 작업에 데이터를 첨부 할 수 있습니다. 예를 들어,이 경우 Create meal Fragment의 인수로 meal Type (Breakfast, Lunch, dinner)을 전달할 수 있습니다.

일반적으로 목적지간에 최소한의 데이터 만 전달하는 것이 좋습니다. . 예를 들어, 저장된 모든 상태의 전체 공간은 Android에서 제한되므로 객체 자체를 전달하는 대신 객체를 검색하려면 키를 전달해야합니다. 많은 양의 데이터를 전달해야하는 경우 ViewModel를 사용하는 것이 좋습니다.

데이터를 전달하려면 원하는 대상 프래그먼트에 인수를 정의해야합니다. 데이터를받습니다.

이 예에서는 3 개의 diff 후크에서 식사 유형을 보내고 있으며 CreateMealFragment에서 수신합니다. 따라서 CreateMealFragment에서 arg를 정의해야합니다.

 android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" > android:name="mealType"
app:argType="string"
android:defaultValue="" />

인수 유형이 null 값을 지원하는 경우 android:defaultValue="@null"를 사용하여 기본값 null을 선언 할 수 있습니다.

여기 에서 지원되는 모든 인수 유형을 확인할 수 있습니다.

Deeplink를 통해서도 인수를 전달할 수 있습니다.

 android:id="@+id/deepLink"
app:uri="www.example.com/createMealFragment/{mealType}"
android:autoVerify="true"/>

발신자 조각에서 인수 번들을 만들고 탐색 컨트롤러에 전달합니다.



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/search\_meal\_graph"
app:startDestination="@id/searchMealFragment"> android:id="@+id/searchMealFragment"
android:name="com.example.healthify.SearchMealFragment"
android:label="SearchMealFragment"
tools:layout="@layout/fragment\_search\_meal">
android:id="@+id/action\_add\_meal"
app:destination="@id/create\_meal\_graph" />
...

companion object {
const val MEAL\_TYPE = "mealType"
// this value should be same as argument name in nav graph
}
val bundle = bundleOf(MEAL\_TYPE to "Breakfast")findNavController().navigate(R.id.action\_add\_meal,bundle)

중첩 그래프, 탐색 그래프 사용 방법 및 두 대상간에 데이터를 전달하는 방법에 대한 간단한 토론이었습니다.

희망합니다. 이 기사는 당신에게 유익했습니다. 피드백이나 질문이 있으시면 저에게 답장 해주십시오.

Till Happy Learning!

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다