Android 之 FloatingActionButton

发表于 | 分类于 | | 阅读次数 | 浏览 次

一、简介

  • FloatingActionButton 是 Android 5.0 之后新出的一个控件，属于 com.android.support:design 包下，可以帮助我们轻松的实现悬浮按钮的效果。
  • 我们看一下这个控件的继承关系，这家伙实际上是一个 ImageButton
    image

二、简单使用

2.1 要先在 app 的 build.gradle 中添加依赖
1
2
//个人认为与 V7 包的版本一致最好
 compile 'com.android.support:design:25.3.1'
2.2 xml 文件如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="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">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            android:fitsSystemWindows="true"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <!--自定义控件-->
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="FloatingActionButton"
                android:textSize="20dp"
                android:textStyle="bold" />
        </android.support.v7.widget.Toolbar>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/floating_icon"
            />
    </FrameLayout>
</LinearLayout>
  • 上边的代码中我们指定了 FloatingActionButton 的位置为： bottom|end ，边界为：16dp ，并且设置了要显示的图片
2.3 设置完 xml 文件之后直接运行，效果如下：

image

  • 图片是自己找的，会发现默认的颜色就是粉色，即 styles.xml 中的颜色：
1
<item name="colorAccent">@color/colorAccent</item>
  • 大小我也没有设置，默认大小就是这么大。
2.4 FloatingActionButton 在 xml 中的其他常用属性

  • 修改背景色： app:backgroundTint=”@color/colorPrimaryDark”

  • 修改按钮未按下时悬浮高度（阴影）：app:elevation=”10dp”，默认是6dp

  • 设置按钮按下时的悬浮高度：app:pressedTranslationZ=”10dp” 默认是12dp

  • 显示的图片：android:src=”@drawable/floating_icon”

  • 修改显示大小：app:fabSize=”normal” normal和auto显示一样，mini，显示小

  • 设置钮点击之后显示的颜色： app:rippleColor=”@color/colorAccent”

  • 设置按钮边框宽度，有种立体的效果：app:borderWidth=”5dp”

2.5 FloatingActionButton 的隐藏与显示
1
2
3
//默认有动画效果
floating.show(); 显示
floating.hide(); 隐藏
2.6 FloatingActionButton 的点击事件
  • 它的点击事件与 ImageView 设置点击事件的方式一样，这一点由继承关系可以看出