Material Design ，Snackbar的使用

Posted 2020-06-24 宿罪

前言：

?另一个比较有趣的设计库中的UI组件是Snackbar，它的作用和Toast类似，显示吐司，但Snackbar的特别之处在于Snackbar显示的提示信息可以和用户交互，更好地获取用户反馈信息。同时，它显示的吐司带有动画效果，从屏幕下方慢慢展开显示。

引用设计库中的组件，需要引入相应的包：

dependencies {
    compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
    compile ‘com.android.support:appcompat-v7:23.0.1‘
    compile ‘com.android.support:design:23.0.1‘
}

1. 简单的Snackbar

?Snackbar使用很简单，一个简单的Snackbar的使用如下所示：

Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "I am Simple Snackbar", Snackbar.LENGTH_SHORT);
snackbar.show();

2. 带有动作反馈的Snackbar

Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "点击右边的反馈按钮", Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SnackbarActivity.this, "hello", Toast.LENGTH_SHORT).show();
            }
        });
snackbar.show();

调用Snackbar的setAction()方法，第一参数是点击按钮显示的文本，第二个当然是点击事件监听。

3. 自定义显示样式的Snackbar

?Snackbar是一个UI组件，它提供了一些接口（方法）让我们自定义显示样式：

Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "点击右边的反馈按钮", Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SnackbarActivity.this, "hello", Toast.LENGTH_SHORT).show();
            }
        });
// 改变右边反馈按钮字体颜色
snackbar.setActionTextColor(Color.YELLOW);

// 其实我们看到的提示信息是一个TextView（子类）
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.BLUE);

snackbar.show();

3. 效果演示

为了演示上面的三种情况的Snackbar，写个测试的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <Button
        android:onClick="showSimpleSnackbar"
        android:layout_width="match_parent"
        android:text="simple sanckbar"
        android:layout_margin="20dp"
        android:layout_height="wrap_content">
    </Button>

    <Button
        android:onClick="showFeedbackSnackbar"
        android:layout_width="match_parent"
        android:text="with feedback snackbar"
        android:layout_margin="20dp"
        android:layout_height="wrap_content">
    </Button>

    <Button
        android:onClick="showCustomStyleSnackbar"
        android:layout_width="match_parent"
        android:text="Custom Style snackbar"
        android:layout_margin="20dp"
        android:layout_height="wrap_content">
    </Button>

</LinearLayout>

这个演示Activity的代码：

package com.example.lt.meterialdesign;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;


/**
 * Created by lt on 2016/3/17.
 */
public class SnackbarActivity extends Activity {

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

    public void showSimpleSnackbar(View view) {
        Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "I am Simple Snackbar", Snackbar.LENGTH_SHORT);
        snackbar.show();
    }

    public void showFeedbackSnackbar(View view){
        Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "点击右边的反馈按钮", Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SnackbarActivity.this, "hello", Toast.LENGTH_SHORT).show();
            }
        });
        snackbar.show();
    }

    public void showCustomStyleSnackbar(View view){
        Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "点击右边的反馈按钮", Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SnackbarActivity.this, "hello", Toast.LENGTH_SHORT).show();
            }
        });
        // 改变右边反馈按钮字体颜色
        snackbar.setActionTextColor(Color.YELLOW);

        // 其实我们看到的提示信息是一个TextView（子类）
        View sbView = snackbar.getView();
        TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
        textView.setTextColor(Color.BLUE);

        snackbar.show();
    }

}

演示图片效果：

4. 结合CoordinatorLayout 和 FloatingActionButton展现不一样的风采

?设计库中的CoordinatorLayout 是一个让其子view之间的更好地交互的容器，比如：当Snackbar出现的时候，FloatingActionButton则会浮动显示在Snackbar，而不会发生控件重叠的现象。

activity_snackbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/coordinatorLayout"
     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=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#00f"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:text="Snackbar"
            android:textSize="20sp"
            android:layout_margin="10dp"
            android:textColor="#fff"
            android:layout_height="wrap_content"/>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:layout_marginTop="60dp"
        android:paddingRight="20dp"
        >

            <Button
                android:onClick="showSimpleSnackbar"
                android:layout_width="match_parent"
                android:text="simple sanckbar"
                android:layout_margin="20dp"
                android:layout_height="wrap_content">
            </Button>

            <Button
                android:onClick="showFeedbackSnackbar"
                android:layout_width="match_parent"
                android:text="with feedback snackbar"
                android:layout_margin="20dp"
                android:layout_height="wrap_content">
            </Button>

            <Button
                android:onClick="showCustomStyleSnackbar"
                android:layout_width="match_parent"
                android:text="Custom Style snackbar"
                android:layout_margin="20dp"
                android:layout_height="wrap_content">
            </Button>


    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@drawable/abc_ic_menu_cut_mtrl_alpha"
        app:fabSize="normal"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

设计库中的一些组件用到了额外自定义的属性，所以需要引入相应的命名控件

SnackbarActivity.java

package com.example.lt.meterialdesign;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;


/**
 * Created by lt on 2016/3/17.
 */
public class SnackbarActivity extends AppCompatActivity {

    private CoordinatorLayout mCoordinatorLayout;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_snackbar);
        mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
    }

    public void showSimpleSnackbar(View view) {
        Snackbar snackbar = Snackbar.make(mCoordinatorLayout, "I am Simple Snackbar", Snackbar.LENGTH_SHORT);
        snackbar.show();
    }

    public void showFeedbackSnackbar(View view){
        Snackbar snackbar = Snackbar.make(mCoordinatorLayout, "点击右边的反馈按钮", Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SnackbarActivity.this, "hello", Toast.LENGTH_SHORT).show();
            }
        });
        snackbar.show();
    }

    public void showCustomStyleSnackbar(View view){
        Snackbar snackbar = Snackbar.make(mCoordinatorLayout, "点击右边的反馈按钮", Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SnackbarActivity.this, "hello", Toast.LENGTH_SHORT).show();
            }
        });
        // 改变右边反馈按钮字体颜色
        snackbar.setActionTextColor(Color.YELLOW);

        // 其实我们看到的提示信息是一个TextView（子类）
        View sbView = snackbar.getView();
        TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
        textView.setTextColor(Color.BLUE);

        snackbar.show();
    }

}

其他和上面都基本一样，就是把Snackbar.make()的一个参数换成了CoordinatorLayout对象的实例，这样才可以让CoordinatorLayout发挥其艺术般的交互效果。

运行效果图:

参考文章：http://www.androidhive.info/2015/09/android-material-design-snackbar-example/

参考文章：http://www.truiton.com/2015/06/android-snackbar-example/