【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 に置き換える

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

関連記事

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その2

目次1 前回は・・・2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの? 前回は・・・ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その1

目次1 こういうことってないですか?2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに・・・5 Excelファイルのインポート方法6 これを組み合わせると??? こういうことってないですか? webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]

スマホアプリ

【Android】スプラッシュスクリーンを設定するお話

スマホアプリを作る上で欠かせない・・・訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン(以下スプラッシュ画面)ですよね 目次1 そもそもスプラッシュ画面とは?2 Androidアプリで実装する場合(今まで)3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは? スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]

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

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

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

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