<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");
    }
}

实际效果