Material Design 系列之CardView、FAB和Snackbar

前言

更多Material Design 文章请看：
Material Design 之 Toolbar 开发实践总结
 Material Design之 AppbarLayout 开发实践总结
 Material Design 之 Behavior的使用和自定义Behavior
Material Design 之 TabLayout 使用
 Material Design 之 TextInputLayout和TextInputEditText
这是Material Design 系列的最后一篇文章，前面几篇文章讲了Material Design中一些比较重要并且常用的控件，最后这一篇文章算是一个补充，讲一下CardView、FloatActionButton 和 Snackbar。由于用法比较简单，所以就不每一个都拎出来单讲。以下分别是这三个控件的用法。

CardView(卡片)

卡片是一张带有材料属性的纸片，用作展示更多详细信息的入口点。卡片包含了一组特定的数据集，数据集含有各种相关信息，如主题照片、文本，链接等等。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。

卡片集是共面的，或者统一平面的多张卡片布局。如下：

card_collection_1.png

一张卡片包含了一组特定的数据集，考虑在以下这些情况使用卡片：

作为一个集合，比较多种数据类型，比如：图片、视频和文本。
不需要直接比较（如：用户不会直接比较图片和文本）
支持内容高度可变，比如评论。
包含响应按钮，比如＋1 按钮或者评论
要使用网格列表，但需要显示更多文本来补充图片

以上就是使用卡片的一些场景，看一个使用不当的例子(图片来自官网)：

card_wrong.png

** 错误示例：** 这种卡片的使用分散了用户的注意力，不能快速浏览，也不能忽略掉，所以将这些内容放在不同的卡片上是难以理解的。其实国内有些知名APP也没有按照规范来做，给我们做了错误的示范，如知乎日报首页：

zhihuribao.png

正确的用法如下：

card_right.png

正确示例：可快速浏览的列表，用来代替卡片，是表现没有许多操作的同类内容的合适方法。

以上就是Material Design 设计规范里给的使用卡片的一些场景和正确使用方法，更多的设计规范请看:Material Design 官网。

我们要怎么实现卡片设计呢？Google 给我们提供了CardView,并且是像下兼容的(L 以下仍然可以用)。CardView 的用法比较简单，重要的属性也就几个。其实用CardView主要实现的圆角和阴影效果。看一下CardView的属性：

app:cardBackgroundColor 设置卡片的背景色
app:cardCornerRadius 设置卡片的圆角
app:cardElevation 设置卡片的阴影
app:cardUseCompatPadding 是否添加padding
app:cardPreventCornerOverlap 在v20和v20以前的版本添加padding，防止CardView的内容和圆角相交

上面几个属性是CardView的几个常用的属性，当然也可以在代码中设置，调用CardView.setXXX就行

       mCardView = (CardView) findViewById(R.id.card_view);
        //设置背景
        mCardView.setCardBackgroundColor(getColor(R.color.colorPrimary));
        //设置圆角
        mCardView.setRadius(5);
        //设置阴影
        mCardView.setCardElevation(3);
        //设置 兼容padding 
        mCardView.setUseCompatPadding(true);
        //
        mCardView.setPreventCornerOverlap(true);

比较简单，就上面几个属性，都一一介绍了，看一些示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_margin="8dp"
    >
  <android.support.v7.widget.CardView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:cardCornerRadius="3dp"
      app:cardElevation="3dp"
      app:cardUseCompatPadding="true"
      >
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
         >
          <ImageView
              android:layout_width="match_parent"
              android:layout_height="300dp"
              android:scaleType="centerCrop"
              android:src="@drawable/meizhi"
              />
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:textSize="24sp"
              android:text="Material Design"
              android:textColor="@color/black"
              android:layout_marginTop="16dp"
              android:paddingRight="16dp"
              android:paddingLeft="16dp"
              />
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:textSize="16sp"
              android:layout_marginTop="6dp"
              android:paddingRight="16dp"
              android:paddingLeft="16dp"
              android:text=" material metaphor is the unifying theory of a rationalized space and a system of motion."
              />
          <LinearLayout
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              android:padding="16sp"
              >

              <TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:textColor="@color/orange"
                  android:textSize="24sp"
                  android:text="SHARE"
                  />
              <TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:textColor="@color/orange"
                  android:textSize="24sp"
                  android:text="EXPLORE"
                  android:layout_marginLeft="20dp"
                  />
          </LinearLayout>
     </LinearLayout>
  </android.support.v7.widget.CardView>
  <android.support.v7.widget.CardView
      android:id="@+id/card_view"
      android:layout_width="match_parent"
      android:layout_height="100dp"
      app:cardBackgroundColor="@color/DarkCyan"
      app:cardUseCompatPadding="true"
      app:cardElevation="4dp"
      app:cardCornerRadius="5dp"
      >
      <TextView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:text="Card"
          android:textColor="@color/white"
          android:textSize="20sp"
          android:gravity="center"
          />
  </android.support.v7.widget.CardView>
</LinearLayout>

效果如下：

CardView.png

