Android下部タブ、BottomNavigationViewを使用して実装

こんにちは、今日はAndroidドロップダウンタブの実現方法について説明します.
次は完成本です.

下部タブを実装する前に、メニューに基づいて表示する計画を構成してください.
以下に示すように、簡単なホームページ、ライブラリ、および私のページ計画を実現しました.ラベル名のみが表示されます.

class HomeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false)
    }

    companion object {
        const val TAG = "HomeFragment"
        fun newInstance() =  HomeFragment()
    }
}

<!-- res/layout/fragment_home.xml -->

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/home" />

</FrameLayout>

必要な計画をすべて作成した場合は、次のようにメニューリソースファイルを作成し、タブを構成するメニュー項目を作成します.

<!-- res/menu/menu_bottom_navigation -->

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:title="@string/home"
        android:icon="@drawable/ic_home" />

    <item
        android:id="@+id/menu_gallery"
        android:title="@string/gallery"
        android:icon="@drawable/ic_gallery" />

    <item
        android:id="@+id/menu_my_page"
        android:title="@string/my_page"
        android:icon="@drawable/ic_my_page" />
</menu>

次いで、FragmentContainerViewおよびBottomNavigationViewは、ボトムラベルを実装するアクティブデバイス上に配置される.

<!-- res/layout/activity_main.xml -->

<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.fragment.app.FragmentContainerView
        android:id="@+id/fragment_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

最初に作成したメニュー項目をBottomNavigationViewのプロパティに追加します.(app:menuプロパティ)

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_bottom_navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

最後に、下部タブにItemSelectedListenerを設定し、選択したメニューに従って対応するレイヤー表示を設定します.

class MainActivity : AppCompatActivity(), NavigationBarView.OnItemSelectedListener {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        initView(ActivityMainBinding.inflate(layoutInflater))
    }

    private fun initView(binding: ActivityMainBinding) = with(binding) {
        setContentView(root)
        bottomNav.setOnItemSelectedListener(this@MainActivity)
        bottomNav.selectedItemId = R.id.menu_home
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean =
        when (item.itemId) {
            R.id.menu_home -> {
                showFragment(HomeFragment.TAG)
                true
            }
            R.id.menu_gallery -> {
                showFragment(GalleryFragment.TAG)
                true
            }
            R.id.menu_my_page -> {
                showFragment(MyPageFragment.TAG)
                true
            }
            else -> false
        }

    private fun showFragment(tag: String) {
        // 기존 프래그먼트 숨기기
        supportFragmentManager.fragments.forEach {
            supportFragmentManager.beginTransaction().hide(it).commit()
        }

        // 선택한 프래그먼트 보여주기
        supportFragmentManager.findFragmentByTag(tag)?.let {
            supportFragmentManager.beginTransaction().show(it).commit()
        } ?: createFragmentByTag(tag).let {
            supportFragmentManager.beginTransaction().add(R.id.fragmentContainer, it, tag).commit()
        }
    }
    
    private fun createFragmentByTag(tag: String): Fragment = when (tag) {
        HomeFragment.TAG -> HomeFragment.newInstance()
        GalleryFragment.TAG -> GalleryFragment.newInstance()
        MyPageFragment.TAG -> MyPageFragment.newInstance()
        else -> throw Exception("유효하지 않은 TAG 입니다.")
    }
}

これにより、選択したメニューに基づいてバックグラウンド変更を実施できます.
間違ったところがあったら、伝言を残してください.😊