Android Design Support之Snackbar实战

参考：

https://developer.android.com/training/snackbar/index.html

https://android-developers.blogspot.com/2015/05/android-design-support-library.html

1、简介

这次我们来讲一下Android Design Support当中的一个组件：Snackbar。

一个Snackbar提供一个快速弹出的消息给用户。当Snackbar弹出的时候，当然的Activity仍然是可见并且是可交互的。一段时间后Snackbar会自动消失。

Snackbar和Toast的区别：

1、Snackbar和Toast类似，都是弹出一个消息

2、但是Snackbar是显示在屏幕的底部，包含文本以及允许用户对消息做出响应。

3、在Snackbar消失之前允许用户手动滑动Snackbar让其消失。

4、Snackbar被推崇使用。

如下所示：当点击FloatingActionButton的时候，底部弹出的消息就是Snackbar，过一段时间会自动消失。

2、使用

1、创建一个Snackbar对象：

Snackbar mySnackbar = Snackbar.make(viewId, stringId, duration);

Snackbar必须依附于一个View，上面的viweId就是View所对应的ID。

stringId代表显示的字符串ID，当然你也可以直接给字符串。

durarion代表持续时间，这个和Toast是一样的。

2、把创建的Snackbar显示出来：

mySnackbar.show();

3、但是如果我们把Snackbar依附于一个android.support.design.widget.CoordinatorLayout，将具有以下效果：

（1）用户可以通过左右滑动Snackbar让其消失。

（2）当Snackbar弹出的时候，布局中的其他UI元素会往上移。比如，界面当中有一个FloatingActionButton，当Snackbar弹出的时候，这个FloatingActionButton会往上移动，就不会被消息覆盖。

4、CoordinatorLayout使用方式如下：

（1）如果你的布局使用的是FrameLayout，那么直接把FrameLayout替换成CoordinatorLayout即可。

（2）如果你使用其他类型的布局，最简单的方式就是把这个布局包裹在CoordinatorLayout里面即可，如下所示：

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.easyliu.demo.snackbardemo.MainActivity">
        <!-- …Toolbar, other layouts, other elements… -->
    </RelativeLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_demo1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:elevation="4dp"
        app:backgroundTint="#00ff00"
        app:fabSize="normal"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#33728dff"
        app:useCompatPadding="true" />
</android.support.design.widget.CoordinatorLayout>

注意此时FloatingActionButton必须是CoordinatorLayout的直接子元素，当Snackbar依附于CoordinatorLayout弹出的时候，FloatingActionButton才会往上移动！

（3）Snackbar弹出的代码如下：

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.fab_demo1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(MainActivity.this.findViewById(R.id.myCoordinatorLayout), "show a message", Snackbar.LENGTH_SHORT).show();
            }
        });
    }

这样就达到了当Snackbar弹出的时候，FloatingActionButton自动往上移动的效果，如前面的图所示。

当然，关于CoordinatorLayout，后续还会接着讲。

5、我们还可以对消息做出响应

通过给Snackbar设置一个Action，如下所示。可以设置Action的信息，会显示的Snackbar的右边，然后还可以设置一个onClikListener，然后执行相应的操作。

 Snackbar.make(MainActivity.this.findViewById(R.id.myCoordinatorLayout), "show a message", Snackbar.LENGTH_SHORT)
                        .setAction("undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {

                    }
                }).show();

以上就是整个Snackbar的使用过程！