Android 悬浮按钮之实现兔兔按钮示例

前言

安卓的Material库提供了许多样式更精美的控件，其中就有悬浮控件，它表现出一种悬浮在页面的效果，也就是有立体效果的，让人产生这种控件是另一个维度而不是这个维度的感觉，下面我们就来看看兔兔按钮。

实现过程

首先我们在布局中加上我们的FloatingActionButton控件：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/rabbit_logo" />

这样预览页面就会出现一个悬浮的圆形按钮，上面是我们的兔兔图案，而且这个控件是出现在屏幕的右下角，接着我们为其增加点击效果：

binding.fab.setOnClickListener { 
    "FAB Rabbit!".showToast(context)
}

其中Toast用到了我们之前文章中的简化方法（安卓开发基础——简化Toast调用方法）

运行程序后，我们就可以点击这个兔兔按钮，浮现一句"FAB Rabbit!"的提示。

写的过程很简单，因为其实它的本质还是Button，不过是对其样式进行了不同的改变，有了质感和阴影，使其呈现出浮现的效果。

当然，我们也可以去改变阴影效果的呈现程度：

app:elevation="8dp"

我们在XML布局中该控件控制elevation属性，就能为FloatingActionButton指定一个高度，其中，高度值越大，投影范围越大，但投影效果越淡，而高度越小，投影范围越小，反而投影效果越浓。

总结

Material库的确让安卓很多控件效果不一样，但在我们工作设计中还是很少去用它的，因为它的独特效果在公司自己的UI设计师与产品眼中说不定最终还不如和IOS一致好。