Android Studio には、ナビゲーション グラフの作成と編集に使用できる GUI が用意されています。基本的には、基盤となる XML リソース ファイルのエディタです。
概要
XML グラフをアプリに追加すると、Android Studio の Navigation Editor でグラフが開きます。Navigation Editor では、ナビゲーション グラフを視覚的に編集したり、基盤となる XML を直接編集したりできます。
![](https://developer.android.google.cn/static/images/guide/navigation/nav-editor-2x.png?authuser=6&hl=ja)
- [Destinations] パネル: [Graph Editor] のナビゲーション ホストとすべてのデスティネーションを一覧表示します。
- Graph Editor: ナビゲーション グラフを視覚的に表現します。視覚的表現を示す [Design] ビューと、基盤となる XML 表現を示す [Text] ビューを切り替えることができます。
- Attributes: ナビゲーション グラフで選択されているアイテムの属性を表示します。
[Text] タブをクリックすると、対応する 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>
要素として表示されます。
リンク先を追加する
既存のフラグメントまたはアクティビティからデスティネーションを作成できます。また、Navigation Editor を使用して、新しいデスティネーションを作成する、または後でフラグメントあるいはアクティビティに置き換えるプレースホルダを作成することもできます。
この例では、新しいデスティネーションを作成する方法を示します。Navigation Editor を使用して新しいデスティネーションを追加する手順は次のとおりです。
- Navigation Editor 内で、[New Destination] アイコン
をクリックして、[Create new destination] をクリックします。
- 表示された [New Android Component] ダイアログで、フラグメントを作成します。フラグメントの詳細については、フラグメントの概要をご覧ください。
Navigation Editor に戻ると、作成したデスティネーションが Android Studio によってグラフに追加されています。
図 2 は、デスティネーションとプレースホルダ デスティネーションの例を示しています。
![](https://developer.android.google.cn/static/images/topic/libraries/architecture/navigation-destination-and-placeholder_2x.png?authuser=6&hl=ja)
ナビゲーション グラフにデスティネーションを追加するその他の方法については、追加のデスティネーションをご覧ください。
既存のフラグメントまたはアクティビティからデスティネーションを作成する
既存のデスティネーション タイプをナビゲーション グラフに追加する場合は、Navigation Editor 内で [New Destination]()をクリックします。
次に、表示されるプルダウンで、対応するリンク先をクリックします。ナビゲーション グラフの [Design] ビューにデスティネーションのプレビューが表示され、[Text] ビューに対応する XML が表示されます。
新しいフラグメント デスティネーションを作成する
Navigation Editor を使用して新しいデスティネーション タイプを追加する手順は次のとおりです。
Navigation Editor で、[New Destination] アイコン
をクリックします。
次に、[新しいデスティネーションを作成する] をクリックします。
表示された [New Android Component] ダイアログで、フラグメントを作成します。
Navigation Editor に戻ると、作成したデスティネーションが Android Studio によってグラフに追加されています。
図 3 に、デスティネーションとプレースホルダ デスティネーションの例を示します。
![](https://developer.android.google.cn/static/images/topic/libraries/architecture/navigation-destination-and-placeholder_2x.png?authuser=6&hl=ja)
デスティネーションの構造
宛先をクリックして選択し、[Attributes] パネルで次の属性を確認します。
- [Type] フィールド - デスティネーションの実装タイプがフラグメントなのか、アクティビティなのか、ソースコード内の他のカスタムクラスなのかを示します。
- [Label] フィールド - ユーザーが読むことのできる形式でデスティネーションの名前が表示されます。これは UI に表示される場合があります(
setupWithNavController()
を使用してNavGraph
をToolbar
に接続する場合など)。このため、この値にはリソース文字列を使用します。 - ID フィールドには、コード内でリンク先を参照する際に使用されるデスティネーション ID が含まれます。
- [クラス] プルダウンには、デスティネーションに関連付けられているクラスの名前が表示されます。関連するクラスを別のデスティネーション タイプに変更するには、このプルダウンをクリックします。
[Text] タブをクリックすると、ナビゲーション グラフの 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="@string/label_blank" tools:layout="@layout/fragment_blank" /> </navigation>
NavHostFragment
また、Layout Editor を使用してアクティビティに NavHostFragment
を追加することもできます。手順は次のとおりです。
- プロジェクト ファイルのリストでアクティビティのレイアウト XML ファイルをダブルクリックして、Layout Editor で開きます。
- [Palette] ペインで [Containers] カテゴリを選択します。または、「NavHostFragment」を検索します。
NavHostFragment
ビューをアクティビティにドラッグします。- 表示された [Navigation Graphs] ダイアログで、この
NavHostFragment
に関連付けるナビゲーション グラフを選択し、[OK] をクリックします。
デスティネーションを接続する
アクションは、デスティネーション間の論理接続です。アクションは、ナビゲーション グラフ内で矢印として表示されます。通常、アクションはデスティネーションを接続しますが、アプリ内のどこからでも特定のデスティネーションに移動するグローバル アクションを作成することもできます。
アクションを使用すると、ユーザーがアプリでたどる可能性のあるさまざまなパスを表します。実際にデスティネーションに移動するには、ナビゲーションを実行するコードを記述する必要があります。
Navigation Editor を使用して、2 つのデスティネーションを接続できます。手順は次のとおりです。
[Design] タブで、ユーザーの移動元デスティネーションの右側の上にポインタを置きます。図 4 に示すように、デスティネーションの右側に円が表示されます。
図 4. アクション接続サークルが付いたデスティネーション ユーザーを誘導するデスティネーションの上にカーソルをドラッグして、離します。図 5 に示すように、2 つのデスティネーションをつなぐ線がアクションを表します。
図 5. アクションを使用してデスティネーションを接続する 矢印をクリックしてアクションをハイライト表示します。次の属性が [Attributes] パネルに表示されます。
- [タイプ] フィールドには「アクション」が含まれています。
- [ID] フィールド - アクションの ID が表示されます。
- [Destination] フィールドには、デスティネーション フラグメントまたはアクティビティの ID を指定します。
[Text] タブをクリックして、XML ビューに切り替えます。アクション要素がソース デスティネーションに追加されています。次の例に示すように、アクションには ID と、次のデスティネーションの ID を含むデスティネーション属性があります。
<?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="@string/label_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="@string/label_blank_2" tools:layout="@layout/fragment_blank_fragment2" /> </navigation>
ナビゲーション グラフ内で、アクションは <action>
要素で表現されます。アクションは少なくとも、自身の ID と、ユーザーの移動先となるデスティネーションの ID を格納します。
プレースホルダ デスティネーション
プレースホルダを使用して、未実装のデスティネーションを示すことができます。プレースホルダは、デスティネーションの視覚的な表現として機能します。Navigation Editor 内では、他のデスティネーションと同様に、プレースホルダを使用できます。