ナビゲーションコンポーネント、ナビゲーショングラフの設計

投稿日:

(2020年9月9日)

このブログでは、ネストされたグラフと、2つの宛先間でデータを渡す方法について説明します。

ネストされたナビゲーショングラフ

ナビゲーショングラフを使用して、一連の目的地をグループ化し、それらを再利用できます。たとえば、アプリケーションの複数の場所で使用できるビューを使用します。したがって、別のレイアウトファイルを作成し、それを再利用したい場所に含めるだけです。ナビゲーショングラフについても同じことが言えます。共通のフローは、diff XMLファイルで区切ることにより、複数の場所に含めることができます。

例を挙げて説明します:カスタムミール

Healthifyアプリのカスタム食事の機能は、ユーザーが食事の組み合わせを作成するのに役立ちます。ユーザーが朝食に果物とトーストを好む場合、毎日両方を追加する必要はありません。彼はこれら2つのアイテムのコンボミールを作成し、特定のコンボをチェックすることができました。これは時間の節約に大きなプラスです。

カスタムミールフロー@(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フックがあります。

食事フックを作成する

ユーザーは、食事トラッカー画面の[CREATE COMBO]ボタン(図1)または[CREATE A COMBO]ボタンをクリックして、このフローに入ることができます。食事コンボ画面(図2)または検索フローの[食品の追加]ボタン(図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があり、食事グラフ。 [コンボの作成]ボタンをクリックすると、ユーザーは食事の作成フローに入ります。

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が含まれています。 [コンボの作成]ボタンをクリックすると、ユーザーは食事の作成フローに入ります。

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

フック3 :検索フロー。ここでは、ネストされたグラフと、 2つの宛先間でデータを渡す方法を理解します

ナビゲーションを使用すると、宛先の引数を定義することにより、ナビゲーション操作にデータを添付できます。たとえば、この場合、食事の種類(朝食、昼食、夕食)を食事のフラグメントの作成の引数として渡すことができます。

一般に、目的地間で最小限のデータのみを渡すことを強くお勧めします。 。たとえば、Androidでは保存されているすべての状態の合計スペースが制限されているため、オブジェクト自体を渡すのではなく、キーを渡してオブジェクトを取得する必要があります。大量のデータを渡す必要がある場合は、ViewModelの使用を検討してください。

データを渡すには、宛先フラグメントで引数を定義する必要があります。データを受信します。

この例では、3つの差分フックから食事タイプを送信しており、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を宣言できます。

サポートされているすべての引数タイプは、ここから確認できます。

「ディープリンク」を介して引数を渡すこともできます。

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

送信者フラグメントから引数のバンドルを作成し、それをnavコントローラーに渡します。



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)

これは、ネストされたグラフ、navグラフの使用方法、および2つの宛先間でデータを渡す方法に関する小さな議論でした。

記事はあなたにとって有益でした。 フィードバックや質問がある場合は、私に返信してください。

ハッピーラーニングまで!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です