[AndroidStudio3.2 canary] Navigation Architecture Componentの使い方2/2（実装編）

どうも、saikiです。

前回に引き続きNavigationを使ってみますよ。

完結編。

サンプルgithub:https://github.com/sasasaiki/android-kotlin-navigation-sample/tree/master

1.Navigationファイルの作成
3.フラグメントとActionの追加
4.Fragmentの修正
5.使う
最後.実行する
まとめ
- 共有:
- 関連

1.Navigationファイルの作成

resを右クリック->new->Android Resource FileからNavigationの設定ファイルを作成します。

ファイル名を好きに設定して（今回は「main_nav_graph」）Resource typeをNavigationに設定します。

あとは勝手に入ってくれるのでOKを押せばOKです。

生成されたファイル（res/navigation/main_nav_graph）を開くとこんな感じで空のNavigationEditorが開かれます。あとはここにフラグメントを追加して遷移を書くだけ。

3.フラグメントとActionの追加

最初に開かれるfragmentはもうあるので遷移先のフラグメントを作成します。

好きなように作ってください。

おすすめは右クリック->new->Fragment->BrankFragmentです。

今回はSubFragmentという名前のフラグメントを作りました。

フラグメントを作ったらmain_nav_graphに追加します。

NavigationEditorの真ん中のウィンドウの左上にあるボタンを押してfragment_mainとfragment_subを追加します。

そうすると追加したフラグメントが表示されるのでmainの方を選択して右側のウィンドウにあるSetStartDestinationを押します。

これで最初にMainFragmentが開かれるようになります。

次に遷移のアクションを追加します。

main_fragmentの右側にある丸ぽちからsub_fragmentにドラッグすることで遷移のactionを作成することができます。

actionが作られると線が引かれます。

で、さらにその矢印クリックして右ウィンドウをみるか、右クリックしてeditを選ぶかするとアニメーションや渡す値などを設定できます。

いくつかまだわからない設定がありますがとりあえずアニメーションだけ全て設定してみました。

これでNavigation側の設定は終わりです。

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"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@id/mainActivityFragment">

    <fragment
        android:id="@+id/mainActivityFragment"
        android:name="app.saiki.navigationsample.MainActivityFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/action_mainActivityFragment_to_subFragment"
            app:destination="@id/subFragment"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"
            app:popEnterAnim="@anim/nav_default_pop_enter_anim"
            app:popExitAnim="@anim/nav_default_pop_exit_anim" />
    </fragment>
    <fragment
        android:id="@+id/subFragment"
        android:name="app.saiki.navigationsample.SubFragment"
        android:label="fragment_sub"
        tools:layout="@layout/fragment_sub" />
</navigation>

<?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"

xmlns:tools="http://schemas.android.com/tools"

app:startDestination="@id/mainActivityFragment">

<fragment

android:id="@+id/mainActivityFragment"

android:name="app.saiki.navigationsample.MainActivityFragment"

android:label="fragment_main"

tools:layout="@layout/fragment_main">

<action

android:id="@+id/action_mainActivityFragment_to_subFragment"

app:destination="@id/subFragment"

app:enterAnim="@anim/nav_default_enter_anim"

app:exitAnim="@anim/nav_default_exit_anim"

app:popEnterAnim="@anim/nav_default_pop_enter_anim"

app:popExitAnim="@anim/nav_default_pop_exit_anim" />

</fragment>

<fragment

android:id="@+id/subFragment"

android:name="app.saiki.navigationsample.SubFragment"

android:label="fragment_sub"

tools:layout="@layout/fragment_sub" />

</navigation>

4.Fragmentの修正

Navigationを使うように最初に埋め込むFragmentのlayoutFileを修正します。今回はcontent_main.xmlです

content_main.xml

<fragment 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:id="@+id/fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:layout="@layout/fragment_main" 
    android:name="androidx.navigation.fragment.NavHostFragment"//Navigationを使うぜ宣言。修正前はMainActivityFragmentが設定されている。
    app:navGraph="@navigation/nav_graph_main"//作ったnavigationFile名を指定
    app:defaultNavHost="true"//これがないと戻るボタンでActivityが閉じられる
/>

<fragment 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:id="@+id/fragment"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:layout="@layout/fragment_main"

android:name="androidx.navigation.fragment.NavHostFragment"//Navigationを使うぜ宣言。修正前はMainActivityFragmentが設定されている。

app:navGraph="@navigation/nav_graph_main"//作ったnavigationFile名を指定

app:defaultNavHost="true"//これがないと戻るボタンでActivityが閉じられる

app:defaultNavHost=”true”を入れておくと戻るボタンで一つ前のFragmentに戻ることが可能になります。

もしくはActivityにこれを書いてもいいらしいです。

<span class="kwd">override</span> <span class="kwd">fun</span><span class="pln"> onSupportNavigateUp</span><span class="pun">()</span><span class="pln">
        </span><span class="pun">=</span><span class="pln"> findNavController</span><span class="pun">(</span><span class="pln">R</span><span class="pun">.</span><span class="pln">id</span><span class="pun">.</span><span class="pln">nav</span><span class="lit">_</span><span class="pln">host</span><span class="lit">_f</span><span class="pln">ragment</span><span class="pun">).</span><span class="pln">navigateUp</span><span class="pun">()</span>

override fun onSupportNavigateUp()

= findNavController(R.id.nav_host_fragment).navigateUp()

5.使う

fragment_mainに適当なbuttonを追加して、MainActivityFragmentに以下を追加します。

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        button.setOnClickListener {
            Navigation.findNavController(it).navigate(R.id.action_mainActivityFragment_to_subFragment)
        }
    }