Snackbar

Dialog和Toast靠益,我們?cè)谌粘5拈_發(fā)中一定非常熟悉,常常被用來(lái)作為Android應(yīng)用內(nèi)提示性信息的兩種展示方式偏塞。然而Google在Design包中又提供了一種新的選擇睬魂,那就是Snackbar。今天主 要介紹Snackbar新控件的使用贞盯,以及三種提示信息展示方式的比較。

一沪饺、什么是Snackbar

Snackbar 是 Android 5.0 新特性——Material Design 中的一個(gè)控件躏敢,用來(lái)代替 Toast ,Snackbar與Toast的主要區(qū)別是:Snackbar可以滑動(dòng)退出整葡,也可以處理用戶交互(點(diǎn)擊)事件件余。

二、Snackbar的特性

  1. Snackbar會(huì)在超時(shí)或者用戶在屏幕其他地方觸摸之后自動(dòng)消失遭居;

  2. 可以在屏幕上滑動(dòng)關(guān)閉啼器;

  3. 出現(xiàn)時(shí)不會(huì)阻礙用戶在屏幕上的輸入

  4. 屏幕上同時(shí)最多只能顯示一個(gè)Snackbar

  5. 如果在屏幕上有一個(gè)Snackbar的情況下再顯示一個(gè)Snackbar,則先將當(dāng)前顯示的Snackbar隱藏后再顯示新的Snackbar

  6. 可以在Snackbar中添加一個(gè)按鈕俱萍,處理用戶點(diǎn)擊事件

  7. Snackbar一般需要CoordinatorLayout來(lái)作為父容器端壳,CoordinatorLayout保證Snackbar可以右滑退出

三、Snackbar的使用

通過上文的介紹枪蘑,我們對(duì)Snackbar的含義和功能有了基本了解损谦,接下來(lái)通過代碼來(lái)詳細(xì)介紹Snackbar的使用。

使用MD控件岳颇,首先要在gradle文件中導(dǎo)入依賴照捡,本文中使用的依賴包如下:implementation 'com.android.support:design:25.3.0'

彈出Snackbar,彈出Snackbar的方式和Toast方式相似话侧,通過調(diào)用Snackbar類中的靜態(tài)方法make()設(shè)置相關(guān)信息栗精,show()方法彈窗Snackbar

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

1.make()實(shí)現(xiàn)簡(jiǎn)單彈出

make() 方法的第一個(gè)參數(shù)是一個(gè) view,snackbar 會(huì)找到一個(gè)父 view瞻鹏,以寄存所賦的 snackbar 值悲立。Snackbar 會(huì)沿著 view 的樹狀路徑鹿寨,找到第一個(gè)合適的布局或窗口視圖,作為父 view级历。一般是一個(gè)CoordinatorLayout對(duì)象释移。

第二個(gè)參數(shù)是Snackbar中想要顯示的內(nèi)容,一般只能顯示2行寥殖;

第三個(gè)參數(shù)是Snackbar想要顯示的時(shí)間長(zhǎng)短玩讳,有三個(gè)值:LENGTH_INDEFINITE 永遠(yuǎn)顯示、LENGTH_LONG顯示較長(zhǎng)時(shí)間嚼贡、LENGTH_SHORT 顯示較短時(shí)間熏纯;

Snackbar也要像Toast一樣,調(diào)用show()方法才能顯示粤策。

案例分析

首先樟澜,我們創(chuàng)建一個(gè)Activity,在布局文件中添加CoordinatorLayout控件叮盘,并創(chuàng)建一個(gè)FloatingActionButton秩贰,用于測(cè)試FloatingActionButton結(jié)合Snackbar的展示效果。布局文件如下:


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ease.wawaandroid.testdemo.SnackbarActivity">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/snackbar_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/snackbar_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            app:borderWidth="0dp"
            app:fabSize="normal" />

    </android.support.design.widget.CoordinatorLayout>

</android.support.constraint.ConstraintLayout>

在Activity中對(duì)控件進(jìn)行初始化柔吼,并監(jiān)聽FloatingActionButton的點(diǎn)擊事件毒费,實(shí)現(xiàn)點(diǎn)擊FloatingActionButton,彈出Snackbar愈魏,Activity的代碼如下:

public class SnackbarActivity extends AppCompatActivity implements View.OnClickListener {
    private CoordinatorLayout coordinatorLayout;
    private FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_snackbar);

        initView();
    }

    private void initView() {
        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.snackbar_container);
        fab = (FloatingActionButton) findViewById(R.id.snackbar_fab);

        fab.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.snackbar_fab:
                Snackbar.make(coordinatorLayout, "這是一個(gè)snackbar", Snackbar.LENGTH_SHORT).show();
                break;
        }
    }
}

