AndroidStudio3.3.1 Navigation editorが便利すぎた

AndroidStudio3.3.1から新しく NavigationComponents という仕組みが追加されました。 使ってみた感じとしてはiOSの開発で利用するXcodeの storyboard に似ているなという印象です。

この記事では NavigationComponents を利用して GUI で画面遷移を簡単に実装する方法をご紹介します。

Gradle追記

Gradleに以下を記述します。

implementation "android.arch.navigation:navigation-fragment:1.0.0-beta02"
implementation "android.arch.navigation:navigation-ui:1.0.0-beta02"
implementation "android.arch.navigation:navigation-fragment-ktx:1.0.0-beta02"
implementation "android.arch.navigation:navigation-ui-ktx:1.0.0-beta02"

3つのFragmentを準備

3つのフラグメントを作成します。

class FirstFragment: Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }
}

プロジェクトのディレクトリの中身はこんな感じになっています。

Navigationファイルの作成

いよいよここからが本題になります。

まずは res ディレクトリの中に navigation ディレクトリを作成します。

そして navigation ディレクトリの中に New > Navigation resource file を作成します。

今回は navigation_graph.xml という名前をつけました。

Fragmentにコネクションを紐づける

続いて先ほど用意したFragment同士にコネクションをつけて遷移するための準備をします。

左上の「+」ボタンをクリックすると準備したFragmentを選択できるので、 任意のモノを選択し画面を配置していきます。

その後、配置したFragmentの右の丸ポチをドラッグして任意の遷移先Fragmentにコネクションを接続します。

今回は「FirstFragment > SecondFragment > ThirdFragment >」と全ての画面が繋がった状態を作りました。

実際 xml 側はこのような記述になっています。

先ほど繋げたコネクションは action として定義されており、 この action をボタンを押された時のアクションとして設定していきます。

MainActivityにFragmentを設置する

3つのFragmentを管理するMainActivity側にこのように書くことで先ほど書いたNavigationの状態を丸っと設置することができます。 activity_main.xmlを以下のように編集しました。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <fragment
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:id="@+id/fragment"
            app:navGraph="@navigation/navigation_graph"
            app:defaultNavHost="true"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
    />

</android.support.constraint.ConstraintLayout>

Actionを呼び出す

用意したそれぞれのFragment側にボタンを設置して、onViewCreated() の中でボタンのアクションを定義します。 先ほどの action は Navigation.findNavController(it).navigate(R.id.fragmentID) で取得することができます。

fragment_first.xml に以下を追記しました。別のFragmentも同じように編集します。

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    val button = first_button
    button.setOnClickListener { Navigation.findNavController(it).navigate(R.id.action_firstFragment_to_secondFragment) }
}

これで全ての準備は終了です。実際に実行してみましょう。

ボタンを押すとそれぞれの画面に遷移するようになりました。

最後に

AndroidStudio3になってから、だいぶGUIで作業できることが増えてきて、 少ないコードで簡単に画面遷移を行えるようになりました。

今の状態だと、何もアニメーションがなく、パッと切り替わってしまうので 次回の記事でアニメーションをつけてiOSライクな画面遷移を実装したいと思います。

最後まで読んで下さり有難うございました。