Android Material Design —— Snackbar

本节介绍在Material Design中有趣的组件之一的Snackbar
Snackbar对于一个反馈提供了一个轻量级的操作。它显示了一个简短的消息在移动设备屏幕的底部,或者大型设备的左下方。Snackbar出现在屏幕上所有的元素之上,并且同一时间有且只能让一个被显示。除了能像Toast消息之外还提供了action动作来相互作用。以下就对Snackbar几种不同的场景进行示例说明

1
2
3
4
Snackbar
extends Object
java.lang.Object
↳ android.support.design.widget.Snackbar

简易的Snackbar

下面的语法是一个简易的snackbar

make方法的作用接受3个参数,视图、显示的消息和消息显示的间隔时间。

间隔时间应该是LENGTH_SHORT, LENGTH_LONG 或者 LENGTH_INDEFINITE,当LENGTH_INDEFINITE 被使用,snackbar将会显示时间不定,除非手动滑动关闭或者有其他新的snackbar显示

1
2
3
4
Snackbar snackbar = Snackbar
.make(linearLayout, "This is a simple snackbar", Snackbar.LENGTH_LONG);

snackbar.show();

snckbar_simple

Snackbar动作回调

您也可以使用的setAction()方法作用于回调。当用户使用snackbar的时候,它允许我们执行某几个动作。

1
2
3
4
5
6
7
8
9
10
11
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
snackbar1.show();
}
});

snackbar.show();

snackbar_callback

自定义Snackbar

Snackbar 默认为白色文本颜色和#323232的背景颜色,你能够重写这些颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "No internet connection!", Snackbar.LENGTH_LONG)
.setAction("RETRY", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});

// Changing message text color
snackbar.setActionTextColor(Color.RED);

// Changing action button text color
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();

snackbar_custom

创建新项目

1、在Android StudioFile ⇒ New Project 新建一个项目

2、打开builde.gradle文件添加design support支持依赖库

com.android.support:design:23.3.0

build.gradle

1
2
3
4
5
6
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
}

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.shoewann.snackbardemo.MainActivity">

<Button
android:id="@+id/btnSimpleSnackbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Simple Snackbar" />

<Button
android:id="@+id/btnActionCallback"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="With Action Callback" />

<Button
android:id="@+id/btnCustomSnackbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Custom Color" />

</LinearLayout>

MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private android.widget.LinearLayout linearLayout;
    private android.widget.Button btnSimpleSnackbar;
    private android.widget.Button btnActionCallback;
    private android.widget.Button btnCustomSnackbar;

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

        initView();
        initData();
    }

    private void initData() {
        this.btnSimpleSnackbar.setOnClickListener(this);
        this.btnActionCallback.setOnClickListener(this);
        this.btnCustomSnackbar.setOnClickListener(this);

    }

    private void initView() {
        this.linearLayout = (LinearLayout) findViewById(R.id.linearLayout);
        this.btnSimpleSnackbar = (Button) findViewById(R.id.btnSimpleSnackbar);
        this.btnActionCallback = (Button) findViewById(R.id.btnActionCallback);
        this.btnCustomSnackbar = (Button) findViewById(R.id.btnCustomSnackbar);


    }

    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.btnSimpleSnackbar:
                Snackbar snackbar = Snackbar
                        .make(linearLayout, "This is a simple snackbar", Snackbar.LENGTH_LONG);
                snackbar.show();
                break;
            case R.id.btnActionCallback:
                Snackbar snackbar1 = Snackbar
                        .make(linearLayout, "Message is deleted", Snackbar.LENGTH_LONG)
                        .setAction("UNDO", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Snackbar snackbar2 = Snackbar.make(linearLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
                                snackbar2.show();
                            }
                        });

                snackbar1.show();
                break;
            case R.id.btnCustomSnackbar:
                Snackbar snackbar3 = Snackbar
                        .make(linearLayout, "No internet connection!", Snackbar.LENGTH_LONG)
                        .setAction("RETRY", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                            }
                        });

                // Changing message text color
                snackbar3.setActionTextColor(Color.RED);

                // Changing action button text color
                View sbView = snackbar3.getView();
                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.YELLOW);

                snackbar3.show();
                break;
            default:
                break;
        }
    }
}

Run and test the app.

snackbar_project

0%