(一) 学习 Material Design 控件之 Snackbar

Android 5.0 (API 级别 21)开始提供 Material Design。其中新增了许多新的 Material 控件。我想经过自己的学习，将心得写出来分享给大家。

本篇是 Material Design 控件的第一篇，所以先说说如何才能使用 Google 所提供的 【Design Support Library】。

添加依赖：

参照官方的 【Design Support Library】 的说明。在项目的 build.gradle 文件里添加支持库 design 的依赖。

compile 'com.android.support:design:25.4.0'

需要注意的是支持库所支持的最低版本是 Android 2.1 （API 级别7）。

Snackbar

SnackBar 通过在底部展示简洁的信息，为一个操作提供轻量级的反馈，在 Snackbar 中还可以包含一个操作，在同一时间内，仅且只能显示一个 Snackbar。它的显示依赖一个父容器，这是它与 Toast 可以脱离应用显示的最大的不同点。具体差异是在他的第一个参数不是 Context 而是传入它所依附的父容器，当然，它比 Toast 更加强大。

以下是 SnackBar 的官方描述：

You can use a Snackbar to display a brief message to the user. The message automatically goes away after a short period. A Snackbar is ideal for brief messages that the user doesn’t necessarily need to act on. For example, an email app could use a Snackbar to tell the user that the app successfully sent an email.

注意：

Make sure to set an android:id tag for your CoordinatorLayout. You need the layout’s ID when you display the message.

大意是如果要创建一个 SnackBar ，那最好给 CoordinatorLayout 设置一个ID，为什么？下面会提到。

接下来就看一个 SnackBar 的 Demo 。

创建一个SnackBar

用法超级简单：

Snackbar.make(mCoordinatorLayout, "Hello,SnackBar!!", Snackbar.LENGTH_SHORT).setAction("点我", new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          Toast.makeText(SnackBarSampleActivity.this, "我也可以响应事件哦~", Toast.LENGTH_SHORT).show();

      }
}).setActionTextColor(Color.RED).show();

• make() 函数有三个参数：

  container：上文提到过，你需要传给 Snakebar 一个父容器。
  text：显示在 Snackbar 上的文字，可以是字符串资源ID，也可以是字符串。
  duration：消息显示的持续时间。

• setAction() 可以在 Snackbar 的右边区域增加一个 action。

• show() 函数把构造好的 Snackbar 显示给用户。

先看看效果：

再看看添加了动作事件的

官方建议使用 CoordinatorLayout 作为其父容器会得到更好的显示效果。CoordinatorLayout 将在后续的文章中详细介绍，它有下列一些效果：

• 用户可以向左将 SnackBar 滑走。
• 如果我们使用 FloatingActionButton ，当 SnackBar 出现的时候，CoordinatorLayout 会根据设置将 FloatingActionButton 向上浮动，而不是覆盖它。

Xml：

<?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"
    android:id="@+id/clRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:background="@android:color/holo_orange_light"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:layout_anchor="@id/rv"
        app:layout_anchorGravity="bottom|right"
        app:layout_behavior="com.smartni.userinterface.sample.FloatingActionButton.ScrollAwareFABBehavior"/>
</android.support.design.widget.CoordinatorLayout>

其中 CoordinatorLayout 是可以配合 FloatingActionButton 来达到浮动的效果的，layout_anchor 用来指定参照物， layout_anchorGravity 用来指定相对于参照物的位置。bottom|right|end 就是相对于参照物的右下方。layout_behavior 在讲到 CoordinatorLayout 的时候再详细说。

这里，app:layout_anchor="@id/rvContent"将 FloatingActionButton 与 RecyclerView 相关联了，当 SnackBar 出现的时候，CoordinatorLayout 布局就会规则协调他们之间的关系。这个例子就是让 FloatingActionButton 浮动起来了。

谢谢阅读，我会更加努力学习和总结的。：）