Material Design 控件知識梳理(6) Snackbar

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

1、概述

Snackbar的做用和以前使用的Toast相似，都是做爲一種輕量級的用戶提示：

可是和 Toast相比，它又增長了一些額外的交互操做，今天咱們就一塊兒來學習一下有關 Snackbar的知識。

2、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在通過指定的時間以後自動隱藏

3、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

4、總結

Snackbar使用起來很簡單，它比Toast增長了更多的操做性，也是官方推薦的替換Toast的控件。

---

更多文章，歡迎訪問個人 Android 知識梳理系列：

• Android 知識梳理目錄：www.jianshu.com/p/fd82d1899…
• 我的主頁：lizejun.cn
• 我的知識總結目錄：lizejun.cn/categories/