Android第一行代码——快速入门 Kotlin 编程（12.4 悬浮按钮和可交互提示）

目录

12.4        悬浮按钮和可交互提示

12.4.1        FloatingActivityButton

12.4.2        Snackbar

12.4.3        CoordinatorLayout

---

12.4        悬浮按钮和可交互提示

        立面设计是 Material Design 中一条非常重要的设计思想，也就是说，按照 Material Design 的理念，应用程序的界面不仅仅是一个平面，而应该是有立体效果的。在官方给出的示例中，最 简单且最具代表性的立面设计就是悬浮按钮了，这种按钮不属于主界面平面的一部分，而是位于另外一个维度的，因此就会给人一种悬浮的感觉。

        本节中我们会对这个悬浮按钮的效果进行学习，另外还会学习一种可交互式的提示工具。关于提示工具，我们之前一直使用的是 Toast ，但是 Toast 只能用于告知用户某事已经发生了，用户 却不能对此做出任何的响应，那么今天我们就将在这一方面进行扩展。

12.4.1        FloatingActivityButton

        FloatingActionButton 是 Material 库中提供的一个控件，这个控件可以帮助我们比较轻松地实 现悬浮按钮的效果。其实在之前的 图12.2 中，我们就已经预览过悬浮按钮的样子了，它默认会使用 colorAccent 作为按钮的颜色，我们还可以通过给按钮指定一个图标来表明这个按钮的作用是什么。

        下面开始具体实现。首先仍然需要提前准备好一个图标，这里我放置了一张 ic_done.png 到 drawable-xxhdpi 目录下。然后修改 activity_main.xml 中的代码，如下所示：

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <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/ic_done"/>

    </FrameLayout>
    ...
</androidx.drawerlayout.widget.DrawerLayout>

        可以看到，这里我们在主屏幕布局中加入了一个 FloatingActionButton 。这个控件的用法并没 有什么特别的地方，layout_width 和l ayout_height 属性都指定成 wrap_content， layout_gravity 属性指定将这个控件放置于屏幕的右下角。其中 end 的