Kotlinで既存のプロジェクトにBottomNavigationViewを追加するぞ
現在の環境
で、追加した画面にはどこから遷移するのか……ということで、BottomNavigationViewを追加して、そこから遷移させることにしました。
ボタンは２つにして、ひとつは既存のFragmentAに、もうひとつは今回追加した新FragmentBに遷移させましょう。
とりあえずさらのプロジェクトをButtom Navigation Activityでつくって研究。
※プロジェクト作成時にエラーが出た場合はこちらを参照のこと。
なんとなくわかったところで、既存のプロジェクトにButtom Navigation Activityを追加。（javaフォルダで右クリック > New > Activity > Button Navigation Activity）
追加したらビルド確認。エラー出たら、上の記事参照。
あとこんなエラー出たので
The minCompileSdk (31) specified in a
dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
is greater than this module's compileSdkVersion (android-30).
Dependency: androidx.lifecycle:lifecycle-livedata-ktx:2.4.1.
AAR metadata file: C:\Users\bamds\.gradle\caches\transforms-2\files-2.1\4d3c8eb2f329127dc0f21ca5261dedef\jetified-lifecycle-livedata-ktx-2.4.1\META-INF\com\android\build\gradle\aar-metadata.properties.
compileSdkVersionとtargetSDKVersionを30から31にしました。
ビルドできたので……まずは既存の画面にナビを表示させてみよう。
新しく追加されたactivity_main2.xmlから、以下のコードを元からあるactivity_main.xmlに移動。
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
なんだけど、移動先がConstraintLayoutじゃなくてCoordinatorLayoutでして……いろいろやったのですが、最終的には、ルートのレイアウトを「androidx.coordinatorlayout.widget.CoordinatorLayout」から「RelativeLayout」にして、CoordinatorLayoutを囲むようにして……ボタン部分はこうしました。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/nav_view"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.MyApp.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/Theme.MyApp.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="@layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu" />
</RelativeLayout>
表示された。長い道のりじゃった。
さて次に、新しく追加されたMainActivity2のonCreateにある以下のコードを、元からあるMainActivityに移動。
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
val appBarConfiguration = AppBarConfiguration(
setOf(
R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications
)
)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
これで動かすと、ツールバーにアプリ名が表示されていたものが、画面名になってしまうので……
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
navView.setupWithNavController(navController)
アクションバーのくだりはカット。
あっ、ちなみにNavController（nav_host_fragment）は、「content_main.xml」の中に配置済みです。（元から使ってた）
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
で、この時点でナビボタン押しても何も動かないね。ナビボタンの遷移の記述は「mobile_navigation.xml」にあるんだけれど、NavControllerは「nav_graph.xml」の記述で遷移するからね。
ここで「nav_graph.xml」に「HomeFragment」「DashboardFragment」「NortificationsFragment」を追加すれば、ボタン押下で遷移しますが。
それはせずに、res > menu > bottom_nav_menu.xml をコードで開いて、itemをひとつ削除。
そして残ったitemのidを、遷移させたいFragmentのクラス名に書き換えます。このフラグメントは、すでに「nav_graph.xml」に記述されてあるものという前提です。
※ちなみにすでにmenuフォルダに他のメニューのファイルは存在しています。ツールバーに表示されるオプションメニューですね。なので、menuフォルダには、ファイルが2つあります。
で、これでボタンでの遷移は完成しました。はー長かった。
あ、あと、ログイン画面など、ナビボタンを表示させたくない場合……MainActivityのonCreateで……
navController.addOnDestinationChangedListener { _, destination, _ ->
when (destination.id)
{
R.id.LoginFragment, R.id.ImageFragment ->
navView.visibility = View.GONE
else ->
navView.visibility = View.VISIBLE
}
}
こうじゃ！
こちらを参考にしました。
あとは要らないファイルを削除じゃ！！！
「ui」フォルダはごっそり要らぬ。
あとは、MainActivity2、activity_main2.xml、movile_navigation.xml、さようなら。
ビルドで動作確認。OK！！
いやー、これ何日かかったかしら。おつかれさまでした。
