LoginSignup
9
10

More than 3 years have passed since last update.

@ikemura23(Ikemura Kazutaka)in株式会社ゆめみ

Navigation Architecture Componentを試す

Last updated at Posted at 2018-08-02

Google I/O 2018でNavigation Architecture Componentが追加されてからずっと気になっており、そろそろ試さねばと思って実装してみた。

シングルActivity＋多Fragmentの遷移を作っていく。

環境

Android Studio 3.2 Beta 5
Build #AI-181.5281.24.32.4913314, built on July 26, 2018
JRE: 1.8.0_152-release-1136-b04 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.12.6

compileSdkVersion 28

kotlin_version = '1.2.51'

Navigation導入

お手本にしたのはAndroid Developers

safeArgsの導入

build.gradle
classpath "android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha04"

Navigationの導入

app/build.gradle
apply plugin: "androidx.navigation.safeargs"

    def nav_version = "1.0.0-alpha04"
    implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin

AndroidXだとビルドエラーになるのでgradle.protertiesに以下を追加

android.enableJetifier=true
android.useAndroidX=true

メモ githubのコミットログ

resにNavigationファイルを作成

ここから本番

Android Developersによると以下の方法で説明されていた。

  • プロジェクトウィンドウで、resディレクトリを右クリックし、New > Android Resource File を選択します。
  • File nameに「nav_graph」などの名前を入力します。（名前は何でもいい）
  • Resource typeドロップダウンリストからNavigationを選択します。
  • OKをクリックします

スクショ撮ってきた

プロジェクトウィンドウのresディレクトリを右クリックし、New > Android Resource File を選択

File nameにnav_graphを入力、Resource typeにNavigationを選択

nav_graph.xmlが作成された

Fragmentを作成

Fragmentは自分で作る必要がある

今回はプロジェクトウィンドウからNew > Fragment > Fragment(Brank)で２〜３個ほどFragmentを作った
- FirstFragment
- SecondFragment
- ItemFragment（リスト）

Navigationエディタで遷移を操作

さきほど作成したnav_graph.xmlを選択して下部のDesignタブを選択すると、Graphエディタなるものが使える

スクショ（遷移作成済み）

あとはここにFragmentを追加し、遷移先のFragmentを選ぶだけ。

xmlは一切書かずにエディタをポチポチすると、nav_graf.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"
    android:id="@+id/nav_graph"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.ikemura.android_kotlin_lab.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first">
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.ikemura.android_kotlin_lab.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second">
        <action
            android:id="@+id/action_secondFragment_to_itemFragment"
            app:destination="@id/itemFragment" />
    </fragment>
    <fragment
        android:id="@+id/itemFragment"
        android:name="com.ikemura.android_kotlin_lab.ItemFragment"
        android:label="fragment_item_list"
        tools:layout="@layout/fragment_item_list" />
</navigation>

注意点

Navigation Editorを使うには設定が必要らしい

公式から引用

Note: The Navigation Editor is enabled by default only on Canary builds of Android Studio. To enable the Navigation Editor on Beta, Release Candidate, or Stable builds, click File > Settings (Android Studio > Preferences on Mac), select the Experimental category in the left pane, check Enable Navigation Editor, and then restart Android Studio.
  • Navigation EditerはCanary buildsでのみ有効(ベータ版も含まれる）
  • File > Settings (Android Studio > Preferences on Mac) > Experimental > Navigation Editorのチェックを有効にする
  • Android Studioを再起動

遷移コードをFragmentに実装

まずはボタン押下で FirstFragment => SecondFragment の遷移

公式で一番最初に紹介されてたパターン

FirstFragment.kt
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_first, container, false)
        //ボタンクリック
        view.findViewById<Button>(R.id.fist_navigate_button).setOnClickListener {
             //SecondFragmentへの遷移開始
            Navigation.findNavController(it).navigate(R.id.secondFragment)
        }
        return view

これでSecondFragmentに遷移できるようになった

次に SecondFragment => ItemFragment の遷移

ここでは上と違う書き方で遷移コードを書いてみる

Navigationクラスの便利メソッドがあるらしいので、そちらを使ったパターン

        second_navigate_button.setOnClickListener(
                //遷移開始
                Navigation.createNavigateOnClickListener(R.id.itemFragment, null)
        )

nullとなってる箇所にはBundleをセットできるらしい

バックキーで戻る遷移

Activityにこのコードを追加するだけで、端末バックキーで簡単に前にFragmentに戻れる

MainActivity.kt
    override fun onSupportNavigateUp() = findNavController(this, R.id.my_nav_host_fragment).navigateUp()

これだけでシングルActivity＋多Fragmentの遷移ができた

感想

ほとんどコードを書かずにFragment間を簡単に遷移できるのは素直にすごいと思った。

遷移する際にパラメータやアニメーションも指定できそうなので、シングルActivity＋多Fragmentの作成が捗りそう。

Activity間の遷移にはあまり使い物にならない、とよく見るので、主にFragment間だけで使えそう。

DialogFragmentにも使えるんだろうか？Dialogは普通にコードで表示するんだろうか？
あとで調べてみよう。

今回使ったコードはこちら
ikemura23/Android-Kotlin-Lab at Navigation https://github.com/ikemura23/Android-Kotlin-Lab/tree/Navigation

SafeArgsも使ったけど長くなるので別記事にする。

参考リンク

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
10