一：導(dǎo)包

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

二：App主題

android:theme="@style/Theme.MaterialComponents.Light"

三：基本使用

代碼

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:elevation="6dp"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="6dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:menu="@menu/menu"
        app:navigationIcon="@drawable/ic_edit_black_24dp">

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:src="@drawable/ic_edit_black_24dp"
        app:layout_anchor="@+id/bottom_app_bar"
        app:layout_anchorGravity="center_horizontal" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果

Image.png

四：屬性解釋

style="@style/Widget.MaterialComponents.BottomAppBar.Colored"

跟隨主題顏色的Style；

style="@style/Widget.MaterialComponents.BottomAppBar"

沒有顏色的Style。

app:fabAlignmentMode="center"

FloatingActionButton位于中間

app:fabCradleMargin="6dp"

與FloatingActionButton的外邊距

app:fabCradleRoundedCornerRadius="10dp"

BottomAppBar嵌入位置圓角半徑

app:menu="@menu/menu"

給BottomAppBar添加一個(gè)Menu

app:backgroundTint="#FFFF00"

背景著色

app:fabCradleVerticalOffset="8dp"

缺口垂直方向的偏移量

五：三角形缺口

需求：實(shí)現(xiàn)下圖效果

Demo_image.png

需要給BottomAppBar設(shè)置一個(gè)TriangleEdgeTreatment（默認(rèn)情況下是BottomAppBarTopEdgeTreatment），寫法如下：

BottomAppBar mBottomAppBar = findViewById(R.id.bottom_app_bar);
        float size = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, getResources().getDisplayMetrics());
        TriangleEdgeTreatment triangleEdgeTreatment = new TriangleEdgeTreatment(size, true);
        ShapePathModel shapePathModel = new ShapePathModel();
        shapePathModel.setTopEdge(triangleEdgeTreatment);
        MaterialShapeDrawable materialShapeDrawable = new MaterialShapeDrawable(shapePathModel);
        materialShapeDrawable.setTint(0XFFDDDDDD);
        mBottomAppBar.setBackground(materialShapeDrawable);

Image.png

六：結(jié)合RecyclerView實(shí)現(xiàn)滾動消失

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

    </androidx.recyclerview.widget.RecyclerView>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:elevation="6dp"
        app:hideOnScroll="true"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:menu="@menu/menu"
        app:navigationIcon="@drawable/ic_edit_black_24dp">

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:src="@drawable/ic_edit_black_24dp"
        app:layout_anchor="@+id/bottom_app_bar"
        app:layout_anchorGravity="center_horizontal" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

只需要在BottomAppBar里面添加app:hideOnScroll="true"就可以了

scroll.gif