<Android 基础（十）> FloatingActionButton

介绍

Source Code中的介绍如下：

Floating action buttons are used for a special type of promoted action. They are distinguished
by a circled icon floating above the UI and have special motion behaviors related to morphing,
launching, and the transferring anchor point.

Floating action buttons come in two sizes: the default and the mini. The size can be
controlled with the {@code fabSize} attribute.

As this class descends from {@link ImageView}, you can control the icon which is displayed
via {@link # setImageDrawable(Drawable)}.

The background color of this view defaults to the your theme’s {@code colorAccent}. If you
wish to change this at runtime then you can do so via
{@link # setBackgroundTintList(ColorStateList)}.

@attr ref android.support.design.R.styleable#FloatingActionButton_fabSize

属性值

属性值 意义 app:backgroundTint 设置背景颜色 app:fabSize 设置FAB的大小，主要有两个取值normal,mini android:src 设置FAB的图标内容 app:rippleColor 设置FAB点击过程中的颜色 app:elevation 设置FAB正常情况下的阴影效果 app:pressedTranslationZ 设置FAB点击时的阴影大小 app:borderWidth 设置边框宽度 android:clickable 是否可点击true or false app:layout_anchor 设置FAB的锚点，即以哪个控件为参照点设置位置 app:layout_anchorGravity 设置FAB相对锚点的位置，取值:top,bottom.left,right,center_vertical,fill_vertical, center_horizontal,fill_horizontal,center,fill,clip_vertical,clip_horizontal,start,end

具体使用

布局文件
activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimaryDark"        android:minHeight="?attr/actionBarSize"        app:navigationIcon="@drawable/ic_account_balance_black_24dp"        app:title="Mraz FAB Demo"></android.support.v7.widget.Toolbar>    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab_left"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="left|bottom"        android:layout_marginBottom="@dimen/activity_vertical_margin"        android:layout_marginLeft="@dimen/activity_horizontal_margin"        android:clickable="true"        android:onClick="leftClick"        android:src="@drawable/ic_arrow_back_black_24dp"        app:backgroundTint="@color/colorPrimary"        app:fabSize="mini"        app:rippleColor="@color/colorPress" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab_right"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="right|bottom"        android:layout_marginBottom="@dimen/activity_vertical_margin"        android:layout_marginRight="@dimen/activity_horizontal_margin"        android:clickable="true"        android:onClick="rightClick"        android:src="@drawable/ic_arrow_forward_black_24dp"        app:backgroundTint="@color/colorLight"        app:borderWidth="0dp"        app:elevation="20dp"        app:fabSize="normal"        app:pressedTranslationZ="50dp"        app:rippleColor="@color/colorPress" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab_anchor"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="right|bottom"        android:layout_marginRight="10dp"        android:layout_marginTop="20dp"        android:clickable="true"        android:onClick="topClick"        android:src="@drawable/ic_arrow_forward_black_24dp"        app:backgroundTint="#ff87ffeb"        app:borderWidth="0dp"        app:elevation="6dp"        app:fabSize="normal"        app:layout_anchor="@+id/toolbar"        app:layout_anchorGravity="right"        app:pressedTranslationZ="12dp"        app:rippleColor="#33728dff" /></android.support.design.widget.CoordinatorLayout>

布局中一共设置了3个FAB，一个在左下角，一个在右下角，一个设置了锚点，颜色可以自己调整，简单的用法就是这个样子，对应的onClick事件在MainActivity中实现。

代码文件
MainActivity.java

package mraz.com.appbardemo;import android.annotation.TargetApi;import android.os.Build;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;public class MainActivity extends AppCompatActivity {    Toolbar toolbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);    }    @TargetApi(Build.VERSION_CODES.LOLLIPOP)    public void leftClick(View view) {        toolbar.setTitle("Left FAB onClick");    }    public void rightClick(View view) {        toolbar.setTitle("Right FAB onClick");    }    public void topClick(View view) {        toolbar.setTitle("Top FAB onClick");    }}

实际效果