CardView 点击效果
Material Design 的设计就是为了更贴近现实生活中的场景，当点击之后，是会有反馈的，可以给CardView 添加点击效果。

 android:clickable="true"
  android:foreground="?attr/selectableItemBackground"

这样点击时就会有波纹扩散效果了，增加体验。

cardView_click.gif

FloatingActionButton (浮动操作按钮)

FloatingActionButton（浮动操作按钮，以下简称FAB）适用于特定的进阶操作。它是漂浮在 UI 上的一个圆形图标，具有一些动态的效果，比如变形、弹出、位移等等。FAB有3种尺寸，默认尺寸、mini 尺寸和 auto 尺寸。

默认尺寸：适用于大多数情况
mini 尺寸：仅用于创建与其他屏幕元素视觉的连续性。
auto: 基于Window(窗口)大小变化的，当窗口大小小于470dp,会选择一个较小尺寸的button,更大一点的窗口就选择更大的button

可以通过 fabSize 来控制FAB的size。因为FAB这个类继承自ImageView,所以我们可以通过setImageDrawable() 方法来控制FAB icon 的显示。FAB 默认的背景色是colorAccent，如果你想在运行时改变它的颜色，你可以调用方法setBackgroundTintList(ColorStateList) 来改变。

介绍一下FAB的几个属性：

app:elevation 设置阴影
app:rippleColor 扩散效果的颜色
app:fabSize 设置 FAB 的 size
app：layout_anchor 设置锚点
app:useCompatPadding 兼容padding 可用

属性比较简单，前面讲Behavior 的时候提到过，FAB 和 AppbarLayout 的联动和FAB和Snackbar的Behavior 确保Snackbar 从底部弹出时，不会遮挡FAB，而会相应的上移。这2个也是FAB 常用的场景,效果如下：

FAB.gif

布局如下：

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <android.support.design.widget.AppBarLayout
      android:id="@+id/appbar_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

     <android.support.design.widget.CollapsingToolbarLayout
         android:layout_width="match_parent"
         android:layout_height="200dp"
         app:layout_scrollFlags="scroll|exitUntilCollapsed"
         >
          <ImageView
           android:layout_width="match_parent"
           android:layout_height="200dp"
           android:src="@drawable/meizhi"
           android:scaleType="centerCrop"
           app:layout_collapseMode="parallax"
           />
          <android.support.v7.widget.Toolbar
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              app:layout_collapseMode="pin"
              />
     </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="18dp"
            android:text="@string/large_text"/>

    </android.support.v4.widget.NestedScrollView>
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/ic_dialog_email"
      android:layout_marginBottom="20dp"
      android:layout_marginRight="15dp"
      android:layout_gravity="bottom|right"
      app:rippleColor="@android:color/darker_gray"
      app:elevation="3dp"
      />
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/ic_book_list"
      android:layout_marginBottom="20dp"
      android:layout_marginRight="15dp"
      app:layout_anchor="@+id/appbar_layout"
      app:layout_anchorGravity="bottom|right"
      app:elevation="5dp"
      />
</android.support.design.widget.CoordinatorLayout>

代码中改变FAB 颜色，icon等：


        fab1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(fab1,"点击fab1",Snackbar.LENGTH_LONG).show();
            }
        });

        fab1.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorPrimary)));


        fab2.setImageResource(R.drawable.ic_book_list);

        fab2.setCompatElevation(6);
    
        fab2.setSize(FloatingActionButton.SIZE_NORMAL);

还可以监听FAB的隐藏或者显示，在项目中可能会有这样的需求，当FAB隐藏或者显示之后，接下来做什么操作，监听代码如下：

 fab2.hide(new FloatingActionButton.OnVisibilityChangedListener() {
            @Override
            public void onHidden(FloatingActionButton fab) {
                Log.i(TAG,"fab hidden...");
            }
        });
        fab2.show(new FloatingActionButton.OnVisibilityChangedListener() {
            @Override
            public void onShown(FloatingActionButton fab) {
                Log.i(TAG,"fab show...");
            }
        });

可以在对应的回调方法里做接下来的操作。

Snackbar

Snackbar 是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能从屏幕上滑动关闭。

用法：
Snackbar的高度应该能容纳下所提示的文本，并且提示与操作相关，所以不应该提示长文本，Snackbar的用法与Toast非常相似。

弹出一个Toast 的代码：

Toast.makeText(FABSimpleActivity.this,"哈哈，我是Toast",Toast.LENGTH_SHORT).show();

弹出一个snackbar的代码：

 fab2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(fab2,"哈哈，我是Snackbar",Snackbar.LENGTH_SHORT).show();
            }
        });

效果如下：

snackbar.png

