このトピックでは、ナビゲーションコンポーネントを設定して操作する方法について説明する。ナビゲーションコンポーネントの概要については、「Navigation overview En 意訳」を参照すること。
環境設定
ヒント: ナビゲーションを使用したい場合、Android Studio 3.3以降を使用すること。
ナビゲーションサポートを使用するには、アプリのbuild.gradleへ次の依存関係を追加する。
build.gradle
dependencies { def nav_version = "2.1.0-rc01" // Java implementation "androidx.navigation:navigation-fragment:$nav_version" implementation "androidx.navigation:navigation-ui:$nav_version" // Kotlin implementation "androidx.navigation:navigation-fragment-ktx:$nav_version" implementation "androidx.navigation:navigation-ui-ktx:$nav_version" }
プロジェクトに他のアーキテクチャコンポーネントを追加する方法については、「Adding components to your project En」を参照すること。
ナビゲーショングラフを作成する
ナビゲーションは、アプリの宛先間(ユーザが移動することのできるアプリ内の画面)で行われる。これらの宛先はアクションによって接続される。
ナビゲーショングラフは、全ての宛先とアクションを含むリソースファイルである。グラフはアプリ内の全てのナビゲーションパスを表す。
図1に、5つのアクションで接続された6つの宛先を含む、サンプルアプリのナビゲーショングラフを示す。宛先はプレビューサムネイル、接続アクションは矢印で表している。
https://developer.android.com/guide/navigation/navigation-getting-started#create-nav-graph
図1：5つのアクションで接続される、 6つの異なる宛先のナビゲーショングラフ。(意訳元から転載)
①宛先は、アプリ内の様々なコンテンツ領域である。
②アクションはユーザが操作できる宛先間の論理的な接続である。
プロジェクトにナビゲーショングラフを追加するには、次の操作を行う。
- プロジェクトウィンドウのresディレクトリを右クリックし、[New] > [Android Resource File] を選択する。[New Resource File]ダイアログが表示される。
- ファイル名には"nav_graph"などを入力する。
- リソースタイプドロップダウンリストからナビゲーションを選択し、OKをクリックする。
最初のナビゲーショングラフを追加すると、resディレクトリ内にナビゲーションリソースディレクトリが作成される。このディレクトリにはナビゲーショングラフリソースファイル(nav_graph.xmlなど)が含まれる。
注意:ナビゲーショングラフをプロジェクトに追加する場合、アプリのbuild.gradleにナビゲーションの依存関係を追加していないと依存関係追加のプロンプトが表示される。
ただし、Android Studio 3.4ではKTX 1.0.0以外のバージョンの依存関係が追加されているので、Kotlinを使用している場合やバージョン2.0.0以降を使用する場合は、これらの値を必ず置き換える事。
ナビゲーションエディタ
グラフを追加すると、ナビゲーションエディタが起動する。ナビゲーションエディタでは、ナビゲーショングラフを視覚的に編集したり、XMLを直接編集することができる。
https://developer.android.com/guide/navigation/navigation-getting-started#nav-editor
図2：ナビゲーションエディタ(意訳元から転載)
①宛先パネル：全ての宛先とナビゲーションホストの一覧を表示する。
②グラフエディタ：ナビゲーショングラフを視覚的に表示する。テキストビューで、XMLに切り替えることができる。
③属性：ナビゲーショングラフに現在選択されている項目の属性を表示する。
テキストタブをクリックすると、次のような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>タグが子要素として追加される。
アクティビティにNavHostを追加する
ナビゲーションホストはナビゲーションコンポーネントの中核の1つである。
ナビゲーションホストは、ユーザがアプリ内を移動する際に宛先がスワップインまたはスワップアウトされる空のコンテナである。
ナビゲーションホストは、NavHostから派生する必要がある。
既定のNavHostの実装であるNavHostFragmentはフラグメントの宛先のスワップを処理する。
ヒント：ナビゲーションコンポーネントは、複数のフラグメント宛先を持つ、単一アクティビティのアプリ用に設計されている。アクティビティはナビゲーショングラフに関連付けられており、必要に応じて宛先を交換するNavHostFragmentが含まれている。
複数のアクティビティを持つアプリでは、各アクティビティにそれぞれナビゲーショングラフが必要である。
XMLを使いNavHostFragmentを追加する
次の例は、XMLを使いアプリのアクティビティにNavHostFragmentを追加する。
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.appcompat.widget.Toolbar .../> <fragment android:id="@+id/nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph" /> <com.google.android.material.bottomnavigation.BottomNavigationView .../> </android.support.constraint.ConstraintLayout>
次の点に注意すること。
- android:nameにはNavHostの実装クラス名を指定する。
- app:navGraphにはナビゲーショングラフに関連付けるNavHostFragmentを指定する。ナビゲーショングラフでは、ユーザが遷移できるNavHostFragment内の全ての宛先を指定する。
- app:defaultNavHost="true"は、NavHostFragmentがシステムの戻るボタンをインターセプトすることを宣言する。デフォルトのNavHostは1つだけで、もし、同じレイアウトに複数のホストがある場合(例えば2ペインレイアウト)は1つだけをデフォルト指定する。
レイアウトエディタで次の操作を行い、NavHostFragmentをアクティビティに追加することもできる。
- プロジェクトファイルの一覧で、アクティビティのレイアウトXMLファイルをダブルクリックしてレイアウトエディアで開く。
- パレットウィンドウで、コンテナカテゴリを選択するか、"NavHostFragment"を検索する。
- NavHostFragmentビューをアクティビティへドラッグする。
- ナビゲーショングラフダイアログが表示され、対応するグラフを選択し、OKをクリックする。これによってNavHostFragmentに関連付けがなされる。
ナビゲーショングラフに宛先を追加する
既存のフラグメントまたはアクティビティから宛先を作成することができる。ナビゲーションエディタを使用して新しい宛先を作成したり、後でフラグメントまたはアクティビティに置き換えるプレースホルダを作成することもできる。
例として新しい宛先を作成する。ナビゲーションエディタを使用して新しい宛先を追加するには、次の操作を行う。
- ナビゲーションエディタで[New Destination 宛先]アイコン
をクリックし、[Create new destination 新しい宛先]をクリックする。 - [New Android Component 新しいコンポーネント]ダイアログが表示され、フラグメントを作成する。フラグメントの詳細については、「フラグメント」のドキュメントを参照すること。
ナビゲーションエディタに戻って、Android Studioがナビゲーショングラフにこの宛先を追加している事を確認する。
https://developer.android.com/guide/navigation/navigation-getting-started#add-destinations
図3：宛先とプレースホルダ。(意訳元から転載)
ナビゲーショングラフに宛先を追加するほかの方法については、「Create destinations 宛先を作成する En」を参照すること。
宛先の仕組み
宛先をクリックして選択し、属性パネルに次の属性を指定する。
- Typeフィールドは、宛先がソース内のフラグメント、アクティビティ、またはその他のカスタムクラスとして実装されているかどうかを示す。
- Labelフィールドには、宛先のXMLレイアウトファイルの名前を指定する。
- IDフィールドには、コード内の宛先を参照するために使用されるIDを指定する。
- Classドロップダウンには、宛先に関連付けられているクラス名が表示される。このドロップダウンをクリックして、関連付けられたクラスを別の宛先タイプに変更できる。
テキストタブをクリックすると、ナビゲーショングラフの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="Blank" tools:layout="@layout/fragment_blank" /> </navigation>
開始画面の宛先を指定する
「開始画面(宛先) En 意訳」は、アプリを開いた時に最初に表示される画面で、アプリを終了する時の最後の画面でもある。ナビゲーションエディタは、"家"アイコン
を使用して開始画面(宛先)を示す。
全ての宛先を設定すると、次の操作を行って開始画面(宛先)を選択できる。
- デザインタブで、宛先をクリックしてハイライト表示をする。
- [開始先の割り当て]ボタン
をクリックするか、宛先を右クリックして、[開始画面(宛先)に設定]をクリックする。
接続先
アクションは宛先間の論理的な接続であり、ナビゲーショングラフで矢印として表される。アクションはアプリ内のどこからでも特定の宛先へ行くグローバルアクションEnを作成することもできる。
また、アクションは、ユーザがアプリ内で遷移できる様々なパスを表す。これについては、このトピックの後半の「宛先への移動」セクションで説明する。
ナビゲーションエディタで次の操作を行い2つの宛先を接続できる。
- デザインタブで、ユーザが移動する宛先の右側にカーソルを合わせる。図4のように、宛先の右側に円が表示される。
図4：接続先(右側の○)を持つ宛先(意訳元から転載) - 移動元の宛先をドラッグして、移動先でドロップする。図5の、2つの宛先間の線はアクションを表す。
図5：アクションを使用した宛先の接続(意訳元から転載) - 矢印をクリックしてアクションを選択すると、属性パネルに次の属性が表示される。
- Typeフィールド：アクション
- IDフィールド：アクションID
- Destinationフィールド：宛先となるフラグメントまたはアクティビティのID
- テキストタブをクリックしてXML表示に切り替える。アクション要素が元の宛先に追加された。Actionタグが移動元の宛先に追加され、ID属性とDestination属性を持ち、Destinationには次の宛先が設定されている。
<?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="fragment_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="fragment_blank_fragment2" tools:layout="@layout/fragment_blank_fragment2" /> </navigation>
ナビゲーショングラフは、アクションはActionタグで表され、属性には少なくともIDと移動先の宛先のIDが含まれる。
宛先への移動
宛先への移動は、NavHost内のナビゲーションを管理するNavControllerを使用する。
各NavHostには、対応する独自のNavControllerがある。
NavControllerは、次のいずれかのメソッドを使用して取得できる。
Kotlin:
- Fragment.findNavController()
- View.findNavController()
- Activity.findNavController(viewId: Int)
Java:
- NavHostFragment.findNavController(Fragment)
- Navigation.findNavController(Activity, @IdRes int viewId)
- Navigation.findNavController(View)
NavControllerを取得し、navigate()のオーバーロードの1つをコールし、別の宛先へ移動する。
例えばアクションを作成した場合、navigate(int)にアクションIDを渡して移動することができる。次に示す。
viewTransactionsButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Navigation.findNavController(view).navigate(R.id.viewTransactionsAction);
}
});
他の方法については、「Navigate to a destination 宛先へ移動するEn」のトピックを参照すること。
More information
- Principles of Navigation ナビゲーションの原則 En 意訳
- Create destinations 宛先の作成 En
- Navigate to a destination 宛先に移動する En
- Update UI components with NavigationUI ナビゲーションUIを使用してUIコンポーネントを更新する En
- Pass data between destinations 宛先へデータを渡す En
- Global actions グローバルアクション En
- Conditional destinations 条件付き宛先 En
- Custom destination types カスタム宛先タイプ En
- Android Jetpack: manage UI navigation with Navigation Controller (Google I/O 2018) YouTube
- Migrate an existing project to the Navigation Architecture Component 既存のプロジェクトをナビゲーションコンポーネントへ移行する En
- Navigation codelab ナビゲーション／コードラボ codelabs
ナビゲーションに問題が発生した場合、次のいずれかの方法でフィードバックを送信して欲しい。
- File a Navigation editor bug IssueTracker
- File a Navigation library buga IssueTracker
- Tag an issue on StackOverflow
バグレポートで最も役立つ情報を提供する方法については、次のリンクを参照すること。
※上記はhttps://developer.android.com/guide/navigation/navigation-getting-startedの意訳である
Android開発者向けドキュメントを意訳してみる。 - 365連休
意訳元https://developer.android.com/のライセンス解釈
ソースコードから抽出されたドキュメントやコードはAndroid Open Source Projectの優先ライセンスであるApache 2.0 licenseが適用され、それ以外のコンテンツはCC BY 2.5が適用されている。
よって、ページ全体の意訳についてはCC BY 2.5における翻案行為、ページ内のコード転載についてはApache 2.0 licenseにおける頒布行為にあたると解釈している。
