Snackbar-Android M新控件

article/2025/9/18 18:52:05

概述

查看官方API

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/


http://chatgpt.dhexx.cn/article/oiJHw5Fe.shtml

相关文章

Android Snackbar使用方法及小技巧-design

Snackbar和Toast相似&#xff0c;都是为了给用户提供交互信息&#xff0c;Snackbar是固定在底部的&#xff0c;显示时从下往上滑出 要使用Snackbar&#xff0c;需要在项目的build.gradle中添加依赖 dependencies {compile com.android.support:design:23.4.0 } Snackbar的使用…

Android 快别用Toast了,来试试Snackbar

&#x1f525; 应用场景 Toast提示默认显示在界面底部&#xff0c;使用Toast.setGravity()将提示显示在中间&#xff0c;如下&#xff1a; Toast toast Toast.makeText(this, str, Toast.LENGTH_SHORT);toast.setGravity(Gravity.CENTER, 0, 0);toast.show();运行在在Android …

Android---简易Snackbar

目录 Snackbar 简介 Snackbar 特性 完整Demo Snackbar 简介 Snackbar 是 Android5.0 新特性---Material Design 中的一个控件&#xff0c;用来代替 Toast。Snackbar 就是一个类似 Toast 的快速弹出消息提示的控件&#xff0c;手机上显示在底部&#xff0c;大屏幕设备显示在左…

Android Snackbar基本使用

概述 Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件&#xff0c;用来代替 Toast &#xff0c;Snackbar与Toast的主要区别是&#xff1a;Snackbar可以滑动退出&#xff0c;也可以处理用户交互&#xff08;点击&#xff09;事件。 样式 使用 Snackbar需要配…

Android提醒微技巧,你真的了解Dialog、Toast和Snackbar吗?

转载请注明出处&#xff1a;http://blog.csdn.net/guolin_blog/article/details/51336415 本文同步发表于我的微信公众号&#xff0c;扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注&#xff0c;每天都有文章更新。 今天给大家带来一篇简单易懂的微技巧文章&#xff0c;并没…

Android开发——Snackbar使用详解

Snackbar是Android支持库中用于显示简单消息并且提供和用户的一个简单操作的一种弹出式提醒。当使用Snackbar时&#xff0c;提示会出现在消息最底部&#xff0c;通常含有一段信息和一个可点击的按钮。下图是Gmail中删除一封邮件时弹出的Snackbar&#xff1a; 在上图中&#xf…

Android Snackbar的使用

在项目中肯定有不少地方用到Toast&#xff0c;但是在项目各种各样的需求上&#xff0c;Toast已经不能满足我们的需求了。 其实google在Android 5.0的时候就推出了Snackbar&#xff0c;它算是Toast的一个进阶控件。 它是Material Design中的一个控件&#xff0c;与Toast的最大区…

Snackbar的使用和顶部Snackbar实现

下载链接&#xff1a;Snackbar顶部显示 也可以module的形式直接导入使用 &#xff1a;module导入教程 谷歌在android 5.0 发布后&#xff0c;随后公布了design库和设计理念&#xff08;需翻墙&#xff09;&#xff0c;意图在于规范安卓app的风格&#xff0c;类似而不仅仅ios的…

SnackBar 简单使用

1.简介 Snackbar是Android Support Design Library库中的一个控件&#xff0c;可以在屏幕底部快速弹出消息&#xff0c;比Toast更加好用.可以添加点击行为。多用于结合协调布局使用&#xff08;CoordinatorLayout&#xff09;。 implementation com.android.support:design:28…

MaterialDesign之Snackbar学习笔记

近期实在太忙了&#xff0c;看到好的文章先转载&#xff0c;后续自己慢慢消化吧&#xff01; 转载 http://www.jianshu.com/p/cd1e80e64311#rd 没时间解释了&#xff0c;快使用Snackbar!——Android Snackbar花式使用指南 字数2405 阅读1628 评论4 喜欢54 本文是在《Design…

Snackbar使用详解

