Material Design （三），Snackbar的使用

前言：

 另一个比较有趣的设计库中的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/