FloatActionButton 使用

FloatActionButton (简称 FAB) 是负责显示界面基本操作的圆形按钮，其提供的最好是高频率的操作。

使用

FloatActionButton 继承自 ImageView，具备 ImageView 的全部属性。

xml 布局代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="40dp"
        android:text="anchor"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/tv"
        app:layout_anchorGravity="end|bottom"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        app:backgroundTint="#303F9F"
        app:rippleColor="#FFFF00"
        app:fabSize="normal"
        />
</android.support.design.widget.CoordinatorLayout>

属性	作用
android:src	FAB中显示的图标
app:layout_anchor	设置 FAB 的锚点，即以该控件为参考
app:layout_anchorGravity	FAB 相对锚点的位置
app:elevation	正常的阴影大小
app:pressedTranslationZ	按下时的阴影大小
app:backgroundTint	正常的背景颜色，默认是 @color/colorAccent的颜色
app:rippleColor	按下时的背景颜色
app:fabSize	FAB的大小，normal或mini（分别对应56dp和40dp）

注意

1. 想让 FAB 显示点击后的颜色和阴影效果，需要设置 onClick 事件。
2. app:layout_anchor 其父布局需要是 CoordinatorLayout，否则没有效果。参考
   的的锚点，不能是父布局，否则会报错。

java.lang.IllegalStateException: View can not be anchored to the the parent CoordinatorLayout

java 代码

    floatingActionButton = findViewById(R.id.fab);
    coordinatorLayout = findViewById(R.id.coordinatorLayout);
    floatingActionButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(coordinatorLayout, "普通的Snackbar", Snackbar.LENGTH_LONG).show();
        }
    });

实现效果

1547185182832.gif