執(zhí)行上述代碼觅玻,顯示效果為:

image

注意:mark()方法的第一個(gè)參數(shù)一定要是coordinatorLayout,否則培漏,彈出的Snackbar將覆蓋FloatingActionButton控件溪厘。

到這里就基本實(shí)現(xiàn)了Snackbar的簡(jiǎn)單彈出,但是牌柄,目前的效果和我們之前的Toast沒什么大的區(qū)別畸悬,同時(shí)發(fā)現(xiàn)案例中,我們并沒有調(diào)用Snackbar的setAction()方法珊佣。接下來(lái)傻昙,我們將開始介紹Snackbar的另一個(gè)重要方法setAction()。

2.setAction()添加按鈕

除了顯示之外彩扔,Snackbar中還可以有一個(gè)按鈕妆档,我們稱之為Action,它顯示在Snackbar的右邊虫碉,可以通過Snackbar對(duì)象的setAction()方法設(shè)置贾惦,修改上文中FloatingActionButton控件點(diǎn)擊事件的處理邏輯:

case R.id.snackbar_fab:
                Snackbar.make(coordinatorLayout, "這是一個(gè)snackbar", Snackbar.LENGTH_SHORT)
                        .setAction("action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Snackbar.make(coordinatorLayout, "Action 被點(diǎn)擊", Snackbar.LENGTH_SHORT).show();
                            }
                        })
                        .show();
                break;

添加setAction()方法,該方法有兩個(gè)參數(shù),第一個(gè)參數(shù)是按鈕的名稱须板,第二個(gè)參數(shù)是按鈕點(diǎn)擊事件的監(jiān)聽方法碰镜。顯示效果如下:

3.顯示隱藏監(jiān)聽

在Snackbar彈出和消失時(shí),都會(huì)觸發(fā)一個(gè)回調(diào)事件习瑰,我們可以通過Snackbar對(duì)象的addCallback()方法(setCallback()方法已經(jīng)過時(shí))捕獲它們:

