Android Design Support Library系列

FloatingActionButton本质是一个ImageButton，只不过相对于ImageButton，FloatingActionButton多了很多特效而已.

惯例：给出官方文档.

一、FloatingActionButton实现的效果图

使用前添加依赖

dependencies {
    compile 'com.android.support:design:25.3.1'
}

布局文件：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
   >

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/add"
        android:layout_centerInParent="true"

        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:pressedTranslationZ="16dp"
        app:rippleColor="@color/colorAccent" />

</RelativeLayout>

FloatingActionButton使用及其简单，直接当做ImageButton使用，给它设置宽高、src等属性.

下图是 android:src="@mipmap/add"原图，是一个白色的+号.

add.png

观察上面的效果图,我们可以发现FloatingActionButton在add.png的基础上添加了不少额外的特效:

1)原图是没有填充色的，FloatingActionButton实现的效果图上多了蓝色的填充色

2)原图是没有阴影的，FloatingActionButton实现的效果图上在静止时有一个阴影，按下之后阴影范围扩大了

3) 原图是没有设置seletor的，FloatingActionButton实现的效果图上在静止时是一种填充色，按下之后填充色变了，并且伴随一个涟漪扩散的动画

二、FloatingActionButton的常用属性

 android:src=""    FloatingActionButton的图标

app:backgroundTint=""    填充色
该属性不设置的话，默认使用theme中colorAccent颜色

Android5.0 引入了Z轴的概念，让组件呈现3D效果，Z属性可以通过elevation和translationZ进行修改
Z＝ elevation＋translationZ
elevation：设置该属性使控件有一个阴影，感觉该控件像是“浮”起来一样，达到3D效果
translationZ：设置该组件阴影在Z轴（垂直屏幕方向）上的位移

在5.0之前，我们如果想给View添加阴影效果，以体现其层次感，通常的做法是给view设置一个带阴影的背景图片
在5.0之后，我们只需要简单的修改View的Z属性，就能让其具备阴影的层次感，不过要求版本至少5.0  Lollipop,也就是API21    
使用FloatingActionButton的好处就是不需要5.0 就可以使用Z属性，因为google已经封装好了


app:elevation=""      默认状态下FloatingActionButton的阴影大小
app:pressedTranslationZ=""  按下时FloatingActionButton的阴影在Z方向（垂直屏幕方向）上的偏移

 app:rippleColor=""  按下之后FloatingActionButton的背景颜色，还会伴随一个涟漪扩散的动画
(PS:需要给FloatingActionButton设置点击事件才会有效果)

 app:fabSize=""    FloatingActionButton的大小，normal,mini,auto三个值
当然，如果这三个值都不满意的话，我们可以直接通过 ：
android:layout_width=""       android:layout_height=""
这两个我们最常用的属性来设置大小

app:borderWidth="0dp"     早期版本如果不设置这个属性为0dp的话，在5.X设备上没有阴影效果，不过我测试时发现不设置也没关系，阴影效果照样显示，大概google修复了吧，如果你的阴影效果不显示，可以设置这个属性试一试

FloatingActionButton还可以锚定在另外一个组件上方，这个通常搭配AppBarLayout，在使用CoordinatorLayoutt作为容器时才能生效

app:layout_anchor="@id/.......your AppBarLayout id" 锚定哪个组件，通常是AppBarLayout
app:layout_anchorGravity="end|bottom"  相对于该组件位置

三、FloatingActionButton兼容性

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
   >

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/add"

        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:pressedTranslationZ="16dp"
        app:rippleColor="@color/colorAccent" />


</RelativeLayout>

去掉了android:layout_centerInParent="true"
在5.0以前的设备上的效果图：

在5.0之后的设备上的效果图：

可以看见，两张效果图不一样，在5.0之前，会默认有一个外边距形成了margin的效果，在5.0之后就没有这个外边距，所以我们需要给FloatingActionButton设置一个正确的margin来兼容。

 android:layout_margin="@dimen/fab_margin"

在res/values/dimens中

   <dimen name="fab_margin">0dp</dimen>

在res/values-v21/dimens中

<dimen name="fab_margin">16dp</dimen>

ok,这样就能很好的兼容了O(∩_∩)O
PS：在使用CoordinateorLayout作为容器的时候就没有外边距这个问题了.

四、设置点击事件

像ImageButton一样设置就可以了

public class MainActivity extends AppCompatActivity {

     private FloatingActionButton mFAB;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mFAB= (FloatingActionButton) findViewById(R.id.floatingActionButton);
        mFAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //do something
            }
        });
    }
}

ok，FloatingActionButton的使用就介绍到这里~~~