前言

​ 本文是对《Android第一行代码》第十二章《最佳UI体验——Material Design实战》中关于悬浮按钮实现的学习和记录，主要内容包括——

FloatingActionButton控件

Snackbar控件

CoordinatorLayout布局

其实关于悬浮按钮的实现十分简单，Design Support库中做了大量的封装，只需要运用以上3个基础控件就可以完成一个最简单的悬浮球样式了。实际上，目前关于Android悬浮球的实现方案挺多的，网上可以找到很多酷炫的悬浮球实现方式。

悬浮按钮

立面设计是Material Design设计中一个非常重要的思想，在官方的示例中，最简单且具有代表性的立面设计就是悬浮按钮了。本节是对悬浮按钮以及其交互提示的学习和总结。

FloatingActionButton控件

FloatingActionButton可以直接实现一个悬浮球的效果，我们修改activity_main.xml中的代码，如下：

...

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/toolbar"

android:background="?attr/colorPrimary"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

android:popupTheme="@style/ThemeOverlay.AppCompat.Light">

androidx.appcompat.widget.Toolbar>

android:id="@+id/fab"

android:layout_gravity="end|bottom"

android:layout_margin="16dp"

android:src="@drawable/ic_done"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

FrameLayout>

...

androidx.drawerlayout.widget.DrawerLayout>

为了更好的显示效果，使用src属性给悬浮球添加一个图标，具体效果如下：

可以观察到，这个悬浮球周围有一定阴影效果，以及点击的时候会有一些动态效果，这是FloatingActionButton自带的属性。但这个悬浮球什么都做不了，我们还需要一个Snackbar来实现相关操作。

Snackbar控件

Snackbar与Toast十分类似，不同的是，Toast只能向用户传递信息，Snackbar是一个可交互的控件。我们在MainActivity.java中添加代码：

public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

...

FloatingActionButton fab = findViewById(R.id.fab);

fab.setOnClickListener(v->{

Snackbar.make(v,"Add data.", Snackbar.LENGTH_SHORT)

.setAction("Undo", w->{

Toast.makeText(MainActivity.this, "undo add data", Toast.LENGTH_SHORT).show();

}).show();

});

}

...

}

在FloatingActionButton控件中添加一个Snakbar控件，然后通过setAction方法实现具体的操作，该方法声明如下——

public Snackbar setAction(CharSequence text, final OnClickListener listener)

其中，text是文本内容，listenter对应点击事件。

最终实现效果如下：

显然这种效果并不完美，弹出的Undo操作遮挡了悬浮球，这不是我们想要的，好在Design Support库提供了一种叫做CoordinatorLayout的布局解决了这个问题。

CoordinatorLayout布局

CoordinatorLayout与FrameLayout十分类似，甚至可以看做是一个加强版的FrameLayout，它既是Design Support提供的一种布局，那必然也能与其他Design控件相得益彰，不妨来看activity_main文件——

androidx.appcompat.widget.Toolbar>

androidx.coordinatorlayout.widget.CoordinatorLayout>

.../>

androidx.drawerlayout.widget.DrawerLayout>

由于这里只将FrameLayout改成了CoordinatorLayout，因此中间的代码略去，效果如下：

终于不那么违和了。

本文Demo的完整源代码：https://github.com/zzuljs/MaterialDesign