Android Snackbar使用详解

转载请备注原文链接地址:https://www.niwoxuexi.com/blog/android/article/190.html
Snackbar是Android Support Design Library库中的一个控件,可以在屏幕底部快速弹出消息,跟Toast的使用方法类似,显现效果比toast好(个人意见)
1,Snackbar基本介绍和使用方法
首先看一下官方的介绍:
Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time.

They automatically disappear after a timeout or after user interaction elsewhere on the screen, particularly after interactions that summon a new surface or activity. Snackbars can be swiped off screen.

Snackbars can contain an action which is set via setAction(CharSequence, android.view.View.OnClickListener).

To be notified when a snackbar has been shown or dismissed, you can provide a Snackbar.Callback via addCallback(BaseCallback).

简单的说Snackbar就是一个类似Toast的快速弹出消息提示的控件,手机上显示在底部,大屏幕设备显示在左侧。但是在显示上比Toast丰富,也提供了于用户交互的接口
使用Snackbar要导入com.android.support:design库。
Snackbar显示在所有屏幕其它元素之上(屏幕最顶层),同一时间只能显示一个snackbar。
Snackbar的基本使用很简单,与Toast类似。
<pre>.make(view, message_text, duration)
.setAction(action_text, click_listener)
.show();
</pre>
make(View view, CharSequence text, int duration)方法是生成Snackbar的。
Snackbar需要一个控件容器view用来容纳,官方推荐使用CoordinatorLayout来确保Snackbar和其他组件的交互,比如滑动取消Snackbar、Snackbar出现时FloatingActionButton上移。
显示时间duration有三种类型LENGTH_SHORT、LENGTH_LONG和LENGTH_INDEFINITE。
setAction()方法可设置Snackbar右侧按钮,增加进行交互事件。如果不使用setAction()则只显示左侧message。
<pre>
Snackbar.make(view, "显示在左侧的message", Snackbar.LENGTH_LONG)
.setAction("右侧显示action文本", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你点击了action事件", Toast.LENGTH_SHORT).show();
}
}).show();
</pre>


如果你想在Snackbar的显示时或消失时做些什么,可以调用Snackbar的addCallback()方法 (setCallback方法API 25.1.0过时了)。
<pre>Snackbar.make(view, "显示在左侧的message", Snackbar.LENGTH_LONG)
.addCallback(new BaseTransientBottomBar.BaseCallback<Snackbar>() {
@Override
public void onShown(Snackbar transientBottomBar) {
super.onShown(transientBottomBar);
Toast.makeText(MainActivity.this, "SnackBar 开始显示了", Toast.LENGTH_SHORT).show();
}
@Override
public void onDismissed(Snackbar transientBottomBar, int event) {
super.onDismissed(transientBottomBar, event);
Toast.makeText(MainActivity.this, "SnackBar 要消失了", Toast.LENGTH_SHORT).show();
}
}).show();</pre>

2,改变SnackBar的显示样式
Snackbar和Toast的默认样式都很单一,但是有时我们希望把不同类型信息区别显示,从而使用户更容易注意到提示信息。所以使Snackbar变色是一个好主意。

Snackbar的官方API只提供了setActionTextColor()这个方法修改Action的文字颜色,那如何改变样式呢,我们在源码中先看一下SnackBar的make()方法
make()方法源码:
<pre>
public static Snackbar make(@NonNull View view, @NonNull CharSequence text, @Duration int duration) {
final ViewGroup parent = findSuitableParent(view);
if (parent == null) {
throw new IllegalArgumentException("No suitable parent found from the given view. "
+ "Please provide a valid view.");
}
final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
final SnackbarContentLayout content = (SnackbarContentLayout) inflater
.inflate( R.layout.design_layout_snackbar_include, parent, false);
final Snackbar snackbar = new Snackbar(parent, content, content);
snackbar.setText(text);
snackbar.setDuration(duration);
return snackbar;
}
</pre>
在make方法中我们可以看到初始化了一个Snackbar,并且为Snackbar添加了一个SnackbarContentLayout(查看源码可以看到这个布局文件继承自LinearLayout)的布局,而SnackbarContentLayout加载了R.layout.design_layout_snackbar_include布局文件,这个文件就是Snackbar显示出来的布局文件,那我们先看看这个文件
design_layout_snackbar_include.xml文件源码:
<pre>
<?xml version="1.0" encoding="utf-8"?>
<view
xmlns:android="http://schemas.android.com/apk/res/android"
class="android.support.design.internal.SnackbarContentLayout"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<TextView
android:id="@+id/snackbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="@dimen/design_snackbar_padding_vertical"
android:paddingBottom="@dimen/design_snackbar_padding_vertical"
android:paddingLeft="@dimen/design_snackbar_padding_horizontal"
android:paddingRight="@dimen/design_snackbar_padding_horizontal"
android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"
android:maxLines="@integer/design_snackbar_text_max_lines"
android:layout_gravity="center_vertical|left|start"
android:ellipsize="end"
android:textAlignment="viewStart"/>
<Button
android:id="@+id/snackbar_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"
android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"
android:layout_gravity="center_vertical|right|end"
android:minWidth="48dp"
android:visibility="gone"
android:textColor="?attr/colorAccent"
style="?attr/borderlessButtonStyle"/>
</view>
</pre>
由命名可知,以snackbar_text为名的TextView就是Snackbar左侧的message,以 snackbar_action为名的Button就是Snackbar 右侧的action。
好了,现在我们就可以通过上面的id来随意的操作这两个控件的属性了,直接上代码。
<pre>
Snackbar snackbar = Snackbar.make(view, "显示在左侧的message", Snackbar.LENGTH_LONG)
.setAction("右侧显示action文本", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你点击了action事件", Toast.LENGTH_SHORT).show();
}
});
//获取Snackbar的view
View snackbarContent = snackbar.getView();
if (snackbarContent != null) {
//修改Snackbar的背景色
snackbarContent.setBackgroundColor(Color.parseColor("#0000ff"));
//获取Snackbar的message控件,修改字体颜色和大小
TextView snackbarText = ((TextView) snackbarContent.findViewById(R.id.snackbar_text));
snackbarText.setTextColor(Color.parseColor("#ff0000"));
snackbarText.setTextSize(16);
//获取Snackbar的aciton控件,修改字体颜色和大小
Button snackbarAction = ((Button) snackbarContent.findViewById(R.id.snackbar_action));
snackbarText.setTextColor(Color.parseColor("#ff0000"));
snackbarText.setTextSize(16);
}
snackbar.show();
</pre>

好了,今天就写到这里了,当然也可以把Snackbar改变成自定义的样式,只要把Snackbar 的布局替换掉就可以了,我就不写了,大家自己去研究吧
大家也可以封装成工具类,方便后边使用,这个很简单吧,大家自己动手做吧
最后是代码地址喽:https://image.niwoxuexi.com/download/blogSnackbarDemo.zip

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

推荐阅读更多精彩内容