FloatingActionButton

漆雕育

2023-12-01

FloatingActionButton 只是一个扩展于 ImageView 的 view。

添加 Android design support library

首先，在 gradle 文件中添加如下一行以添加 Android support library：

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

Step 1

在 xml 布局文件中添加 FloatingActionButton。此处假设以下已经在布局文件的开头声明过。

xmlns:app="http://schemas.android.com/apk/res-auto"

属性介绍

开发者文档中关于 FAB 的部分只包含 FAB 大小属性介绍，以下是其它一些可用属性：

FAB 默认使用应用主题中设置的浮起色作为按键背景。你可以使用 app:backgroundTint 属性，或者调用 setBackgroundTintList (ColorStateList tint) 方法改变 FAB 背景色；
如上文中提到的，可以使用 app:fabSize 属性选择普通大小或者迷你大小；
使用 android:src 改变 FAB 对应的 drawable；
使用 app:rippleColor 设置 FAB 按下时的波纹效果；
使用 app:borderWidth 设置 FAB 边框宽度；
使用 app:elevation 设置闲置状态下 FAB 的景深（默认是 6dp）；
使用 app:pressedTranslationZ 设置 FAB 按下时的景深（默认是 12dp）。
使用 app:fabSize 设置FAB大小 normal普通（56dp）mini迷你（40dp）
使用app:backgroundTint设置背景颜色

Step 2

FAB使用

<android.support.design.widget.FloatingActionButton
    android:id="@+id/btnFloatingAction"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:src="@drawable/ic_plus"
    app:fabSize="normal"
    app:rippleColor="@android:color/background_dark"/>

采用与 ImageView 或 Button 相同的方法，为 FAB 添加点击事件。

FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction);
btnFab.setOnClickListener(new View.OnClickListener() {
 
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show();
    }
});

Android 4.4 和 5.0 中边缘显示

很容易看出，Lollipop 中存在边缘显示的问题。为了解决此问题，API21+ 的版本统一定义底部与右边缘空白为 16dp，Lollipop 以下版本统一设置为 0dp.

values/dimens.xml

<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>

values-v21/dimens.xml

<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>

布局文件的 FAB 中，也设置相应的值。

<android.support.design.widget.FloatingActionButton
    ...
    ...
    android:layout_marginBottom="@dimen/fab_margin_bottom"
    android:layout_marginRight="@dimen/fab_margin_right"/>

Issues 2: Android 5.0 中阴影显示

再看一遍上面的截图，会发现 Kitkat 中有阴影显示，而 Lollipop 中并没有。在 Lollipop 上，可以直接在 FAB 中设置：

木有阴影

记得设置app:borderWidth="0dp"。

按上述设置后，阴影出现了，但是竟然有矩形的边界（未设置margin时，可以看出）

需要设置一个margin的值。在5.0之前，会默认就有一个外边距（不过并非是margin，只是效果相同）。

so，良好的实践是：

添加属性app:borderWidth="0dp"
对于5.x设置一个合理的margin

FloatingActionButton