Material Design实战之悬浮按钮和可交互提示

Material Design实战之ToolBar
Material Design实战之滑动菜单

1. FloatingActionButton

FloatingActionButton是Design Support库中提供的一个控件，这个控件可以帮助我们轻松的实现悬浮按钮的效果。它默认会使用colorAccent来作为按钮的颜色，还可以通过给按钮指定一个图标来表明这个按钮的作用是什么。
下面开始具体实现。首先准备好一个图标，这里我放置了一张ic_done.png到drawable目录下。然后修改activity_main.xml中的代码，如下所示：

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

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

        <android.support.v7.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" />
        <android.support.design.widget.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>
    ...
</android.support.v4.widget.DrawerLayout>

可以看到，我们在主屏幕布局中加入了一个FloatingActionButton，layout_gravity属性将这个控件放置于屏幕的右下角。

既然是悬浮，就会有阴影，我们可以通过app:elevation属性来给FloatingActionButton指定一个高度值，高度值越大，投影范围也越大，但是投影效果越淡，高度值越小，投影范围越小，但是投影效果越弄。当然这些效果的差异其实都不怎么明显，个人感觉使用FloatingActionButton的默认效果就足够了。

接下来我们看一下FloatingActionButton是如何处理点击事件的，修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show();
            }
        });   
    }
    ...
}

现在运行一下程序，点击FloatingActionButton按钮，效果如图所示：

Screenshot_1483517367.png

2. SnackBar

在前面处理FloatingActionButton点击事件的时候，仍然是使用Toast来作为提示工具，本小节我们就来学习一个Design Support库提供的 更加先进的提示工具—SnackBar。

首先要明确，SnackBar并不是Toast的替代品，他们两者之间有着不同的应用场景。Toast的作用是告诉用户现在发生了什么事情，但用户只能被动接收这个通知，而SnackBar则在这方面进行了扩展，它允许在提示中加入一个可交互按钮，当用户点击按钮的时候可以执行一些额外的逻辑操作。

SnackBar的用法也非常简单，它和Toast是基本相似的，只不过可以额外增加一个按钮的点击事件。修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"确定要删除数据？",Snackbar.LENGTH_LONG)
                        .setAction("取消", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Toast.makeText(MainActivity.this, "删除失败！", Toast.LENGTH_SHORT).show();
                            }
                        }).show();

            }
        });
    }
    ...
}

可以看到，这里调用了SnackBar的make()方法来创建一个SnackBar对象，make()方法的第一个参数需要传入一个View，只要是当前界面布局的任意一个View都可以，SnackBar会使用这个View来自动查找最外层的布局，用于展示SnackBar。第二个参数就是SnackBar中显示的内容，第三个参数是SnackBar显示的时长，接着又调用了一个setAction()方法来设置一个动作，从而让SnackBar不仅仅是一个提示，而是可以和用户进行交互的。，最后调用show()方法显示SnackBar。
现在重新运行一下程序，并点击悬浮按钮，效果如图所示：

Screenshot_1483520412.png

可以看到，SnackBar从屏幕底部出现了，但是这里有个bug，这个SnackBar竟然将我们的FloatingActionButton给遮挡住了，有没有什么办法能解决一下呢？当然有，只需借助CoordinatorLayout就可以轻松解决。

3. CoordinatorLayout

CoordinatorLayout可以说是一个加强版的FrameLayout,这个布局也是有Design Support库提供的。它在普通情况下的作用和FrameLayout基本一致，不过既然是Design Support库中提供的布局，就必然有一些Material Design魔力了。

事实上，CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮助我们做出最为合理的响应。举个简单的例子，刚才弹出的SnackBar提示将FloatingActionButton按钮遮挡住了，而如果我们能让CoordinatorLayout监听到SnackBar的弹出事件，那么它会自动将内部的FloatingActionButton向上偏移，从而确保不会被SnackBar遮挡到。

至于CoordinatorLayout的使用也非常简单，我们只需将原来的FrameLayout替换一下就可以了。修改activity_main.xml中的代码，如下所示：

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

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.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" />
        <android.support.design.widget.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"/>

    </android.support.design.widget.CoordinatorLayout>
    ...

</android.support.v4.widget.DrawerLayout>

现在重新运行一下程序，并点击悬浮按钮，效果如图所示：

Screenshot_1483521514.png

可以看到，悬浮按钮自动向上偏移了SnackBar的高度，从而确保不会被遮挡住，当SnackBar消失时，悬浮按钮会自动向下偏移回到原来的位置。

OK，本次实战就到这里，接下来我们要学习卡片式布局效果。