1. BottomNavigationView导航

BottomNavigationView 用来创建底部导航条,方便用来做页面切换。当有3-5个目标导航页面时,可以使用它来做导航。

1.1. Usage

创建一个menu资源,最多包含5个MenuItem。

BottomNavigationView添加到ContentView的下边。

设置app:menu属性,引用第一步中创建的menu资源。

创建监听器,通过setOnNavigationItemSelectedListener(…)

<?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">

    <!-- Content -->

    <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:menu="@menu/bottom_nav_menu"
            app:labelVisibilityMode="labeled"
            app:itemTextColor="@color/bottom_nav_colors"
            app:itemIconTint="@color/bottom_nav_colors"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationView 还支持显示badge,可以通过menuItemId初始化并显示BadgeDrawable,再次调用时会重复利用已存在的BadgeDrawable

BadgeDrawable badge = bottomNavigationView.showBadge(menuItemId);

注意: 不要忘记移除BadgeDrawable当不再需要它时。

bottomNavigationView.removeBadge(menuItemId);

如果你只是需要暂时隐藏badge,可以通过改变BadgeDrawable的visibility来实现。

Please see BadgeDrawable for details on how to update the badge content being displayed.

1.1.1. Handling States

app:itemIconTintapp:itemTextColor 使用一个 ColorStateList 用于实现不同状态下对icon图标和字体颜色的控制。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/bn_active" android:state_pressed="true" />
    <item android:color="@color/bn_active" android:state_checked="true" />
    <item android:color="@color/bn_inactive" />
</selector>

1.1.2. Material Styles

Using BottomNavigationView with an updated Material theme (Theme.MaterialComponents) will provide the correct updated Material styles to your BottomNavigationViews by default. If you need to use an updated BottomNavigationView and your application theme does not inherit from an updated Material theme, or if you’d like to use a variant style, you can apply one of the updated Material styles directly to your widget in XML:

Component Attribute Default Theme Attribute Value
itemTextAppearanceActive textAppearanceCaption
itemTextAppearanceInactive textAppearanceCaption
android:background colorSurface
itemIconTint (checked, enabled) colorPrimary
itemIconTint (enabled) colorOnSurface at 54% opacity
itemIconTint (disabled) colorOnSurface at 21% opacity
itemTextColor (checked, enabled) colorPrimary
itemTextColor (enabled) colorOnSurface at 54% opacity
itemTextColor (disabled) colorOnSurface at 21% opacity

BottomNavigationView

results matching ""

    No results matching ""