概述

查看官方API

Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar,可以在屏幕底部快速的显示一条消息,大体与 Toast 相同,但多了几分灵活性:

  • 一小段时间之后、或者用户与屏幕触发交互,Snackbar 会自动消失;
  • 可以包含一个可选的操作;
  • 把 Snackbar 划出屏幕,可以弃用;
  • 作为一条上下文敏感的消息,也是 UI 的一部分,并在屏幕内所有元素的上层显示,而不是像 Toast 消息一样位于屏幕中央;
  • 一个时刻只能有唯一一个 Snackbar 显示。

Snackbar使用的时候需要一个控件容器用来容纳Snackbar.官方推荐使用CoordinatorLayout这个另一个Android Support Design Library库支持的控件容纳。因为使用这个控件,可以保证Snackbar可以让用户通过向右滑动退出。 Activity中获取CoordinateorLayout作为容器,然后调用Snackbar.make(container, “SnackbarTest”, Snackbar.LENGTH_LONG).show();就可以生成一个Snackbar了


语法规则

Snackbar.make(view, message, duration).setAction(action message, click listener).show();

方法:

  • make()
  • setAction()
  • show()

属性:

  • make() 方法的第一个参数是一个 view,snackbar 会找到一个父 view,以寄存所赋的 snackbar 值。Snackbar 会沿着 view 的树状路径,找到第一个合适的布局或窗口视图,作为父 view。
  • 上文提到,持续时间属性与 Toast 的相同,可选 LENG_SHORT 或者 LENGTH_LONG。
  • 设置Action行为事件,使用的方法是public Snackbar setAction (CharSequence text, View.OnClickListener listener); Action的字体颜色默认使用系统主题中的如<item name="colorAccent">#ff0000</item>
  • 可以通过代码去改变Action的字体颜色:Snackbar setActionTextColor (int color);

