『Android基础入门』悬浮按钮

1.简介

浮动操作按钮（FAB） 在屏幕上执行主要或最常见的操作。它出现在所有屏幕内容的前面，通常为圆形，中心有一个图标。所以并不是所有的界面都适合设计悬浮按钮，同样并不是所有的功能都设置成悬浮按钮。如常见的快速创建邮件和便签，或者在地图板块中快速定位到当前位置等等功能都是常用且主要的，所以剋设置成悬浮按钮。要注意避免在一个界面中设置过多的悬浮按钮，这样会冲淡界面主题功能，而且占据屏幕空间。

更多使用和设计技巧详看：按钮：浮动操作按钮

2.引入依赖

这里我们尝试一种新的导入依赖的方式，因为平时我们都是在在项目的build.gradle中直接加入我们所需要的依赖库，然后sync now。今天我们尝试使用通过模块设置添加库依赖

第一步：打开模块设置

第二步：添加库依赖

第三步：添加悬浮按钮floatingactionbutton的库依赖

使用起来并没有方便多少，反而麻烦了。但也是学到了一种新的方式加入库依赖，不然Android Studio中这么多的按钮都不知道哪一些有什么用。

在build.gradle中可见刚才添加的库依赖，所以我们其实也可通过直接复制粘贴，然后sync now来添加

 implementation 'com.getbase:floatingactionbutton:1.10.1'

3.简单使用

悬浮按钮的使用很简单，它也是Material Design UI中典型的代表，在UI设计上提供了Z轴的概念，让按钮呈现悬浮阴影，带来视觉上的美感。

我使用相对布局来设置这个悬浮按钮，其下有很多属性，常用的如下：

fab_icon：设置图标
fab_size：设置图标大小，取值可以是normal(56dp)和mini(40dp)
fab_colorNormal：按钮的颜色，默认是蓝色
fab_title：设置标签文本内容

 <com.getbase.floatingactionbutton.FloatingActionButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_alignParentStart="true"
         app:fab_icon="@drawable/ic_email"
         app:fab_size="normal"
         app:fab_colorNormal="#fee">
 
     </com.getbase.floatingactionbutton.FloatingActionButton>

4.悬浮容器

FloatingActionsMenu可以用来放置多个悬浮组件。常见属性如下：

fab_expandDirection：设置子按钮列表弹出方向，默认向上弹出
fab_labelsPosition：设置文字标签的位置，子按钮图标的左边或右边
fab_labelStyle：设置弹出的子按钮的文字标签的样式
fab_addButtonSize：容器的大小，取值可以是normal，mini

 <com.getbase.floatingactionbutton.FloatingActionsMenu
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentEnd="true"
         android:layout_alignParentTop="true"
         app:fab_addButtonSize="mini"
         app:fab_expandDirection="left"
         tools:ignore="RelativeOverlap">
 
         <com.getbase.floatingactionbutton.FloatingActionButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:fab_colorNormal="#FFF"
             app:fab_colorPressed="@color/design_default_color_primary"
             app:fab_size="mini" />
 
         <com.getbase.floatingactionbutton.FloatingActionButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:fab_colorNormal="#FFF"
             app:fab_colorPressed="@color/design_default_color_primary"
             app:fab_size="mini" />
     </com.getbase.floatingactionbutton.FloatingActionsMenu>

5.自定义labelStyle

在colors.xml中定义好样式style标签

  <style name="LabelStyle">
         <item name="android:background">@drawable/bg_label</item>
         <item name="android:textColor">#FFF</item>
 </style>

创建一个新的drawable resource定义具体样式

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
 <!--前两位透明度，后6位颜色值-->
     <solid android:color="#b2000000"/>
     <corners android:radius="100dp"/>
     <padding
         android:right="8dp"
         android:left="8dp"
         android:top="2dp"
         android:bottom="2dp"/>
 </shape>

在activity_main.xml中使用

6.效果展示

android_001

7.参考资料

Material Design之-交互效果炸裂的 FloatingActionMenu - 掘金 (juejin.cn)

FloatingActionButton(悬浮按钮) - 简书 (jianshu.com)

安卓drawable基本属性corners、solid、gradient、stroke、size、padding详解 - 简书 (jianshu.com)