[Android Material Design]组件15 - BottomNavigationView

效果图

越来越多的APP采用底部五个TAB页的布局，因此谷歌官方直接提供了现成的组件BottomNavigationView，需要结合Fragment来使用，为每个TAB页添加Fragment实例来实现各自的逻辑。

关键代码

class MainActivity : AppCompatActivity() {
    private val FRAGMENT_PAGE1 = 0
    private val FRAGMENT_PAGE2 = 1
    private val FRAGMENT_PAGE3 = 2
    private val FRAGMENT_PAGE4 = 3
    private val FRAGMENT_PAGE5 = 4

    private var mFragmentPage1: Fragment? = null
    private var mFragmentPage2: Fragment? = null
    private var mFragmentPage3: Fragment? = null
    private var mFragmentPage4: Fragment? = null
    private var mFragmentPage5: Fragment? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.navigation)
        bottomNavigationView.setOnNavigationItemSelectedListener { item: MenuItem ->
            when (item.itemId) {
                R.id.page_1 -> {
                    Toast.makeText(this@MainActivity, "page_1 click", Toast.LENGTH_SHORT).show()
                    showFragment(FRAGMENT_PAGE1)
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.page_2 -> {
                    Toast.makeText(this@MainActivity, "page_2 click", Toast.LENGTH_SHORT).show()
                    showFragment(FRAGMENT_PAGE2)
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.page_3 -> {
                    Toast.makeText(this@MainActivity, "page_3 click", Toast.LENGTH_SHORT).show()
                    showFragment(FRAGMENT_PAGE3)
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.page_4 -> {
                    Toast.makeText(this@MainActivity, "page_4 click", Toast.LENGTH_SHORT).show()
                    showFragment(FRAGMENT_PAGE4)
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.page_5 -> {
                    Toast.makeText(this@MainActivity, "page_5 click", Toast.LENGTH_SHORT).show()
                    showFragment(FRAGMENT_PAGE5)
                    return@setOnNavigationItemSelectedListener true
                }
                else -> return@setOnNavigationItemSelectedListener false
            }
        }
        //默认显示HomeFragment
        showFragment(FRAGMENT_PAGE1)
        val menuItemId = bottomNavigationView.menu.getItem(2).itemId
        val badge = bottomNavigationView.getOrCreateBadge(menuItemId)
        badge.isVisible = true
        //badge.number = 99
    }

    private fun showFragment(index: Int) {
        val fragmentManager = supportFragmentManager
        val transaction = fragmentManager.beginTransaction()
        hideFragment(transaction)
        when (index) {
            FRAGMENT_PAGE1 -> if (mFragmentPage1 == null) {
                mFragmentPage1 = Page1Fragment()
                transaction.add(R.id.content, mFragmentPage1!!)
            } else {
                transaction.show(mFragmentPage1!!)
            }
            FRAGMENT_PAGE2 -> if (mFragmentPage2 == null) {
                mFragmentPage2 = Page2Fragment()
                transaction.add(R.id.content, mFragmentPage2!!)
            } else {
                transaction.show(mFragmentPage2!!)
            }
            FRAGMENT_PAGE3 -> if (mFragmentPage3 == null) {
                mFragmentPage3 = Page3Fragment()
                transaction.add(R.id.content, mFragmentPage3!!)
            } else {
                transaction.show(mFragmentPage3!!)
            }
            FRAGMENT_PAGE4 -> if (mFragmentPage4 == null) {
                mFragmentPage4 = Page4Fragment()
                transaction.add(R.id.content, mFragmentPage4!!)
            } else {
                transaction.show(mFragmentPage4!!)
            }
            FRAGMENT_PAGE5 -> if (mFragmentPage5 == null) {
                mFragmentPage5 = Page5Fragment()
                transaction.add(R.id.content, mFragmentPage5!!)
            } else {
                transaction.show(mFragmentPage5!!)
            }
        }
        transaction.commit()
    }

    private fun hideFragment(transaction: FragmentTransaction) {
        if (mFragmentPage1 != null) {
            transaction.hide(mFragmentPage1!!)
        }
        if (mFragmentPage2 != null) {
            transaction.hide(mFragmentPage2!!)
        }
        if (mFragmentPage3 != null) {
            transaction.hide(mFragmentPage3!!)
        }
        if (mFragmentPage4 != null) {
            transaction.hide(mFragmentPage4!!)
        }
        if (mFragmentPage5 != null) {
            transaction.hide(mFragmentPage5!!)
        }
    }
}

Page1Fragment的代码如下

class Page1Fragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_page1, container, false)
    }
}

MainActivity的布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_navigation_menu" />
</LinearLayout>

Page1Fragment的布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="page1"
        android:layout_margin="20dp" />
</LinearLayout>

源码地址

https://github.com/yurensan/MaterialDesignDemo

我是予人三，希望大家点赞支持我哦~ 有大家的鼓励我会分享更多内容