下タブでのViewPagerの切り替えはよく実装するレイアウトのひとつです。
ということで、自分がすぐ思い出せるようにまとめておきます。
targetSdkVersion 29 で確認しています。
下タブに表示するメニューを作成
app/res/menu/navigation.xml を作成し、下記のように内容を修正します。
コード内の android:id は任意のidを指定可能です。
android:icon には下タブに表示する項目のアイコン、 android:title には、下タブに表示する項目のタイトルを指定します。
今回は例として、 home と account の２つの項目を下タブに表示します。
navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="home" />
<item
android:id="@+id/navigation_account"
android:icon="@drawable/ic_account_circle_black_24dp"
android:title="account" />
</menu>
BottomNavigationViewを配置
表示する画面のレイアウトに、下記のように BottomNavigationView を追加します。
app:menu="@menu/navigation" の箇所で、先ほど作成した navigation.xml を指定しています。
activity_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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- ここを追加 -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="0dp"
android:layout_height="64dp"
android:background="@android:color/white"
app:menu="@menu/navigation"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
プレビューでは、こんな感じになっているのではないでしょうか？
ViewPagerの配置
今回は下タブの選択でViewPagerを切り替えたいため、ViewPagerを配置します。
先程のレイアウトに追加します。
activity_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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- ここを追加 -->
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/bottomNavigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="0dp"
android:layout_height="64dp"
android:background="@android:color/white"
app:menu="@menu/navigation"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Fragmentの用意
ViewPagerで切り替えて表示するためのFragmentを用意します。
特に機能は実装していません。
今回はふたつFragmentを用意しますが、どちらも同じ内容なので、ひとつだけ例を載せます。
fragment_home.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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HOME"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
HomeFragment.kt
class HomeFragment: Fragment() {
override fun onAttach(context: Context) {
super.onAttach(context)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.fragment_home, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
}
}
アダプターを作成
ViewPagerでFragmentを表示するために、アダプターを定義します。
MainFragmentStatePagerAdapter.kt
class MainFragmentStatePagerAdapter(fm: FragmentManager): FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
override fun getItem(position: Int): Fragment {
return when(position) {
0 -> HomeFragment()
else -> AccountFragment()
}
}
override fun getCount(): Int {
return 2
}
}
ViewPagerとBottomNavigationを設定
呼び出し元から、ViewPagerとBottomNavigationを設定します。
ViewPagerの設定では、スワイプでFragmentを切り替えた際に、下タブの選択されている項目が切り替わるようにしています。
BottomNavigationの設定では、下タブを選択した際に、Fragmentが切り替わるようにしています。
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// ViewPagerの設定
viewPager.apply {
adapter = MainFragmentStatePagerAdapter(supportFragmentManager)
addOnPageChangeListener(object: ViewPager.OnPageChangeListener {
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
override fun onPageScrollStateChanged(state: Int) {}
override fun onPageSelected(position: Int) {
when(position) {
0 -> bottomNavigation.menu.findItem(R.id.navigation_home).isChecked = true
else -> bottomNavigation.menu.findItem(R.id.navigation_account).isChecked = true
}
}
})
}
// BottomNavigationの設定
bottomNavigation.setOnNavigationItemSelectedListener(BottomNavigationView.OnNavigationItemSelectedListener { item ->
viewPager.currentItem = when(item.itemId) {
R.id.navigation_home -> 0
else -> 1
}
return@OnNavigationItemSelectedListener true
})
}
}
こんな感じになっていれば完成です！
