【Androidアプリ開発】BottomNavigationViewによる画面遷移

BottomNavigationViewを利用した画面遷移について説明しています。

BottomNavigationViewは名前の通り、下部メニューにより画面遷移を行うときに使用します。実装方法と各コンポーネント、コードの役割についてまとめていきます。

実装手順
画面の作成（xmlファイル）
1. メニューの作成
2. ナビゲーションの作成
内部処理の実装
実行結果
まとめ
参考

実装手順

実装までの手順を簡単にまとめると以下のようになります。
１，２に関して、本記事では説明を省きます。別の記事で説明していますので、リンクからご覧ください。

メインアクティビティの作成
フラグメントの作成
メニューの作成
メニュー項目とナビゲーションの関連付け

画面の作成（xmlファイル）

メニューの作成

下部メニューを作成します。

menuディレクトリの作成

「resディレクトリを右クリック＞新規＞Androidリソースディレクトリ」をクリックします。

ディレクトリー名に「menu」と入力して、OKをクリックします。
これでmenuディレクトリが作成されます。

menuファイルの作成

「menuディレクトリを右クリック＞新規＞Androidリソース・ファイル」をクリックします。

ファイル名に任意のファイル名を入力して、OKをクリックします。
今回は、下部メニューというのが分かるように「bottom_nav_menu」としました。

メニュー項目の追加

作成したメニューファイル（bottom_nav_menu.xml）のデザイン画面から「Menu Item」を追加していきます。

メインアクテビティ（activity_main.xml）に「BottomNavigationView」を追加します。
menu属性に作成したメニューファイルのIDを設定すると、下部メニューに項目が表示されるようになります。

「BottomNavigationView」をコードにするとこうなります。

app:layout_constraintBottom_toBottomOf=”parent”
画面の最下部へ表示する
app:menu=”@menu/bottom_nav_menu”
下部メニューに表示する項目を設定する

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_nav_menu" />

ナビゲーションの作成

ナビゲーションでメニューによる画面遷移を実装していきます。

navigationディレクトリ・ファイルの作成

メニューの作成と同じ手順でナビゲーションファイルを作成します。

ディレクトリ
「navigation」と入力して作成します。
ファイル
任意のファイル名を入力して作成します。
今回は「nav_graph」としました。

ナビゲーションの追加

ナビゲーションファイル（nav_graph.xml）にフラグメントを設定していきます。

「New Destination」をクリックします。

作成しておいたフラグメントファイルを選択します。
同じように2つ目のフラグメントも追加します。

フラグメントの追加が終わると、このように表示されます。
各フラグメントのIDは、必ず「Menu Item」と同じIDを設定してください。

下部メニューにフラグメントを追加

メインアクテビティの下部メニューにフラグメントを設定していきます。

「NavHostFragment」を追加します。

作成したナビゲーションファイルを選択して、OKをクリックします。

これでナビゲーションへのフラグメントの設定は終わりです。

内部処理の実装

メインアクティビティのonCreateに以下の処理を記述します。
ここでは、下部メニューとナビゲーションの関連付けを行っています。これで下部メニューによる画面遷移が行えるようになります。

// 下部メニューコンポーネントの取得
val bottomNavView: BottomNavigationView = findViewById(R.id.bottom_nav)
// ナビゲーションフラグメントの取得
val navController = findNavController(R.id.nav_fragment)

// 下部メニューとナビゲーションを関連付け
NavigationUI.setupWithNavController(bottomNavView, navController)