サイドバー
広告
目次
03.画面遷移の作成
appモジュールから各Fragmentの画面に遷移させるためNavigationを作成します。
ナビゲーションバーの作成
画面下部に画面遷移用のナビゲーションバーを作成します。
アイコンのダウンロード
最初にナビゲーションバー用のアイコンをダウンロードします。
今回は、GoogleのMaterial Symbolsから下記のアイコンをダウンロードしました。
-
home ➡ ( ic_menu_home.xml )
-
settings ➡ ( ic_menu_settings.xml )
-
list ➡ ( ic_menu_listing.xml )
ダウンロード後、カッコ内の名前にファイル名を変更します。
ツールバーの『ツール(T)』➡『Resource Manager』と進みます。
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.6"
[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』でナビゲーションのリソースファイルが作成されます。
作成したリソースファイルを編集します。
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_graph"
app:startDestination="@id/menu_home"
>
<fragment
android:id="@+id/menu_home"
android:name="jp.co.example.android01.ui.home.HomeFragment"
/>
<fragment
android:id="@+id/menu_listing"
android:name="jp.co.example.android01.ui.listing.ListingFragment"
/>
<fragment
android:id="@+id/menu_settings"
android:name="jp.co.example.android01.ui.settings.SettingsFragment"
/>
</navigation>
- 4行目～6行目
- 起動時に表示するFragmentを設定します。
- 9行目のFragmentのidを指定しています。
- 9行目、14行目、19行目
- 表示する各Fragmentのidを設定します。
- 対応するbottom_nav_menuの各メニュー項目のid名と同じにします。
- 10行目、15行目、20行目
- 対応する各FragmentのFragmentクラス名を名前空間を含めて設定します。
FragmentContainerViewの配置
各Fragmentを遷移表示させるためのContainerViewをappモジュールのレイアウトに配置します。
<androidx.constraintlayout.widget.ConstraintLayout ...
:
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
:
- 4行目
- コンポーネントのidを設定します。
- 6行目～7行目
- コンポーネントの幅と高さを設定します。
- ConstraintLayoutで親のコンポーネントに合わせるため0dpにしています。
- 8行目
- コンポーネントの上端を親のコンポーネントの上端に合わせる設定にしています。
- 9行目
- コンポーネントの左端を親のコンポーネントの左端に合わせる設定にしています。
- 10行目
- コンポーネントの右端を親のコンポーネントの右端に合わせる設定にしています。
- 11行目
- コンポーネントの下端をナビゲーションバーコンポーネントの上端に合わせる設定にしています。
- 12行目
- 使用するナビゲーショングラフを設定しています。
- 13行目
- 端末のバックキーで前のFragmentに戻るように設定しています。
- falseで常にアプリケーションを終了させます。
画面遷移の実装
appモジュールのMainActivityに画面遷移を実装します。
:
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.NavigationUI
import com.google.android.material.bottomnavigation.BottomNavigationView
:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
:
setContentView(R.layout.activity_main)
val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragmentContainerView) as NavHostFragment
NavigationUI.setupWithNavController(bottomNavigation, navHostFragment.navController)
}
}
- 11行目
- ナビゲーションバーを取得します。
- 12行目
- FragmentContainerViewを取得します。
- NavHostFragmentに型キャストしています。
- 13行目
- NavControllerを設定します。
