使用Kotlin開發Android應用(9) - 底部導航欄BottomNavigationView

Use BottomNavigationView and Fragment to make home page

使用BottomNavigationView底部導航欄和Fragment碎片建立首頁

一個簡單的例子

建立activity

class HomeActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        val navController = findNavController(R.id.nav_host_fragment)
        val appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.navigation_movie,
                R.id.navigation_rank,
                R.id.navigation_cinema,
                R.id.navigation_my
            )
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
        navView.getOrCreateBadge(R.id.navigation_movie)?.number = 2
    }
}

在activity代碼中，配置AppBarConfiguration和NavController

佈局文件：

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        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" />
    
    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

菜單文件 res/menu/bottom_nav_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_movie"
        android:icon="@drawable/ic_movie"
        android:title="@string/movie" />
    ···
</menu>

導航文件 res/menu/mobile_navigation.xml

<navigation 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/mobile_navigation"
    app:startDestination="@+id/navigation_movie">
    <fragment
        android:id="@+id/navigation_movie"
        android:name="com.edgar.movie.ui.movie.MovieFragment"
        android:label="@string/movie"
        tools:layout="@layout/fragment_movie" />
    ...
</navigation>

建立對應的Fragment

class MovieFragment : Fragment() {

    private lateinit var movieViewModel: MovieViewModel

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        movieViewModel =
            ViewModelProviders.of(this).get(MovieViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_movie, container, false)
        val textView: TextView = root.findViewById(R.id.text)
        movieViewModel.text.observe(viewLifecycleOwner, Observer {
            textView.text = it
        })
        return root
    }
}

Fragment的佈局文件

<?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=".ui.movie.MovieFragment">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationView

com.google.android.material.bottomnavigation.BottomNavigationView

主要的xml屬性:

• itemBackground 底部導航欄的背景顏色,默認是主題的顏色
• itemIconSize 圖標大小
• itemIconTint 圖標顏色
• itemRippleColor 圖標顏色
• itemTextColor 文字顏色

• labelVisibilityMode 標籤文本顯示的方式

  • labeled 顯示文本
  • selected 只顯示選中的文本
  • unlabeled 不顯示文本
  • auto 自動

重要的方法:

• void removeBadge (int menuItemId) 移除角標
• BadgeDrawable getOrCreateBadge(int menuItemId) 獲取某個item的角標
• void setOnNavigationItemReselectedListener 設置item被重選的監聽器
• void setOnNavigationItemSelectedListener 設置item被選中的監聽器

注意事項:
底部導航欄默認高度是56dp,
菜單隻能是3-5個

Reference 參考

• BadgeDrawable
• BottomNavigationView
• 本文示例