开放原子开发者工作坊

从Demo3开始，接下来会介绍Design Support组件库中几个常用的组件，首先就先从Design Support Library开始说起。Android Design Support Library是Google I/O 2015发布会上官方提供的开源组件库，其中包括了各种符合Material Design风格的组件。我们今天要讲解的FloatActionButton就是其中之一。

要使用Design Support Library，首先要在项目中引入这个库，因为是官方提供的库，所以用最传统的compile语句来引用就可以。操作如下:
在项目资源管理器中打开Gradle Scripts->build.gradle(Module:app)文件，你会在其中看到各种我们应用程序的设置:

我们留意到方框中的语句，那个是我们建立工程的时候Android Studio自动帮我们导入的V7组件库支持包，接下来我们只要在其下面添加一条引用Design Support Library即可(友情提醒，对于Design Support Library的版本号，跟V7库的版本号相同就行)：

compile 'com.android.support:design:23.3.0'

添加引用之后只要我们按下Sync Now选项，Android Studio就会帮我们把Design Support Library导入到工程项目中:

之后我们就会在项目资源管理器(Project)External Libraries文件夹中看到design-23.3.0库(当然，这是我的版本)。顺便废话一下，之后我们要使用design support library的组件也要先引用这个库。
好了接下来进入主题。FloatActionButton是ImageButton的继承类，其用法跟普通的Button基本类似，由于其具有更多的表现属性，故其使用的重点其实是在布局上。
main_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/toolbar" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bMain_Float"
        app:fabSize="normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@android:drawable/ic_dialog_email"/>
</RelativeLayout>

 

上面我们只是像ImageButton这样定义，另外，FloatActionButton可以指定两个大小通过设置fabSize这个属性，正常size是normal，还有一个更小的模式为mini，你也可以尝试下设置成mini运行下看下效果。
运行程序，布局效果如下:

关于填充色，有两个重要的属性:backgroundTint和rippleColor，分别表示普通状态和点击状态下的填充色(普通状态下浮起的状态会有阴影，点击之后阴影范围会变大)。其中，backgroundTint的默认值是theme中的colorAccent(colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色)，所以你可以在style中修改colorAccent的值来自动改变这个属性，但我们一般不这么做；而rippleColor默认值是theme中的colorControlHighlight。一般的做法是直接在布局中指定这两个颜色:

<android.support.design.widget.FloatingActionButton
...
        app:backgroundTint="#FFC125"
        app:rippleColor="#FFD700"/>

 

FloatActinButton最大的特点是其悬浮的效果，所以关于其立体感的属性当然也重要。这里也是要涉及两个属性: elevation和pressedTranslationZ，分别为普通状态下的阴影大小和点击时阴影的大小，设置好之后，最终的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bMain_Float"
        app:fabSize="normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#FFC125"
        app:rippleColor="#FFD700"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"/>
</RelativeLayout>

至于点击事件呢，跟Button是一样的，这里就不详细介绍。最终效果:

有趣的一点是，FloatActionButton的一个比较常见的模式是点击之后让其动起来，这里就涉及到android的动画效果，关于这方面的知识，有兴趣的读者可以参考郭霖大神的一篇关于介绍属性动画的博客，里面关于属性动画的原理讲的非常细致，建议大家认真阅读: Android属性动画完全解析(上)，初识属性动画的基本用法(作者:guolin)
Demo源码下载地址:Demo3:FloatActionButton