iOS開発者のAndroid開発入門その7(Navigation)

botman3 Android
スポンサーリンク

はじめに

Android でも iOS でいう UINavigationController のようなことができるのが Navigation。(たぶん)
Navigation Graph に複数の Navigation Graph を置くこともできるみたい(たぶん Storyboard Reference みたいなの)ですが今回は単一のやつのみの単純な遷移のみについて記載します。ついでに NavigationViewBottomNavigationView についても記載します。

最終的にはこんな感じ

NavigationView BottomNavigationView
navigation_view bottom_navigation

遷移

navigation

ソースはここ↓↓↓ (これの NavigationActivity とか)
ソース(github)

Navigation

必要なのは下記

  • Activity
    NavHostFragment を置く Activity
  • Fragment
    Navigation で遷移するそれぞれのページ
  • Navigation Graph
    それぞれのページの遷移先を示した xml
  • NavHost
    Navigation Graph からの宛先を表示する空のコンテナ(NavHostFragment)
  • NavController
    NavHost の画面遷移をコントロールするやつ

遷移の実装

  1. Navigation Graph 追加
  2. Activity に NavHostFragment を置く
  3. Fragment 追加
  4. Navigation Graph で Action と Destination を設定
  5. 遷移処理実装

1. Navigation Graph 追加

下記のように res に navigation.xml を追加する

navigation_xml

2. Activity に NavHostFragment を置く

任意の Activity に NavHostFragment を追加して navGraph に 1. で追加した navigation を指定する

defaultNavHosttrue を設定するとバックキーを押したときに Navigation にスタックがある場合はその Fragment に戻りない場合は Activity が終了する。false を設定した場合はスタックがあってもなくても Activity が終了する。

3. Fragment 追加

3つのページとして NavigationFirstFragment, NavigationSewcondFragment, NavigationThirdFragment を追加する。

First

Second

Third

4. Navigation Graph で Action と Destination を設定

navigation.xml を開き下記のように+を押して NavigationFirstFragment, NavigationSewcondFragment, NavigationThirdFragment を追加する。

navigation

First と Second、Second と Third を下記のように結ぶ。

navigation_xml2

navigation.xml はこんな感じになる

5. 遷移処理実装

それぞれの Fragment に遷移処理を実装する。

First

Second

Third

findNavController()NavController を取得して navigate で遷移する。戻るときは popBackStack で戻る。

これで Navigation を使った遷移処理は完了!!
アニメーションもつけれるらしい。(参考:[Android] 10分で作る、Navigationによる画面遷移

値渡しの実装

ページ間で値を渡す方法は Bundle と Safe Args を利用する方法の2つがある。
渡せる値は下記。

  • Integer
  • Float
  • Long
  • Boolean
  • String
  • リソース参照
  • カスタム Parcelable
  • カスタム Serializable
  • カスタム Enum

Bundle 利用

Bundle 利用の場合は下記のような感じ。

送信側

受信側

Safe Args 利用

Safe Args を使う場合は色々と前準備がいるけどこいつを使う方がよさそう。

  1. プロジェクトの build.gradle に依存関係記載
  2. モジュールの build.gradle に依存関係記載
  3. Navigation Graph に Arguments 追加
  4. 値の受け渡し処理実装
1. プロジェクトの build.gradle に依存関係記載

プロジェクトの build.gradle の dependencies に下記を追記する

2. モジュールの build.gradle に依存関係記載

モジュールの build.gradle に下記を追記する

3. Navigation Graph に Arguments 追加

navgation.xml を開いて値を渡す Fragment (Second)を選択して Arguments の+を押下して Arguments を追加する。

navigation_args

下記のように navgation.xml の Second のところに argument タグが追加される

これで一度ビルドすると java(genarated) のフォルダに ~Directions と ~Args というファイルが生成される。

4. 値の受け渡し処理実装

値の受け渡しは下記のようにおこなう。

送信側

受信側

割と簡単だしコードもスッキリするので Safe Args を使えばいいと思います!

NavigationView

左端を右にスワイプして出てくるドロワー?Navigation と併用するやつなのか知りませんが Navigation との併用方法について記載します。

  1. メニューの xml ファイルを追加
  2. レイアウトに NavigationView を追加
  3. Navigation と紐付ける

1. メニューの xml ファイルを追加

下記のように menu_navigation.xml を追加する

id は navigation.xml のそれぞれの fragment と揃える。

2. レイアウトに NavigationView を追加

NavigationView を利用する場合はレイアウトのルートを DrawerLayout にする必要があるので下記のようにして NavigationView を追加する。

headerLayout は特に設定しなくてもいいが今回は下記のような xml を設定しました。これでドロワーのヘッダーが表示されます。

navigation_drawer_header.xml

3. Navigation と紐付ける

ActivityonCreate に下記を追記して Navigation と紐付ける。

これでコードで遷移した場合もメニューの選択状態が反映される。

BottomNavigationView

名前の通り Bottom に表示するやつ。(TabBar みたいなもの?)

  1. メニューの xml ファイルを追加
  2. レイアウトに BottomNavigationView を追加
  3. Navigation と紐付ける

1. メニューの xml ファイルを追加

NavigationView と同じ menu_navigation.xml を利用する

2. レイアウトに BottomNavigationView を追加

3. Navigation と紐付ける

ActivityonCreate に下記を追記して Navigation と紐付ける。

これでコードで遷移した場合もメニューの選択状態が反映される。

おわりに

これで Android の画面遷移は大体理解した!(気がする)Activity 1つで画面はそれぞれ Fragment にするのと画面毎に Activity を作るのとできるけどどっちがスタンダードなんだろう??

参考

コメント

  1. […] Navigation はこっち […]

タイトルとURLをコピーしました