Snackbar样式

2023-12-21 19:08
文章标签 样式 snackbar

本文主要是介绍Snackbar样式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过!

英文原文:Part 3 – Styling Snackbar 


欢迎来到design support library 教程的第三部分。目前为止我们已经在这个系列中讨论了浮动操作按钮 (FAB) 以及 Snackbar 。

Snackbar样式

前一篇文章  中我们看到了如何显示Snackbar,但是今天我们将看到如何显示不同颜色的snackbar,向用户传递更多暗示信息,比如snackbar背景显示成红色表明这是一个警告提示。

实际上,我已经在GDG 应用中用Snackbar替代Crouton,但是Crouton可以提供不同的样式,比如STYLE.ALERT,TYLE.INFO。因此我在思考如何显示相同类型的彩色的snackbar,Gabriele Mariotti在Gist上的分享给了我灵感。这里是我刚刚对GDG应用做的Snackbar 改进 。

1436865972120032.png1436865983111538.png

如何为Snackbar添加背景颜色

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

比如:

 
  1. snackbar.getView().setBackgroundColor(colorId);

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

 
  1. public class ColoredSnackbar {
  2.  
  3.     private static final int red = 0xfff44336;
  4.     private static final int green = 0xff4caf50;
  5.     private static final int blue = 0xff2195f3;
  6.     private static final int orange = 0xffffc107;
  7.  
  8.     private static View getSnackBarLayout(Snackbar snackbar) {
  9.         if (snackbar != null) {
  10.             return snackbar.getView();
  11.         }
  12.         return null;
  13.     }
  14.  
  15.     private static Snackbar colorSnackBar(Snackbar snackbar, int colorId) {
  16.         View snackBarView = getSnackBarLayout(snackbar);
  17.         if (snackBarView != null) {
  18.             snackBarView.setBackgroundColor(colorId);
  19.         }
  20.  
  21.         return snackbar;
  22.     }
  23.  
  24.     public static Snackbar info(Snackbar snackbar) {
  25.         return colorSnackBar(snackbar, blue);
  26.     }
  27.  
  28.     public static Snackbar warning(Snackbar snackbar) {
  29.         return colorSnackBar(snackbar, orange);
  30.     }
  31.  
  32.     public static Snackbar alert(Snackbar snackbar) {
  33.         return colorSnackBar(snackbar, red);
  34.     }
  35.  
  36.     public static Snackbar confirm(Snackbar snackbar) {
  37.         return colorSnackBar(snackbar, green);
  38.     }
  39. }

如何使用?

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

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


这篇关于Snackbar样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/521144

相关文章

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?

在项目开发中,如何公用添加页面和修改页面? <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html><head><title>岗位设置</title><%@ include file="/WEB-INF/jsp/public/common.jspf"%></head><body> <!-- 标

纯css实现checkbox的checked样式

纯css也能实现checked样式 今天使用微信的WEUI的checkbox的时候,发现点击checkbox是有checked和unchecked的变化的,但是想要去获得checkbox的checked状态时,发现event listener里居然没有该checkbox的click之类的事件。这才发现,weui只是纯粹的css样式,没有对应组件的js代码。那么问题来了,没有js事件,weui是如

WebAPI (一)DOM树、DOM对象,操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性(href之类的)(2)、通过style属性操作CSS(3)、通过类名(className)操作CSS(4)、通过classList操作控制CSS(5)、操作表单

Android style(样式), theme(主题)资源

本文内容摘自《疯狂Android讲义 第三版-李刚著作》 样式和主题资源都用于对Android应用进行“美化”,只要充分利用Android应用的样式和主题资源,开发者就可以开发出各种风格的Android应用。 样式资源(style): 如果我们经常需要对某个类型的组件指定大致相似的格式,比如字体,颜色,背景色等,如果次都要为View组件重复指定这些属性,无疑会有大量的工作量,而且不利于项目后

鼠标移入移出,样式修改,显示隐藏提示消息

重要的有三点: 1.a标签中的ishow是自己定义的属性,自己输入值 2.a:hover表示鼠标移上去时, 3.a:hover:after{content:attr(ishow)}表示鼠标移上去后,显示提示消息 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>实践题 </

10Python的Pandas:样式Style

Pandas 提供了多种样式选项,可以让你对数据框的显示进行格式化。这些样式可以帮助突出显示数据中的某些元素、设置颜色、格式化数字等。以下是一些常用的 Pandas 样式示例: 1. 基本样式设置 要为整个数据框应用样式,可以使用 style 属性。例如,你可以为所有的数值设置显示格式: import pandas as pd# 创建示例数据框df = pd.DataFrame({'A':