FC 12.4.1 关于悬浮按钮FloaActionButton（SnackBar、CoordinatorLayout）

FloatingActionButton也是Design Support 库中的一个控件，来实现悬浮按钮的效果。还可以给这个按钮指定图标，表示来做什么。

使用FloatingActionButton

提前准备好一个ic_done.png【素材地址：点我】

修改activity_main.xml

• 在主屏幕中加入了一个FloatingActionButton
• 通过layout_gravity将FloatingActionButton位置设置在右下角（end的作用和start的作用相同，如果系统语言是从左往右的，那么end表示在右边，反之则在左边）
• 通过src设置图标
• 通过layout_margin设置边距
• 通过app:elevation设置投影高度（默认即可，不用可以的来写）（高度设置越高，则投影范围越大，投影效果越淡；高度设置越低，投影范围越小，投影效果越浓）

<?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:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_margin="16dp"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>
    </android.support.design.widget.CoordinatorLayout>
    ...
</android.support.v4.widget.DrawerLayout>

修改MainActivity（添加处理点击事件）

只需要修改oncreat方法

FloatingActionButton和button类似，调用OnClickListener方法来实现点击效果

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ...

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

效果如图

   

使用SnackBar

Design Support 库提供的更加先进的提示工具——Snackbar。

Toast作用是告诉用户发生了什么事情，但同时用户只能被动接收这个事情，没有办法让用户原则。 
Snackbar提示加入一个可交互按钮，当用户点击可以执行一些额外的操作。

修改MainActivity中的代码如下：

• Snackbar.make()方法来创建一个Snackbar对象，
• 其中第一个参数是view，只要是当前界面布局的任意一个view都可以，Snackbar会使用这个view来自动查找最外层的布局用于展示Snackbar
• 第二个参数就是Snackbar中显示的内容
• 第三个参数是Snackbar显示的时长（和Toast类似）
• 接着调用的setAction方法来设置一个动作，从而使Snackbar可以和用户交互，这里我们只弹出Toast
• 最后调用show方法让Snackbar显示出来

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ...

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Snackbar.make(v, "Data Deleted", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "", Toast.LENGTH_SHORT).show();
                }
            }).show();
        }
    });
}

效果如图

然而Snakebar将我们的悬浮按钮遮挡了。这是一个bug，影响用户体验。解决办法借助CoordinatorLaoyout轻松解决。

使用CoordinatorLaoyout

CoordinatorLaoyout是一个加强版的FrameLayout。它也是Design Support 库提供的。它可以监听所有子控件的各种事情，自动帮助我们做出合理的响应。（比如上边的Snakebar讲悬浮按钮挡住了，使用CoordinatorLaoyout之后悬浮按钮会自动的上偏移）

在这里，只需要CoordinatorLaoyout来替换我们的FrameLayout

<?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:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_margin="16dp"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>
    </android.support.design.widget.CoordinatorLayout>
    ...
</android.support.v4.widget.DrawerLayout>

效果如图