Snackbar.make(coordinatorLayout, "這是一個(gè)snackbar", Snackbar.LENGTH_SHORT)
                        .setAction("action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Snackbar.make(coordinatorLayout, "Action 被點(diǎn)擊", Snackbar.LENGTH_SHORT).show();
                            }
                        })
                        .addCallback(new Snackbar.Callback(){
                            @Override
                            public void onDismissed(Snackbar transientBottomBar, int event) {
                                super.onDismissed(transientBottomBar, event);
                                Toast.makeText(SnackbarActivity.this, "Snackbar隱藏", Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onShown(Snackbar sb) {
                                super.onShown(sb);
                                Toast.makeText(SnackbarActivity.this, "Snackbar顯示", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();

Snackbar.Callback中有兩個(gè)抽象方法绪颖,onDismissed()方法是當(dāng)Snackbar消失的時(shí)候觸發(fā)的事件;onShown()方法是當(dāng)Snackbar顯示的時(shí)候觸發(fā)的事件甜奄。顯示效果如下所示:

image

4.相關(guān)屬性設(shè)置

Snackbar支持動(dòng)態(tài)的設(shè)置一些屬性柠横,如Action的文本顏色、顯示的文本內(nèi)容课兄、顯示的持續(xù)時(shí)間等牍氛,可通過下面方法進(jìn)行設(shè)置:

Snackbar snackbar = Snackbar.make(coordinatorLayout, "Action 被點(diǎn)擊", Snackbar.LENGTH_SHORT);
        snackbar.setText("動(dòng)態(tài)文本");//動(dòng)態(tài)設(shè)置文本顯示內(nèi)容
        snackbar.setActionTextColor(Color.RED);//動(dòng)態(tài)設(shè)置Action文本的顏色
        snackbar.setDuration(5000);//動(dòng)態(tài)設(shè)置顯示時(shí)間

        View snackbarView = snackbar.getView();//獲取Snackbar顯示的View對(duì)象
        //獲取顯示文本View,并設(shè)置其顯示顏色
        ((TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text)).setTextColor(Color.BLUE);
        //獲取Action文本View,并設(shè)置其顯示顏色
        ((TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_action)).setTextColor(Color.BLUE);
        //設(shè)置Snackbar的背景色
        snackbarView.setBackgroundColor(Color.GREEN);

        //設(shè)置Snackbar顯示的位置
        ViewGroup.LayoutParams params = snackbarView.getLayoutParams();
        CoordinatorLayout.LayoutParams layoutParams = new CoordinatorLayout.LayoutParams(params.width, params.height);
        layoutParams.gravity = Gravity.CENTER_VERTICAL;//垂直居中
        snackbarView.setLayoutParams(layoutParams);

至此烟阐,Snackbar的相關(guān)使用就介紹完了搬俊。

四、Snackbar與Dialog和Toast的比較

通過上文的介紹蜒茄,我們知道了Snackbar和Dialog唉擂、Toast一樣都是用來(lái)作為android內(nèi)提示信息的,三者之間的應(yīng)用場(chǎng)景也有所不同檀葛。

Dialog

模態(tài)對(duì)話框楔敌。也就說,此刻該對(duì)話框中的內(nèi)容獲取了焦點(diǎn)驻谆,想要操作對(duì)話框以外的功能,必須先對(duì)該對(duì)話框進(jìn)行響應(yīng)庆聘。

應(yīng)用場(chǎng)景:對(duì)于刪除確認(rèn)胜臊、版本更新等重要性提示信息,需要用戶做出選擇的情況下伙判,使用Dialog象对。

Toast

非模態(tài)提示框。也就說提示框的顯示并不影響我們對(duì)其他地方的操作宴抚,Toast無(wú)法手動(dòng)控制隱藏勒魔,需要設(shè)置Toast的顯示時(shí)長(zhǎng),一旦顯示時(shí)間結(jié)束菇曲,Toast會(huì)自動(dòng)消失冠绢。如果多次點(diǎn)擊并顯示Toast,就會(huì)出現(xiàn)Toast重復(fù)創(chuàng)建并顯示常潮,給用戶造成一種Toast長(zhǎng)時(shí)間不隱藏的幻覺弟胀。

應(yīng)用場(chǎng)景:對(duì)于無(wú)網(wǎng)絡(luò)提示、刪除成功、發(fā)布操作完成等這類不重要的提示性信息孵户,使用Toast萧朝;

Snackbar

Snackbar和Toast比較相似,但是用途更加廣泛夏哭,并且它是可以和用戶進(jìn)行交互的检柬。Snackbar使用一個(gè)動(dòng)畫效果從屏幕的底部彈出來(lái),過一段時(shí)間后也會(huì)自動(dòng)消失竖配。

應(yīng)用場(chǎng)景:刪除操作時(shí)何址,彈出Snackbar用于確認(rèn)刪除操作;消息發(fā)送失敗時(shí)械念,彈出Snackbar头朱,用于重新發(fā)送操作;當(dāng)然重要的是與MD組件相結(jié)合龄减,用戶體驗(yàn)效果更佳项钮。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市希停,隨后出現(xiàn)的幾起案子烁巫,更是在濱河造成了極大的恐慌,老刑警劉巖宠能,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件亚隙,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡违崇,警方通過查閱死者的電腦和手機(jī)阿弃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)羞延,“玉大人渣淳,你說我怎么就攤上這事“槁幔” “怎么了入愧?”我有些...
    開封第一講書人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)嗤谚。 經(jīng)常有香客問我棺蛛,道長(zhǎng),這世上最難降的妖魔是什么巩步? 我笑而不...
    開封第一講書人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任旁赊,我火速辦了婚禮,結(jié)果婚禮上椅野,老公的妹妹穿的比我還像新娘彤恶。我一直安慰自己钞钙,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開白布声离。 她就那樣靜靜地躺著芒炼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪术徊。 梳的紋絲不亂的頭發(fā)上本刽,一...
    開封第一講書人閱讀 51,578評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音赠涮,去河邊找鬼子寓。 笑死,一個(gè)胖子當(dāng)著我的面吹牛笋除,可吹牛的內(nèi)容都是我干的斜友。 我是一名探鬼主播,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼垃它,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼鲜屏!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起国拇,我...
    開封第一講書人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤洛史,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后酱吝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體也殖,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年务热,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了忆嗜。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡崎岂,死狀恐怖捆毫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情该镣,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布响谓,位于F島的核電站损合,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏娘纷。R本人自食惡果不足惜嫁审,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望赖晶。 院中可真熱鬧律适,春花似錦辐烂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至厂僧,卻和暖如春扣草,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背颜屠。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工辰妙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人甫窟。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓密浑,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親粗井。 傳聞我的和親對(duì)象是個(gè)殘疾皇子尔破,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355