【Android】Navigation Componentで簡単に画面遷移するお話

  • このエントリーをはてなブックマークに追加

いにしえの時代のFragment間の移動

7年くらい前までであれば、Fragment間の移動はソースで記述していました。

Fragment Managerを呼び出してTransactionを生成して、遷移先のFragmentを生成してから書き換えるという感じです。
懐かしさすら覚えますが、当時はこれはこれで便利だなと思いました。
もちろん今でもこの方法は使えますので、既存のアプリをわざわざ後述するNavigation Componentに置き換えるメリットは薄いと思います。

 Navagation Componentを使おう

いつのまにかNavigation Componentと呼ばれるものができ、Fragment間の挙動をxmlで記述し、プログラム上から呼び出すだけで簡単に遷移できるようになりました。

今回はFirstFragmentからSecondFragmentへの遷移を行うという動きを入れましょう。

 

作成手順は以下のようになります。
  1. resを右クリック
  2. Resource Typeを Navigation を選択。
  3. name にファイル名を入力します。(今回はnav_graph
  4. 必要なライブラリーがbuild.gradleのdependenciesに存在しない場合、ダイアログが表示されるため、OKを押す。
  5. res フォルダに navigation フォルダが作成され、nav_graph.xmlファイルが作成される
これで完成です。

それではxmlファイルを見ていきます。

先ほどの新規で作った場合は<fragment>タグは存在しませんが、今回は説明のため、あらかじめ2つのフラグメントの設定を行っておきます。

<fragment>が2つありますが、これはそれぞれFirstFragment SecondFragmentを設定します。
これはGUI上でも直接XMLを触ってもいいですが、XMLで触る場合は以下を参考にしてください。

id ID
name Fragmentを指定
label actionBarのタイトルで表示される文字列
layout Fragmentで指定されているレイアウト

これで2つのFragmentをNavigation Componentに登録しました。

次に遷移の動きを入れましょう。

先ほどのfragmentの中に

を入れます。

id ID
destination 遷移先のFragmentのIDを指定
enterAnim 画面遷移時の最初のアニメーション (任意)
exitAnim 画面遷移時の終了時のアニメーション (任意)
popEnterAnim 戻った時の最初のアニメーション(任意)
popExitAnim 戻ったときの終了時のアニメーション(任意)

必要なのはidとdestinationなので、まずはこれを入れてください。
今回はFirstFragmentからSecondFragmentへの遷移なのでこれだけでいいです。

Activityの設定

これだけだと表示がされないので、Activityの設定を行います。

activity_main.xmlの記述を次のように変更します。

 

今回は単純な画面なのですっきりしていますが、実際はボトムナビゲーションやらFABつけたりするともう少しごちゃごちゃするので、そこらへんは対応してください。

先ほど作った navigation/nav_graph をここで設定しています。

 

Safe Argsの利用

どうもSafe Argsという機能を使ってNavHostを利用するのがよさげなので、それを利用します。
ただそれを利用するにはbuild.gradleに追加を行う必要があります。
バージョンはそのときによって変わるのでご注意ください。

以上を入力してSync nowしたのちにビルドを行います。

遷移

それでは遷移させましょう。
遷移させるイベントはなんでもいいですが、ボタンをタップしたタイミングで遷移させるのがいいかなと思います。

Safe Argsを利用したことで、自動的に フラグメント名+Directions というクラス名が生成されます。(今回は FirstFragmentDirections)

また navigations に追加したidは[action_First_to_Second]となりますが、これも

actionFirstToSecond()となります。

最後にnavController.navigate(action) で遷移します。

 

遷移時のアニメーション

どうせなら画面遷移時にアニメーションを設定しましょう
以前のやり方でも設定できましたが、今回はnavigationのactionで設定できるのでかなり手軽に行えます。

アニメーションの追加

まずアニメーションを作ります。

res/anim(なければ作る)の中に以下のXMLファイルを作ります。

左側からスライド

右側からスライド

左側へスライド

右側へスライド

この4つを使って先ほどのに設定を行います。

 

これを設定することで画面遷移時には右からスライド、戻ってきた場合は左へスライドというiOSライクな動きができると思います。
(AndroidアプリでiOSの挙動をするのはどうかとは思いますが)

遷移時に値を渡す

画面を遷移する際に値を渡したいことがあると思います。

その場合も簡単に値を渡すことができます。

渡し方

遷移先(受け取り先)のの中に渡したい型と名前を設定します。

 

受け取り方

受け取り側も簡単です。

今回はInt型のnumber を渡したので、受け取り側もInt型で受け取れば簡単に渡せます。
例文は1つの値を渡していますが、複数を渡す場合は<argument>を複数記述し、渡す値を増やしていけば、簡単に複数の値を渡せます。

自作クラスの値を渡す場合は?

自作Classを渡す場合、例えば以下のクラスを渡したい場合

このままでは渡せないのでParcelable形式にします。
ただ、普通に設定すると面倒なので、以下のような設定にします。
(Kotlin Android Extensionsは非推奨になっているようなのでdataBindingを使うようにします)

記述後にSync nowを行い

と自作クラスの記述を調整します。

あとはを


app:argTypeはフルパスで記述しましょう

あとはいつも通り

で送って

で受け取ります。
本当に簡単ですね。

終わりに

Fragmentの遷移はXCodeのStoryboardと違って視覚的にわかりづらく、ソースで処理する必要がありましたが、Navigation Componentを使うと視覚的にもわかりやすくしかもアニメーションや値渡しが簡単にできるようになります。

あまりにも変わりすぎるので、過去のアプリの資産がなかなか使いづらくなりますが、いいものは積極的に導入したいですね。

 

参考URL

デスティネーション間でデータを渡す

[Android] NavigationでSafeArgsを使って引数付き画面遷移をする

Kotlin Android Extensions から View Binding に置き換える

執筆者:松本[ エンジニア ]

関連記事

マークアップ

CSSを使わないSVGアニメーションの作り方【キーフレームアニメーション編】

SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 目次1 静止画のSVG2 基本のアニメーション2.1 […]

スマホアプリ

【Android Studio】Androidアプリでラジオボタンの『選択時』『非選択時』のボタンの背景色と文字色を変える

Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 目次1 ラジオボタンを設置2 背景色を設定3 文字色を設定 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 […]

マークアップ

祝解禁!IEがなくなって使えるようになった便利なCSS 8選

2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 目次1 object-fit1.1 今まで1.2 これから2 filte […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。