【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】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

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