概述

查看官方API

Snackbar 是 Android design support library 中的另一個(gè)組件。使用 Snackbar，可以在屏幕底部快速的顯示一條消息，大體與 Toast 相同，但多了幾分靈活性：

• 一小段時(shí)間之后、或者用戶與屏幕觸發(fā)交互，Snackbar 會(huì)自動(dòng)消失；
• 可以包含一個(gè)可選的操作；
• 把 Snackbar 劃出屏幕，可以棄用；
• 作為一條上下文敏感的消息，也是 UI 的一部分，并在屏幕內(nèi)所有元素的上層顯示，而不是像 Toast 消息一樣位于屏幕中央；
• 一個(gè)時(shí)刻只能有唯一一個(gè) Snackbar 顯示。

Snackbar使用的時(shí)候需要一個(gè)控件容器用來容納Snackbar.官方推薦使用CoordinatorLayout這個(gè)另一個(gè)Android Support Design Library庫(kù)支持的控件容納。因?yàn)槭褂眠@個(gè)控件，可以保證Snackbar可以讓用戶通過向右滑動(dòng)退出。 Activity中獲取CoordinateorLayout作為容器，然后調(diào)用Snackbar.make(container, “SnackbarTest”, Snackbar.LENGTH_LONG).show();就可以生成一個(gè)Snackbar了

---

語法規(guī)則

Snackbar.make(view, message, duration).setAction(action message, click listener).show();

方法：

• make()
• setAction()
• show()

屬性：

• make() 方法的第一個(gè)參數(shù)是一個(gè) view，snackbar 會(huì)找到一個(gè)父 view，以寄存所賦的 snackbar 值。Snackbar 會(huì)沿著 view 的樹狀路徑，找到第一個(gè)合適的布局或窗口視圖，作為父 view。
• 上文提到，持續(xù)時(shí)間屬性與 Toast 的相同，可選 LENG_SHORT 或者 LENGTH_LONG。
• 設(shè)置Action行為事件，使用的方法是public Snackbar setAction (CharSequence text, View.OnClickListener listener); Action的字體顏色默認(rèn)使用系統(tǒng)主題中的如<item name="colorAccent">#ff0000</item>
• 可以通過代碼去改變Action的字體顏色：Snackbar setActionTextColor (int color)；

舉例：

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {// Perform anything for the action selected}}).show();

此處 rootlayout 是一個(gè)帶有 FAB 的RelativeLayout ，
布局如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><android.support.design.widget.CoordinatorLayoutandroid:id="@+id/layoutRoot"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.FloatingActionButtonandroid:id="@+id/btnFloatingAction"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:src="@mipmap/ic_add_white"app:fabSize="normal"app:borderWidth="0dp"android:layout_marginBottom="@dimen/fab_margin_bottom"android:layout_marginRight="@dimen/fab_margin_right"/></android.support.design.widget.CoordinatorLayout></RelativeLayout>

點(diǎn)擊 FAB 以查看結(jié)果：

可以正常運(yùn)行，但是并不符合標(biāo)準(zhǔn)的 UX，應(yīng)該按照下圖所示，FAB 適當(dāng)上移：

同時(shí)按照文檔中描述：

在項(xiàng)目的 view 中添加 CoordinatorLayout，可以支持 snackbar 的更多特性，比如滑動(dòng)消失，和 FAB 的自動(dòng)移動(dòng)。Having a CoordinatorLayout in your view hierarchy allows Snackbar to enable certain features, such as swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

配置 Snackbar：

可以使用 setActionTextColor 和 setDuration 等選項(xiàng)，配置 snackbar：

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {// Perform anything for the action selected}}).setActionTextColor(R.color.material_blue).setDuration(4000).show();

Code

activity_snackbar.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><android.support.design.widget.CoordinatorLayoutandroid:id="@+id/layoutRoot"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.FloatingActionButtonandroid:id="@+id/btnFloatingAction"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:src="@mipmap/ic_add_white"app:fabSize="normal"app:borderWidth="0dp"android:layout_marginBottom="@dimen/fab_margin_bottom"android:layout_marginRight="@dimen/fab_margin_right"/></android.support.design.widget.CoordinatorLayout></RelativeLayout>

SnackbarAct

package demo.turing.com.materialdesignwidget.snackbar;import android.os.Bundle; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.view.View;import demo.turing.com.materialdesignwidget.R;public class SnackbarAct extends AppCompatActivity {private FloatingActionButton floatingActionButton;private CoordinatorLayout coordinatorLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_snackbar);setupUI();}public void setupUI() {coordinatorLayout = (CoordinatorLayout) findViewById(R.id.layoutRoot);floatingActionButton = (FloatingActionButton) findViewById(R.id.btnFloatingAction);floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Snackbar.make(coordinatorLayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {// Perform anything for the action selected}}).show();// TODO issue: Rotate animation in pre-lollipop works only once, issue to be resolved!/** if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {RotateAnimation rotateAnimation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);rotateAnimation.setDuration(500);rotateAnimation.setFillAfter(true);rotateAnimation.setInterpolator(new FastOutSlowInInterpolator());floatingActionButton.startAnimation(rotateAnimation);} else {floatingActionButton.clearAnimation();ViewPropertyAnimatorCompat animatorCompat = ViewCompat.animate(floatingActionButton);animatorCompat.setDuration(500);animatorCompat.setInterpolator(new FastOutSlowInInterpolator());animatorCompat.rotation(180);animatorCompat.start();}**/}});} }

效果圖：

---

英文原文：
http://www.technotalkative.com/part-2-welcome-snackbar-goodbye-toast/

---

Snackbar樣式

在這里我們將看到如何顯示不同顏色的snackbar，向用戶傳遞更多暗示信息，比如snackbar背景顯示成紅色表明這是一個(gè)警告提示。

如何為Snackbar添加背景顏色

你可以通過getView() 方法獲取Snackbar的核心視圖，然后就可以在對(duì)它采用任意顏色了。
比如：

snackbar.getView().setBackgroundColor(colorId);

下面是ColoredSnackbar類，它封裝了一些方法，可以根據(jù)用戶指定的類型顯示不同背景顏色。

public class ColoredSnackbar {private static final int red = 0xfff44336;private static final int green = 0xff4caf50;private static final int blue = 0xff2195f3;private static final int orange = 0xffffc107;private static View getSnackBarLayout(Snackbar snackbar) {if (snackbar != null) {return snackbar.getView();}return null;}private static Snackbar colorSnackBar(Snackbar snackbar, int colorId) {View snackBarView = getSnackBarLayout(snackbar);if (snackBarView != null) {snackBarView.setBackgroundColor(colorId);}return snackbar;}public static Snackbar info(Snackbar snackbar) {return colorSnackBar(snackbar, blue);}public static Snackbar warning(Snackbar snackbar) {return colorSnackBar(snackbar, orange);}public static Snackbar alert(Snackbar snackbar) {return colorSnackBar(snackbar, red);}public static Snackbar confirm(Snackbar snackbar) {return colorSnackBar(snackbar, green);} }

如何使用

Snackbar snackbar = Snackbar.make(getView(), R.string.hello_snackbar, Snackbar.LENGTH_SHORT); ColoredSnackBar.alert(snackbar).show();

這里，我使用的是fragment的getView()方法來獲得view，不過你也可以使用FrameLayout或者CoordinatorLayout。

效果圖

---

英文原文：
http://www.technotalkative.com/part-3-styling-snackbar/

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Snackbar-Android M新控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。