从上面的代码可以看出，Toast与Snackbar的调用方法非常相似，第一个参数有点区别，Toast的第一个参数是一个Context，Snackbar的第一个参数是View，但其实都是殊途同归的，Snackbar也是根据传入的View找到一个Parent View ,然后再获取Context。或许你们跟我一样很奇怪为什么要绕着么大一圈来获取这个Context，像Toast 一样直接传一个Context不行吗？答案是不行的，因为需要告诉Snackbar，让它显示在哪个容器内。Snackbar 和Toast的方式不一样，看一下源码一目了然，走读一下源码：
1，在make方法里构造了Snackbar，传入的参数是根据传的View找到的Parent View ：

 public static Snackbar make(@NonNull View view, @NonNull CharSequence text,
            @Duration int duration) {
        Snackbar snackbar = new Snackbar(findSuitableParent(view));
        snackbar.setText(text);
        snackbar.setDuration(duration);
        return snackbar;
    }

Snackbar 构造方法：


    private Snackbar(ViewGroup parent) {
        mTargetParent = parent;
        mContext = parent.getContext();

        ThemeUtils.checkAppCompatTheme(mContext);

        LayoutInflater inflater = LayoutInflater.from(mContext);
        mView = (SnackbarLayout) inflater.inflate(
                R.layout.design_layout_snackbar, mTargetParent, false);

        mAccessibilityManager = (AccessibilityManager)
                mContext.getSystemService(Context.ACCESSIBILITY_SERVICE);
    }

上面inflate 的时候用到了mTargetParent，告诉Snackbar要显示在哪个容器内。
再看一下show 的方式：

 public void show() {
        SnackbarManager.getInstance().show(mDuration, mManagerCallback);
    }

然后调用scheduleTimeoutLocked 方法：

 private void scheduleTimeoutLocked(SnackbarRecord r) {
        if (r.duration == Snackbar.LENGTH_INDEFINITE) {
            // If we're set to indefinite, we don't want to set a timeout
            return;
        }

        int durationMs = LONG_DURATION_MS;
        if (r.duration > 0) {
            durationMs = r.duration;
        } else if (r.duration == Snackbar.LENGTH_SHORT) {
            durationMs = SHORT_DURATION_MS;
        }
        mHandler.removeCallbacksAndMessages(r);
        mHandler.sendMessageDelayed(Message.obtain(mHandler, MSG_TIMEOUT, r), durationMs);
    }

最后是用Handler 发了一条消息，通知显示：


    static {
        sHandler = new Handler(Looper.getMainLooper(), new Handler.Callback() {
            @Override
            public boolean handleMessage(Message message) {
                switch (message.what) {
                    case MSG_SHOW:
                        ((Snackbar) message.obj).showView();
                        return true;
                    case MSG_DISMISS:
                        ((Snackbar) message.obj).hideView(message.arg1);
                        return true;
                }
                return false;
            }
        });
    }

看到这儿大概就明白了，最终调用的是showView（）这个方法显示：

final void showView() {
...
// 上面省略的部分主要是判断是不是CoordinatorLayout的子View，如果添加Behavior 

if (ViewCompat.isLaidOut(mView)) {
            if (shouldAnimate()) {
                // If animations are enabled, animate it in
                animateViewIn();
            } else {
                // Else if anims are disabled just call back now
                onViewShown();
            }
        } else {
            // Otherwise, add one of our layout change listeners and show it in when laid out
            mView.setOnLayoutChangeListener(new SnackbarLayout.OnLayoutChangeListener() {
                @Override
                public void onLayoutChange(View view, int left, int top, int right, int bottom) {
                    mView.setOnLayoutChangeListener(null);

                    if (shouldAnimate()) {
                        // If animations are enabled, animate it in
                        animateViewIn();
                    } else {
                        // Else if anims are disabled just call back now
                        onViewShown();
                    }
                }
            });
        }
}

以上分析了Snackbar 的创建显示过程。其实使用是很简单的，跟以前使用Toast提示差不多。

最后还有一点就是，Toast只能给个提示，而Snackbar我们还可以给他设置一个Action，当显示Snackbar的时候，我们点击Action按钮，执行相应的操作

代码：

private void showSnackbar(){
        Snackbar snackbar = Snackbar.make(fab2,"哈哈，我是Snackbar",Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FABSimpleActivity.this,"执行Undo操作",Toast.LENGTH_LONG).show();
            }
        });
        
        snackbar.setActionTextColor(getResources().getColor(R.color.DarkCyan));
        snackbar.setText("已经删除1张照片");
        snackbar.show();
    }

效果如下：

snackbar_action.gif

如上图所示，添加了一个UNDO 按钮，点击按钮之行相应操作。

最后

这个三个控件的用法比较简单，本文从它们的使用场景和原理讲了它们的基本用法，了解这些之后，可以加深印象。本文是Material Design 相关的最后一篇文章，可能还有一些零碎的东西没有讲到，还有一些像RecyclerView 这些的用法网上的博客已经很多了，有的也写得很好很详细，不打算再写。另外，Material Design 系列的Demo在这儿：MaterialDesignSamples

参考
Material Design 设计规范
 Material Design 中文版

最后编辑于：2017.12.05 05:56:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342

Material Design 系列之CardView、FAB和Snackbar

前言

CardView(卡片)

FloatingActionButton (浮动操作按钮)

Snackbar

最后

推荐阅读更多精彩内容