Snackbar

Dialog和Toast,我们在日常的开发中一定非常熟悉,常常被用来作为Android应用内提示性信息的两种展示方式。然而Google在Design包中又提供了一种新的选择,那就是Snackbar。今天主 要介绍Snackbar新控件的使用,以及三种提示信息展示方式的比较。

一、什么是Snackbar

Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也可以处理用户交互(点击)事件。

二、Snackbar的特性

  1. Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失;

  2. 可以在屏幕上滑动关闭;

  3. 出现时不会阻碍用户在屏幕上的输入

  4. 屏幕上同时最多只能显示一个Snackbar

  5. 如果在屏幕上有一个Snackbar的情况下再显示一个Snackbar,则先将当前显示的Snackbar隐藏后再显示新的Snackbar

  6. 可以在Snackbar中添加一个按钮,处理用户点击事件

  7. Snackbar一般需要CoordinatorLayout来作为父容器,CoordinatorLayout保证Snackbar可以右滑退出

三、Snackbar的使用

通过上文的介绍,我们对Snackbar的含义和功能有了基本了解,接下来通过代码来详细介绍Snackbar的使用。

使用MD控件,首先要在gradle文件中导入依赖,本文中使用的依赖包如下:implementation 'com.android.support:design:25.3.0'

弹出Snackbar,弹出Snackbar的方式和Toast方式相似,通过调用Snackbar类中的静态方法make()设置相关信息,show()方法弹窗Snackbar

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

1.make()实现简单弹出

make() 方法的第一个参数是一个 view,snackbar 会找到一个父 view,以寄存所赋的 snackbar 值。Snackbar 会沿着 view 的树状路径,找到第一个合适的布局或窗口视图,作为父 view。一般是一个CoordinatorLayout对象。

第二个参数是Snackbar中想要显示的内容,一般只能显示2行;

第三个参数是Snackbar想要显示的时间长短,有三个值:LENGTH_INDEFINITE 永远显示、LENGTH_LONG显示较长时间、LENGTH_SHORT 显示较短时间;

Snackbar也要像Toast一样,调用show()方法才能显示。

案例分析

首先,我们创建一个Activity,在布局文件中添加CoordinatorLayout控件,并创建一个FloatingActionButton,用于测试FloatingActionButton结合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中对控件进行初始化,并监听FloatingActionButton的点击事件,实现点击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, "这是一个snackbar", Snackbar.LENGTH_SHORT).show();
                break;
        }
    }
}

执行上述代码,显示效果为:

image

注意:mark()方法的第一个参数一定要是coordinatorLayout,否则,弹出的Snackbar将覆盖FloatingActionButton控件。

到这里就基本实现了Snackbar的简单弹出,但是,目前的效果和我们之前的Toast没什么大的区别,同时发现案例中,我们并没有调用Snackbar的setAction()方法。接下来,我们将开始介绍Snackbar的另一个重要方法setAction()。

2.setAction()添加按钮

除了显示之外,Snackbar中还可以有一个按钮,我们称之为Action,它显示在Snackbar的右边,可以通过Snackbar对象的setAction()方法设置,修改上文中FloatingActionButton控件点击事件的处理逻辑:

case R.id.snackbar_fab:
                Snackbar.make(coordinatorLayout, "这是一个snackbar", Snackbar.LENGTH_SHORT)
                        .setAction("action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Snackbar.make(coordinatorLayout, "Action 被点击", Snackbar.LENGTH_SHORT).show();
                            }
                        })
                        .show();
                break;

添加setAction()方法,该方法有两个参数,第一个参数是按钮的名称,第二个参数是按钮点击事件的监听方法。显示效果如下:

3.显示隐藏监听

在Snackbar弹出和消失时,都会触发一个回调事件,我们可以通过Snackbar对象的addCallback()方法(setCallback()方法已经过时)捕获它们:

Snackbar.make(coordinatorLayout, "这是一个snackbar", Snackbar.LENGTH_SHORT)
                        .setAction("action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Snackbar.make(coordinatorLayout, "Action 被点击", 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中有两个抽象方法,onDismissed()方法是当Snackbar消失的时候触发的事件;onShown()方法是当Snackbar显示的时候触发的事件。显示效果如下所示:

image

4.相关属性设置

Snackbar支持动态的设置一些属性,如Action的文本颜色、显示的文本内容、显示的持续时间等,可通过下面方法进行设置:

Snackbar snackbar = Snackbar.make(coordinatorLayout, "Action 被点击", Snackbar.LENGTH_SHORT);
        snackbar.setText("动态文本");//动态设置文本显示内容
        snackbar.setActionTextColor(Color.RED);//动态设置Action文本的颜色
        snackbar.setDuration(5000);//动态设置显示时间

        View snackbarView = snackbar.getView();//获取Snackbar显示的View对象
        //获取显示文本View,并设置其显示颜色
        ((TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text)).setTextColor(Color.BLUE);
        //获取Action文本View,并设置其显示颜色
        ((TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_action)).setTextColor(Color.BLUE);
        //设置Snackbar的背景色
        snackbarView.setBackgroundColor(Color.GREEN);

        //设置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的相关使用就介绍完了。

四、Snackbar与Dialog和Toast的比较

通过上文的介绍,我们知道了Snackbar和Dialog、Toast一样都是用来作为android内提示信息的,三者之间的应用场景也有所不同。

Dialog

模态对话框。也就说,此刻该对话框中的内容获取了焦点,想要操作对话框以外的功能,必须先对该对话框进行响应。

应用场景:对于删除确认、版本更新等重要性提示信息,需要用户做出选择的情况下,使用Dialog。

Toast

非模态提示框。也就说提示框的显示并不影响我们对其他地方的操作,Toast无法手动控制隐藏,需要设置Toast的显示时长,一旦显示时间结束,Toast会自动消失。如果多次点击并显示Toast,就会出现Toast重复创建并显示,给用户造成一种Toast长时间不隐藏的幻觉。

应用场景:对于无网络提示、删除成功、发布操作完成等这类不重要的提示性信息,使用Toast;

Snackbar

Snackbar和Toast比较相似,但是用途更加广泛,并且它是可以和用户进行交互的。Snackbar使用一个动画效果从屏幕的底部弹出来,过一段时间后也会自动消失。

应用场景:删除操作时,弹出Snackbar用于确认删除操作;消息发送失败时,弹出Snackbar,用于重新发送操作;当然重要的是与MD组件相结合,用户体验效果更佳。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342