Demo4 告别Toast:精致的Snackbar

在我之前学习android的很长一段时间内,Toast是用来提示信息的重要手段,想必你也跟我一样。今天我们将来学习新的用来提示信息的组件Snackbar,今后就让我们告别Toast。

Snackbar也是design support library的组件,使用之前导入design库即可。Snackbar这个组件是在屏幕的底部一个微小的黑色条显示着一条简短的消息,用法跟Toast类似,但是他们有着不同的概念,Snackbar不同于 Toast,它的表现是作为 UI 的一部分而不是覆盖在屏幕上。今天我们在布局中只放置一个Button,当我们点击Button时,显示Actionbar。我们可以通过下面代码来唤起Snackbar:

Snackbar.make((LinearLayout)findViewById(R.id.Mainlayout),  //注意,因为Snackbar是布局的一部分,所以要指定其所属布局或组件,这里我们指定其为主布局
                "Hello I am Snackbar", 
                Snackbar.LENGTH_SHORT).show();

Demo4 告别Toast:精致的Snackbar_第1张图片

这样的SnackBar太单调了不是吗。接下来我们要给我们的SnackBar加上一个action,也就是像下面这样,在Snackbar右侧有一个可以点击的标签,就像Button,当你点击他,便可以响应按下消息,当然你要事先实现这个点击事件的监听器。
Demo4 告别Toast:精致的Snackbar_第2张图片
这个内容对你来说肯定也很简单,就直接上代码(我们在其点击事件中使用了Toast…):

Snackbar.make((LinearLayout)findViewById(R.id.Mainlayout),  //注意,因为Snackbar是布局的一部分,所以要指定其所属布局或组件,这里我们指定其为主布局
        "Hello I am Snackbar",
        Snackbar.LENGTH_SHORT).setAction("Click me!", new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "T.T", Toast.LENGTH_SHORT).show();
    }
}).show();

顺带一提,在Snackbar的make方法中,第三个参数如果设置为Snackbar.LENGTH_INDEFINITE,表示点击事件发生后才撤销Snackbar。
鉴于今天内容比较轻松,接下来就再给大家补个课。现在我们先把FloatActionButton加到布局底端,哈?就这样而已是了。接下来我们再运行程序。有没有觉得什么不妥。咦?FloatActionButton被遮住了:

Demo4 告别Toast:精致的Snackbar_第3张图片

这是非常不好的用户体验,那我们有办法解决吗。答案是肯定的,要借助design组件库的新布局:CoordinationLayout。故名思意,这个布局会自动调整其内容布局的位置以达到协同工作的效果。方法很简单,直接将我们之前的布局改成CoordinationLayout就行了,最后的布局文件如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/Mainlayout" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="25dp" android:text="Demo Snackbar" android:gravity="center"/>
    <Button  android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="show a Snckbar" />
    <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:src="@android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>

直接运行程序,奇迹就发生了。直接上图:

Demo4 告别Toast:精致的Snackbar_第4张图片

Demo源码下载地址:Demo4:SnackBar

你可能感兴趣的:(android,design,material,Snackbar)