03.画面遷移の作成

appモジュールのMainActivityに画面遷移を管理するNavHostを設定します。

   :
@Composable
fun AppNavHost() {
}

ナビゲーションバーの作成

画面下部に画面遷移用のナビゲーションバーを作成します。

アイコンのダウンロード

最初にナビゲーションバー用のアイコンをダウンロードします。

今回は、GoogleのMaterial Symbolsから下記のアイコンをダウンロードしました。

home ➡ ( ic_menu_home.xml )
settings ➡ ( ic_menu_settings.xml )
list ➡ ( ic_menu_listing.xml )

ダウンロード後、カッコ内の名前にファイル名を変更します。

Resource Manager

ツールバーの『ツール(T)』➡『Resource Manager』と進みます。

Resourceの追加

Moduleが『app.main』になっていることを確認します。

『＋』アイコンをクリックして『Import Drawables』を選択します。

パスの選択

ダウンロードしたアイコンファイルを選択します。

『OK』で次に進みます。

アイコンの確認

インポートするアイコンを確認します。

『次へ(N)』で次に進みます。

インポート

インポートする場所を確認します。

『Import(C)』でアイコンがインポートされます。

メニューの作成

ナビゲーションバーに登録するメニューを作成します。

新規リソースファイルの作成

appモジュールで右クリック➡『新規(N)』➡『Android Resource File』へと進みます。

リソース情報の入力

Resource Typeを『Menu』にして、任意のFile nameを入力します。
ここでは、bottom_nav_menu にしています。

『OK』でメニューのリソースファイルが作成されます。

作成したリソースファイルを編集します。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/menu_home"
    android:icon="@drawable/ic_menu_home"
    android:title="Home" />
  <item
    android:id="@+id/menu_listing"
    android:icon="@drawable/ic_menu_listing"
    android:title="一覧" />
  <item
    android:id="@+id/menu_settings"
    android:icon="@drawable/ic_menu_settings"
    android:title="設定" />
</menu>

4行目、8行目、12行目: メニュー項目のidを設定します。; +でこの項目で登録する新規idになります。
5行目、9行目、13行目: メニュー項目のアイコンを設定します。
6行目、10行目、14行目: メニュー項目のタイトルを設定します。

ナビゲーションバーの作成と配置

ナビゲーションバーを作成して、appモジュールのActivityに配置します。

<androidx.constraintlayout.widget.ConstraintLayout ...
   :
  <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu"
    app:labelVisibilityMode="selected"
  />
</androidx.constraintlayout.widget.ConstraintLayout>

4行目: コンポーネントのidを設定します。
5行目: コンポーネントの幅を設定します。; ConstraintLayoutで親のコンポーネントに合わせるため0dpにしています。
6行目: コンポーネントの高さを設定します。; wrap_contentでコンポーネントで必要な高さの指定になります。
7行目: コンポーネントの下端を親のコンポーネントの下端に合わせる設定にしています。
8行目: コンポーネントの左端を親のコンポーネントの左端に合わせる設定にしています。
9行目: コンポーネントの右端を親のコンポーネントの右端に合わせる設定にしています。
10行目: 表示するメニューを設定しています。
11行目: メニュー項目のタイトルを表示する方法を設定しています。; selectedでメニュー項目が選択されたときに表示します。; labeledで常時表示します。

ナビゲーションコンポーネントの導入

画面遷移を実装するため、Navigationコンポーネントを導入します。

バージョンカタログにNavigationコンポーネントの情報を追記します。

[versions]
   :
androidx-navigation-ktx = "2.7.7"

[libraries]
   :
androidx-navigation-fragment-ktx = { module = "androidx.navigation:navigation-fragment-ktx", version.ref = "androidx-navigation-ktx" }
androidx-navigation-ui-ktx       = { module = "androidx.navigation:navigation-ui-ktx",       version.ref = "androidx-navigation-ktx" }
   
[plugins]
   :

[bundles]
   :
androidx-navigation-ktx = [ "androidx-navigation-fragment-ktx", "androidx-navigation-ui-ktx" ]

3行目: mavenCentralリポジトリの最新安定バージョンを指定します。
7行目～8行目: Navigationコンポーネントの依存ライブラリを定義しています。
15行目: Navigationコンポーネントの依存ライブラリをグループ化しています。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

appモジュールのbuild.gradle.ktsにNavigationコンポーネントの依存ライブラリを追記します。

   :
dependencies {
   :
  implementation(libs.bundles.androidx.navigation.ktx)
}

4行目: グループ化したNavigationコンポーネントの依存ライブラリを参照しています。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

ナビゲーショングラフの作成

ナビゲーション関連情報を管理するナビゲーショングラフ(Navigation graph)を作成します。

appモジュールで右クリック➡『新規(N)』➡『Android Resource File』でNavigation Resourceを作成します。

リソース情報の入力

Resource Typeを『Navigation』にして、任意のFile nameを入力します。
ここでは、nav_graph にしています。

『OK』でナビゲーションのリソースファイルが作成されます。