Material Design 控件知识梳理(6) Snackbar-CSDN博客

Material Design 控件知识梳理(1) - Android Design Support Library 是什么 Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout Material Design 控件知识梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment Material Design 控件知识梳理(4) - FloatingActionButton Material Design 控件知识梳理(5) - DrawerLayout && NavigationView Material Design 控件知识梳理(6) - Snackbar Material Design 控件知识梳理(7) - BottomNavigationBar Material Design 控件知识梳理(8) - TabLayout Material Design 控件知识梳理(9) - TextInputLayout

一、概述

Snackbar的作用和之前使用的Toast类似，都是作为一种轻量级的用户提示：

但是和 Toast相比，它又增加了一些额外的交互操作，今天我们就一起来学习一下有关 Snackbar的知识。

二、`Snackbar`的基础使用

当我们需要使用Snackbar时，首先需要调用它的make静态方法来获得一个Snackbar对象，之后我们对于Snackbar的操作都是通过这个对象：

    public void showSnackBar(View view) {
        mSnackBarRootView = Snackbar.make(mCoordinatorLayout, "MessageView", Snackbar.LENGTH_INDEFINITE);
        mSnackBarRootView.setActionTextColor(getResources().getColor(android.R.color.holo_orange_dark));
        mSnackBarRootView.setAction("ActionView", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("mSnackBarRootView", "click ActionView");
            }
        });
        mSnackBarRootView.show();
    }
复制代码

外观设置

对于Snackbar，可以分为两个区域，MessageView和ActionView，其中MessageView只支持设置文案，而ActionView不仅支持设置文案，还支持设置文案的颜色以及监听点击事件，具体的方法大家可以查阅API：

操作方式

显示Snackbar时，需要像上面一样主动调用show()方法。
隐藏Snackbar时，有以下几种操作方式：
主动调用dismiss方法
点击ActionView
从左向右滑动Snackbar
通过setDuration方法，让Snackbar在经过指定的时间之后自动隐藏

三、`Snackbar`进阶

3.1 改变`Snackbar`的外观

从上面可以看出，Snackbar对于外观的支持不够充分，比如不能定义MessageView的颜色、以及整个Snackbar的背景等等，下面，我们就来看一下如何对它的外观进行进一步的定制。源码当中对Snackbar对象的初始化分为了下面三步操作：

    public static Snackbar make(@NonNull View view, @NonNull CharSequence text,
            @Duration int duration) {
        //1.寻找Snackbar的父容器
        final ViewGroup parent = findSuitableParent(view);
        if (parent == null) {
            throw new IllegalArgumentException("No suitable parent found from the given view. "
                    + "Please provide a valid view.");
        }

        final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        //2.实例化出Snackbar的布局
        final SnackbarContentLayout content =
                (SnackbarContentLayout) inflater.inflate(
                        R.layout.design_layout_snackbar_include, parent, false);
        //3.利用父容器和Snackbar的布局，构造Snackbar对象
        final Snackbar snackbar = new Snackbar(parent, content, content);
        snackbar.setText(text);
        snackbar.setDuration(duration);
        return snackbar;
    }
复制代码

通过查看布局，可以发现SnackbarContentLayout就是包含了MessageView和ActionView的父容器，也就是例子当中的黑色背景：

那么有没有什么办法能够获得这个 SnackbarContentLayout呢，我们看一下 Snackbar的构造函数：

protected BaseTransientBottomBar(@NonNull ViewGroup parent, 
    @NonNull View content, 
    @NonNull ContentViewCallback contentViewCallback) {
        //这个是我们传入的mCoordinatorLayout.
        mTargetParent = parent;
        //mView是mCoordinatorLayout的子View，同时又是SnackbarContentLayout的父容器
        mView = (SnackbarBaseLayout) inflater.inflate(
                R.layout.design_layout_snackbar, mTargetParent, false);
        mView.addView(content);
    }
复制代码

而Snackbar提供了getView方法来得到mView对象，也就是布局中的Snackbar$SnackbarLayout：

public View getView() {
    return mView;
}
复制代码

那么整个逻辑就很清楚了，我们可以通过通过mView获得SnackbarContentLayout，然后进行一系列的定制：

改变Snackbar的背景：

private void changeSnackBarBackgroundColor(Snackbar snackbar) {
    View view = snackbar.getView();
    view.setBackgroundColor(getResources().getColor(android.R.color.holo_purple));
}
复制代码

改变MessageView字体的颜色和大小：

    private void changeSnackBarMessageViewTextColor(Snackbar snackbar) {
        ViewGroup viewGroup = (ViewGroup) snackbar.getView();
        SnackbarContentLayout contentLayout = (SnackbarContentLayout) viewGroup.getChildAt(0);
        TextView textView = (TextView) contentLayout.getChildAt(0);
        textView.setTextColor(getResources().getColor(android.R.color.darker_gray));
    }
复制代码

3.2 `Snackbar`弹出位置分析

Snackbar会弹出在父容器的底部，也就是上面findSuitableParent的过程，我们来分析一下这一寻找的过程，就可以知道Snackbar弹出的位置：

    private static ViewGroup findSuitableParent(View view) {
        ViewGroup fallback = null;
        do {
            if (view instanceof CoordinatorLayout) {
                // We've found a CoordinatorLayout, use it
                return (ViewGroup) view;
            } else if (view instanceof FrameLayout) {
                if (view.getId() == android.R.id.content) {
                    // If we've hit the decor content view, then we didn't find a CoL in the
                    // hierarchy, so use it.
                    return (ViewGroup) view;
                } else {
                    // It's not the content view but we'll use it as our fallback
                    fallback = (ViewGroup) view;
                }
            }

            if (view != null) {
                // Else, we will loop and crawl up the view hierarchy and try to find a parent
                final ViewParent parent = view.getParent();
                view = parent instanceof View ? (View) parent : null;
            }
        } while (view != null);

        // If we reach here then we didn't find a CoL or a suitable content view so we'll fallback
        return fallback;
    }
复制代码

它其实是从我们在make方法中传入的View作为起点，沿着整个View树向上寻找，如果发现是CoordinatorLayout或者到达了R.id.content，那么就停止寻找，否则将一直到达View树的根节点为止，所以，如果我们的CoordinatorLayout不是全屏的话，那么Snackbar有可能不是弹出在整个屏幕的底部，例如下面这样，我们给Snackbar添加了一个marginBottom：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="200dp"
    tools:context="com.demo.lizejun.repotransition.SnackBarActivity">
    <TextView
        android:id="@+id/show_snack_bar"
        android:text="showSnackBar"
        android:layout_width="match_parent"
        android:layout_height="66dp"
        android:gravity="center"
        android:layout_margin="5dp"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_orange_dark"
        android:onClick="showSnackBar"/>
</android.support.design.widget.CoordinatorLayout>
复制代码

那么弹出的效果为：

3.3 `Snackbar`和`FloatingActionButton`的结合

当Snackbar弹出的时候，有可能会遮挡底部的FloatingActionButton，此时就需要在make方法中传入CoordinatorLayout，让Snackbar弹出的时候，让Fab上移一定的高度，可以参考之前的这篇文章：MD控件 - FloatingActionButton