android BottomNavigationView 簡單使用

首先需要在(app)build.gradle 的dependencies里面引入

implementation 'com.google.android.material:material:1.0.0'

新建MainActivity找到對應的xml 加入viewpager 和 BottomNavigationView

<?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:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/nav_view"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="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"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在res-menu 文件夾下新建 bottom_nav_menu.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="@string/title_home"/>

    <item
            android:id="@+id/navigation_dashboard"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="@string/title_dashboard"/>

    <item
            android:id="@+id/navigation_notifications"
            android:icon="@drawable/ic_notifications_black_24dp"
            android:title="@string/title_notifications"/>

</menu>

重寫 MyPagerAdapter

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter

class MyPagerAdapter(fm: FragmentManager,val fts:List<Fragment>) : FragmentPagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {
        return fts[position]
    }

    override fun getCount(): Int {
        return fts.size
    }

}

新建fragment  頁面xml 就一個TextView就不貼了（這里就用一個fragment模擬一下，實際應該建立多個fragment類）

class HomeFragment : Fragment() {
    private var param: String? = null
    private lateinit var baseView:View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param = it.getString("param")
        }
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        baseView = inflater.inflate(R.layout.fragment_home, container, false)
        baseView.text.text = param
        return baseView
    }

}

現在開始在 MainActivity 寫代碼了

class MainActivity : AppCompatActivity() {

    private val onNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener {
        when(it.itemId){
            R.id.navigation_home -> {
                viewpager.currentItem = 0
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                viewpager.currentItem = 1
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                viewpager.currentItem = 2
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    private val onPageChangeListener = object : ViewPager.OnPageChangeListener {
        override fun onPageScrollStateChanged(state: Int) {

        }

        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {

        }

        override fun onPageSelected(position: Int) {
            when(position){
                0 -> {nav_view.selectedItemId = R.id.navigation_home}
                1 -> {nav_view.selectedItemId = R.id.navigation_dashboard}
                2 -> {nav_view.selectedItemId = R.id.navigation_notifications}
            }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        nav_view.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener)
        val f1 = HomeFragment()
        var args = Bundle()
        args.putString("param",getString(R.string.title_home))
        f1.arguments = args
        val f2 = HomeFragment()
        args = Bundle()
        args?.putString("param",getString(R.string.title_dashboard))
        f2.arguments = args
        val f3 = HomeFragment()
        args = Bundle()
        args?.putString("param",getString(R.string.title_notifications))
        f3.arguments = args
        val fts = listOf(f1, f2, f3)
        val fm = supportFragmentManager
        viewpager.adapter = MyPagerAdapter(fm,fts)

        viewpager.addOnPageChangeListener(onPageChangeListener)
    }
}

 

你現在可以用app:labelVisibilityMode="[labeled, unlabeled, selected, auto]

不設置默認就是 auto

labeled     所有的標簽都是可見的。
unlabeled  只顯示圖標。
selected    將只顯示選定項和移位項的標簽。
auto         將根據您擁有的項目數選擇“標記”或“選定”。標記為1-3項，選擇為3+項。