Snackbar Snackbar是Android Support Design Library库中的一个控件&#xff0c;可以在屏幕底部快速弹出消息&#xff0c;比Toast更加好用。 开发出一个好的产品&#xff0c;友好的交互是不可缺少的&#xff0c;通常给用户提示信息的方式有三种&#xff1a;Dialog、Toast、Sn…

Snackbar使用详解及其相关框架TSnackbar

简述&#xff1a; Snackbar 是 Android design support library 中的一个组件&#xff0c;它的作用和Toast类似&#xff0c;显示吐司&#xff0c;但Snackbar的特别之处在于Snackbar显示的提示信息可以和用户交互&#xff0c;更好地获取用户反馈信息。同时&#xff0c;它显示的吐…

HAWQ:基于 Hessian 的混合精度神经网络量化

HAWQ&#xff1a;基于 Hessian 的混合精度神经网络量化 摘要动机方法海森方法的有效性分析海森矩阵方法推导根据幂迭代求海森矩阵的最大特征值根据海森矩阵最大特征值确定量化精度与顺序 实验结果ResNet20 On CIFAR-10ResNet50 on ImageNetSqueezeNext on ImageNetInception-V3…

HAWQ技术解析(二) —— 安装部署

一、安装规划1. 选择安装介质 HAWQ的安装介质有两种选择&#xff0c;一是下载源码手工编译&#xff0c;二是使用Pivotal公司提供的HDB安装包。源码的下载地址为 http://apache.org/dyn/closer.cgi/incubator/hawq/2.0.0.0-incubating/apache-hawq-src-2.0.0.0-incubating.tar.…

HAWQ取代传统数仓实践(二)——搭建示例模型(MySQL、HAWQ)

一、业务场景 本系列实验将应用HAWQ数据库&#xff0c;为一个销售订单系统建立数据仓库。本篇说明示例的业务场景、数据仓库架构、实验环境、源和目标库的建立过程、测试数据和日期维度的生成。后面陆续进行初始数据装载、定期数据装载、调度ETL工作流自动执行、维度表技术、事…

HAWQ从0.5开始安装说明.包含hadoop和hawq

文档是从自己的云笔记中复制,格式什么的可能有问题.已修复了一遍. 零.前提 一.安装hadoop 1.1下载并复制hadoop2.6.5 1.2编辑系统配置文件 1.3创建hadoop的tmp临时目录 1.4开始修改配置文件 1.5复制hadoop到其他所有节点上 1.6开始初始化hadoop 1.7 如果服务器重启了,…

开源数据库HAWQ,架构调研

hawq的简介 https://cloud.tencent.com/developer/article/1433137 HAWQ&#xff0c;全称Hadoop With Query&#xff08;带查询Hadoop&#xff09;。HAWQ使企业能够获益于经过锤炼的基于MPP的分析功能及其查询性能&#xff0c;同时利用Hadoop堆栈。HAWQ是一个Hadoop原生大规模…

apache hawq

为什么80%的码农都做不了架构师&#xff1f;>>> 资料地址&#xff1a; 导航页 What is HAWQ? HAWQ Architecture How HAWQ Manages Resources Understanding the Fault Tolerance Service Table Distribution and Storage Choosing the Table Distribution Pol…

HAWQ技术解析(一) —— HAWQ简介

一、SQL on Hadoop 过去五年里&#xff0c;许多企业已慢慢开始接受Hadoop生态系统&#xff0c;将它用作其大数据分析堆栈的核心组件。尽管Hadoop生态系统的MapReduce组件是一个强大的典范&#xff0c;但随着时间的推移&#xff0c;MapReduce自身并不是连接存储在Hadoop生态系统…

《HAWQ-V3: Dyadic Neural Network Quantization》论文阅读

HAWQ-V3阅读笔记 Abstract 混合精度量化&#xff0c;integer-only&#xff0c; Methodology 只采用均匀量化 权重对称量化&#xff0c;激活非对称量化&#xff0c;对量化步长S采用静态量化&#xff0c;采用per-channel的量化方式 3.1量化矩阵的乘法与卷积&#xff08;核心…