このページは Cloud Translation API によって翻訳されました。

Navigation Editor

Android Studio には、ナビゲーショングラフの作成と編集に使用できる GUI が用意されています。基本的には、基盤となる XML リソースファイルのエディタです。

概要

XML グラフをアプリに追加すると、Android Studio の Navigation Editor でグラフが開きます。Navigation Editor では、ナビゲーショングラフを視覚的に編集したり、基盤となる XML を直接編集したりできます。

[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 は、デスティネーションとプレースホルダデスティネーションの例を示しています。

ナビゲーショングラフにデスティネーションを追加するその他の方法については、追加のデスティネーションをご覧ください。

既存のフラグメントまたはアクティビティからデスティネーションを作成する

既存のデスティネーションタイプをナビゲーショングラフに追加する場合は、Navigation Editor 内で [New Destination]（）をクリックします。

次に、表示されるプルダウンで、対応するリンク先をクリックします。ナビゲーショングラフの [Design] ビューにデスティネーションのプレビューが表示され、[Text] ビューに対応する XML が表示されます。

新しいフラグメントデスティネーションを作成する

Navigation Editor を使用して新しいデスティネーションタイプを追加する手順は次のとおりです。

Navigation Editor で、[New Destination] アイコンをクリックします。

次に、[新しいデスティネーションを作成する] をクリックします。
表示された [New Android Component] ダイアログで、フラグメントを作成します。

Navigation Editor に戻ると、作成したデスティネーションが Android Studio によってグラフに追加されています。

図 3 に、デスティネーションとプレースホルダデスティネーションの例を示します。

デスティネーションの構造

宛先をクリックして選択し、[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 内では、他のデスティネーションと同様に、プレースホルダを使用できます。