FLoatingActionButton悬浮操作按钮和BottomAppBar

FLoatingActionButton悬浮操作按钮，Android 5.0出现的新控件，属于Material Design中的一个控件，继承了ImageView类，所以也具有ImageView的所有特性。

作为新手练习，我从Youtube上找了一个简单的Demo作为上手，下面将简单介绍一下

一：要使用FLoatingActionButton，先需要在File->Project Structure中添加Design的Dependencies，通过在search中输入desgin去寻找：

寻找android.support

二：并且app中的build.gradle中添加依赖: implementation 'com.google.android.material:material:1.0.0', 如果本地已经有相关依赖可以直接添加

添加依赖

三：在res->drawable中添加三个icon：add，home，star分别用于后续项目，右键drawable->new->vector asset

新建vector asset

寻找新的clip art，在搜索框中寻找你需要的icon，将color设置为FFFFFF：

新建icon_add图标

四：右键res新建Android Resource File，将Resource type选择Menu，用于将这个布局放入的res的menu package中

新建menu布局

五：修改menu_bottombar.xml布局

修改menu_bottom.xml布局

1. 添加两个item tag分别用于放入home和star icon。

2. 自定义两个item的id。

3. 在menu中添加xmlns:app="http://schemas.android.com/apk/res-auto"，用于添加item属性showAsAction:"ifRoom"。如果有足够空间会始终显示在actionBar中。

六：添加BottomAppBar到activity_main.xml中：

1. 因为CoordinatorLayout布局可以实现许多Material Design的滚动效果，无需自己编写动画和滚动效果，所以设置布局为CoordinatorLayout。

2. 添加BottomAppBar组件，除了layout_width等基本配置，我们注意：

- app:navigationIcon用于添加之前所在drawable中设置好的icon_menu图标

- android:layout_gravity="bottom"用于将bottomAppBar添加到布局底部

- style用于调用material布局风格

- app:menu="@menu/menu_bottombar"关联我们写好的menu_bottombar.xml布局

添加bottomAppBar到activty_main.xml

七：添加FloatingActionButton到activity_main.xml中：

1. 添加FloatingActionButton组件，出去layout_width等基本配置，我们注意：

android:backgroundTint用于添加按钮背景颜色

android:src="@drawable/ic_add"用于添加之前所在drawable中设置好的icon_add图标

app:layout_achor="@id/bottomAppbar"用来关联bottomAppbar组件，在本demo中与bottomAppBaapp:fabCradleRoundedCornerRadius="20dp"一起运用

添加FloatingActionButton到Activity_main.xml

整体main_activity.xml效果

效果

八：MainActivity中调用floatingActionButton

1. 因为floatingActionButton属于View所以用View类生成fab

2. 通过findViewById找到定义好的fabBtn

3. MainActivity实现View.OnClickListener接口，重写onClick方法

MainActivity实现