『Android基础入门』悬浮按钮

1.简介

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

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

2.引入依赖

打开模块设置

添加库依赖

添加悬浮按钮floatingactionbutton的库依赖

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

java

implementation 'com.getbase:floatingactionbutton:1.10.1'

3.简单使用

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

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

xml

<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

xml

<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标签

xml

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

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

xml

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