举例:

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {// Perform anything for the action selected}}).show();

此处 rootlayout 是一个带有 FAB 的RelativeLayout ,
布局如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><android.support.design.widget.CoordinatorLayoutandroid:id="@+id/layoutRoot"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.FloatingActionButtonandroid:id="@+id/btnFloatingAction"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:src="@mipmap/ic_add_white"app:fabSize="normal"app:borderWidth="0dp"android:layout_marginBottom="@dimen/fab_margin_bottom"android:layout_marginRight="@dimen/fab_margin_right"/></android.support.design.widget.CoordinatorLayout></RelativeLayout>

点击 FAB 以查看结果:

可以正常运行,但是并不符合标准的 UX,应该按照下图所示,FAB 适当上移:

同时按照文档中描述:

在项目的 view 中添加 CoordinatorLayout,可以支持 snackbar 的更多特性,比如滑动消失,和 FAB 的自动移动。Having a CoordinatorLayout in your view hierarchy allows Snackbar to enable certain features, such as swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

配置 Snackbar:

可以使用 setActionTextColor 和 setDuration 等选项,配置 snackbar:

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {// Perform anything for the action selected}}).setActionTextColor(R.color.material_blue).setDuration(4000).show();

Code

activity_snackbar.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><android.support.design.widget.CoordinatorLayoutandroid:id="@+id/layoutRoot"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.FloatingActionButtonandroid:id="@+id/btnFloatingAction"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:src="@mipmap/ic_add_white"app:fabSize="normal"app:borderWidth="0dp"android:layout_marginBottom="@dimen/fab_margin_bottom"android:layout_marginRight="@dimen/fab_margin_right"/></android.support.design.widget.CoordinatorLayout></RelativeLayout>

SnackbarAct

package demo.turing.com.materialdesignwidget.snackbar;import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;import demo.turing.com.materialdesignwidget.R;public class SnackbarAct extends AppCompatActivity {private FloatingActionButton floatingActionButton;private CoordinatorLayout coordinatorLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_snackbar);setupUI();}public void setupUI() {coordinatorLayout = (CoordinatorLayout) findViewById(R.id.layoutRoot);floatingActionButton = (FloatingActionButton) findViewById(R.id.btnFloatingAction);floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Snackbar.make(coordinatorLayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {// Perform anything for the action selected}}).show();// TODO issue: Rotate animation in pre-lollipop works only once, issue to be resolved!/** if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {RotateAnimation rotateAnimation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);rotateAnimation.setDuration(500);rotateAnimation.setFillAfter(true);rotateAnimation.setInterpolator(new FastOutSlowInInterpolator());floatingActionButton.startAnimation(rotateAnimation);} else {floatingActionButton.clearAnimation();ViewPropertyAnimatorCompat animatorCompat = ViewCompat.animate(floatingActionButton);animatorCompat.setDuration(500);animatorCompat.setInterpolator(new FastOutSlowInInterpolator());animatorCompat.rotation(180);animatorCompat.start();}**/}});}
}

效果图:


英文原文:
http://www.technotalkative.com/part-2-welcome-snackbar-goodbye-toast/


Snackbar样式

在这里我们将看到如何显示不同颜色的snackbar,向用户传递更多暗示信息,比如snackbar背景显示成红色表明这是一个警告提示。

如何为Snackbar添加背景颜色

你可以通过getView() 方法获取Snackbar的核心视图,然后就可以在对它采用任意颜色了。
比如:

snackbar.getView().setBackgroundColor(colorId);

下面是ColoredSnackbar类,它封装了一些方法,可以根据用户指定的类型显示不同背景颜色。

public class ColoredSnackbar {private static final int red = 0xfff44336;private static final int green = 0xff4caf50;private static final int blue = 0xff2195f3;private static final int orange = 0xffffc107;private static View getSnackBarLayout(Snackbar snackbar) {if (snackbar != null) {return snackbar.getView();}return null;}private static Snackbar colorSnackBar(Snackbar snackbar, int colorId) {View snackBarView = getSnackBarLayout(snackbar);if (snackBarView != null) {snackBarView.setBackgroundColor(colorId);}return snackbar;}public static Snackbar info(Snackbar snackbar) {return colorSnackBar(snackbar, blue);}public static Snackbar warning(Snackbar snackbar) {return colorSnackBar(snackbar, orange);}public static Snackbar alert(Snackbar snackbar) {return colorSnackBar(snackbar, red);}public static Snackbar confirm(Snackbar snackbar) {return colorSnackBar(snackbar, green);}
}

如何使用

Snackbar snackbar = Snackbar.make(getView(), R.string.hello_snackbar, Snackbar.LENGTH_SHORT);
ColoredSnackBar.alert(snackbar).show();

这里,我使用的是fragment的getView()方法来获得view,不过你也可以使用FrameLayout或者CoordinatorLayout。

效果图


英文原文:
http://www.technotalkative.com/part-3-styling-snackbar/

Snackbar-Android M新控件相关推荐

  1. 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用...

    Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...

  2. Android M 新控件了解学习

    Android M 新控件了解:FloatingActionButton,TextInputLayout,Snackbar,TabLayout, AppBarLayout,NavigationView ...

  3. Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用

    在前不久的谷歌2015 I/O大会上,发布了Android新版本M,貌似从这个版本开始Android不在以数字命名版本了. 在这次的I/O大会上谷歌对Android并没有很大的改变,主要是修改完善之前 ...

  4. Android Design新控件之TextInputLayout 文本输入布局与自定义颜色简介

    Android 从5.0版本开始,新增了Android Materia Design库,让开发者高效的实现炫酷的UI效果 推荐: TextInputLayout(文本输入布局) TabLaout(选项 ...

  5. android ui新控件,android_常用UI控件_01_TextView3_点击打开新的activity

    点击textview打开新的activity (1) MainActivity.javapackage com.example.android_textview_opennewactivity; im ...

  6. 视频教程-Android Material Design 新控件-Android

    Android Material Design 新控件 刘志远,北京邮电大学硕士研究生, 北京育华志远科技有限公司创始人, 育华志远教育品牌负责人,育华志远课程体系打造者. 率领团队为互联网行业培训千 ...

  7. android Snackbar新控件解析

    Dialog和Toast,我们在日常的开发中一定非常熟悉,常常被用来作为Android应用内提示性信息的两种展示方式.然而Google在Design包中又提供了一种新的选择,那就是Snackbar.今 ...

  8. 一个Demo学会用Android兼容包新控件

    2019独角兽企业重金招聘Python工程师标准>>> 前言 伟大的Google为Android推出了一系列的兼容包,最新的就是Design Support Library了,这里我 ...

  9. 【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

    Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了. 新控件的介绍.使用等等网上相应的文章已经特别多了,题主也没那能力去写篇详解出来,本篇随笔记 ...

  10. Android 5.0新控件——FloatingActionButton(悬浮按钮)

    Android 5.0新控件--FloatingActionButton(悬浮按钮) FloatingActionButton是5.0以后的新控件,一个悬浮按钮,之所以叫做悬浮按钮,主要是因为自带阴影 ...

最新文章

  1. 【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
  2. 点读笔客户端_新手妈妈如何选购点读笔
  3. python 定时任务 Apscheduler
  4. 华为交换机 查ip冲突_华为交换机:如何解决网络中IP地址发生冲突故障?
  5. OCR应用场景:票总管发票管理系统
  6. CommandArgument 与 CommandName 属性
  7. 程序员为什么多数秃头?看完这15个瞬间,终于懂了
  8. PS:修复图片模糊(字体)
  9. c语言easyx背景图片,C++之设置背景图片(Easyx)
  10. Python温习(六)——元组操作
  11. 华科计算机学院硕士武汉理工推免,学霸宿舍升级版!这个学院5个宿舍20名成员集体保研...
  12. Google 百度 图标收藏(二)
  13. 用腾讯即时通讯IM和实时音视频实现完整语音通话功能
  14. 学术英语阅读与写作5:实验结果Result
  15. Android应用开发试题(收集)
  16. MIDI 文件格式分析
  17. skype_Skype的7种开源替代品
  18. 超宽带UWB无线技术,厘米级测距定位,精准位置确定方案应用
  19. MATLAB2022a更新了,看MATLAB2022详细安装教程
  20. 洛谷P1536村村通(并查集模板题)

热门文章

  1. 释放linux 内存
  2. 使用 keras 训练大规模数据
  3. mysql 最长字符串_那些年的Mysql
  4. kafka中controller的作用_Kafka 常见问题汇总
  5. (建议收藏)万字长文,帮你一招搞定产品经理面试-详解产品经理面试大全
  6. Linux疑难杂症解决方案100篇(九)-SHELL编程正则表达式
  7. 滴滴算法大赛算法解决过程 - 方案设计
  8. Hadoop基于Shell命令与底层Unix操作系统的交互
  9. zuul 路由不生效_springBoot集成zuul路由forward,设置setSendZuulResponse无效
  10. 写给师弟师妹的一封信-论在校程序员的学习方向