Button自定义样式、水波纹、按压效果详解
文章目录
- 默认按钮样式
- Background设置颜色
- Background设置Drawable文件
- 设置颜色、圆角
- 设置按压效果
- 拓展
- 水波纹效果
- shape 标签
默认按钮样式
按钮用Button按钮的时候我们会发现,默认的按钮虽然是灰色的,但是它却有一个体验感不错的按压效果,如下图
Background设置颜色
当我们设置按钮 android:background="#2196F3" 属性填入颜色时,会发现,这时按钮颜色虽然比之前默认的灰色好看了些,但是点击时的按钮和你的交互貌似就没那么好了,只能轻微地感觉到好像有那么一点小阴影出现,所以这也不是我们想要的效果
Background设置Drawable文件
设置颜色、圆角
这里我们先在 res 目录下的 drawable 下新建一个Drawable文件 btn_bg.xml ,那么我们现在里面写点东西
- 我们在drawable文件自动生成的 selector 根标签内,新建了一个 item 便签(selector中只能新建这个)
- 然后在 item 标签中新建 shape 标签,也就是形状标签,这里我们先不对 shape 标签内进行任何设置
- 在 shape 标签内 新建 solid(颜色) 便签 和 corners(圆角) 标签
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item><shape><solid android:color="@color/colorPrimary"/><corners android:radius="8dp"/></shape></item></selector>
那我们把这个背景用到Button上
<Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:background="@drawable/btn_bg"android:text="设置Drawable文件" />
效果如图,可以看到这里我们的按钮又变好看了一点(有颜色、有圆角),但是交互感还是不好
设置按压效果
当你需要按压效果或者选中效果的时候,selector标签的作用就体现出来了
- selector 下新建两个 item
- item 设置 android:state_pressed="" 属性,这里面传入 true 或 false,代表一个是按压时的样子,一个是正常显示的样子(所以这里你就可以天马行空了,下文有拓展)
- 你在两个 item 中设置不同的颜色或者样式,应用到 Button 上时,就会有一个按压效果
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="false"><shape><solid android:color="@color/colorPrimary" /><corners android:radius="8dp" /></shape></item><item android:state_pressed="true"><shape><solid android:color="@color/colorAccent" /><corners android:radius="8dp" /></shape></item></selector>
这里可以看到,正常情况下是一个绿色,当我们点击按钮的时候,按钮变成了红色
拓展
水波纹效果
可能有的小伙伴就会说,我就是喜欢那个默认的水波纹效果,那好,满足你的小愿望
只需要在你的Button下加上一条前景色 android:foreground="?selectableItemBackground" 属性即可(问号别丢了),这样你可以设置按钮的背景色,或者按压效果(一起用不明显),再加上这个水波纹效果
Tip:这条属性在View上是有效的,所以说,几乎所有的控件都有这条属性,你甚至可以加在 LinearLayout上。
<Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:background="#2196F3"android:foreground="?selectableItemBackground"android:text="设置有水波纹效果" />
shape 标签
先看一个效果图,是不是觉得还挺炫酷?
这就是我之前在上文按压效果说的,你可以设置成点击改变形状,话不多说,直接上代码
这里相对于之前的按压变色的那个drawable文件只在第二个item下的shape标签里,加了一条:android:shape=“oval” (圆),然后再了个 size (大小)标签
这里也简单的说一下 shape (形状)属性,具体使用还是需要自己去学习,这里只简单提一下
- oval 圆形
- rectangle 方形
- line 线
- ring 环状
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="false"><shape><solid android:color="@color/colorPrimary" /><corners android:radius="8dp" /></shape></item><item android:state_pressed="true"><shape android:shape="oval"><size android:width="10dp" android:height="10dp" /><solid android:color="@color/colorAccent" /><corners android:radius="10dp" /></shape></item></selector>
如果觉得文章还不错,点个赞呗!
Button自定义样式、水波纹、按压效果详解相关推荐
- Android点击水波纹扩散效果整理(附带一个自定义的水波纹效果控件)
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...
- css 波纹扩散_html5 +css3 点击后水波纹扩散效果 兼容移动端
html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
- html移动端语音波纹,html5 +css3 点击后水波纹扩散效果 兼容移动端
html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
- android水平波浪扩散动画,Android实现水波纹扩散效果
本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下 先上图 ?澹∶挥型计??跃湍昧诵"泊?媪恕?/p> 先看一下如何使用这个View. andro ...
- Android: Jetpack Compose如何禁用涟漪(水波纹)效果
系列文章目录 Android: Jetpack Compose如何禁用涟漪(水波纹)效果 Android:使用Jetpack Compose 实现Text控件跑马灯效果 Android:使用Jetpa ...
- HTML5+CSS3小实例:水波纹按钮效果
实例:水波纹按钮效果 技术栈:HTML.CSS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta http-e ...
- Flutter 水波纹动画效果实现
Flutter 水波纹动画效果实现 1. 先上效果图: 2. 实现 2.1 尺寸渐变结合透明度渐变 2.2 多个基本动画效果叠加 3. 总结 1. 先上效果图: 2. 实现 我们将该动画拆成三部分来实 ...
- CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果 背景 通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
- php 自动获取头像,PHP_WordPress中用于获取及自定义头像图片的PHP脚本详解,get_avatar()(获取头像)
get_avat - phpStudy...
WordPress中用于获取及自定义头像图片的PHP脚本详解 get_avatar()(获取头像)get_avatar() 函数用来获取置顶邮箱或者用户的头像代码,在评论列表中非常常用. 这个函数提供 ...
最新文章
- RPC协议之争和选型要点
- 查询已安装rpm包信息
- 自学成为动画师?你真的准备好了吗?
- linux挑战:历史命令_博客挑战:分享您关于社区运作方式的知识
- 前端面试题集锦(二)之CSS部分
- console.log()注意事项。
- php中upload函数,PHP中文件的上传和下载常用函数
- 云计算呼叫中心_云呼叫中心是如何有效保护客户信息的?
- 如何撰写网络营销策划方案?
- java excel 列合并单元格_java怎么操作excel合并单元格
- YOLO版本不兼容,报错AttributeError: Can’t get attribute ‘SPPF’ on <module ‘models.common’
- 小米4C官方/第三方ROM下载
- 新增免费 代理(Proxy)验证助手 自用 支持http/socks
- 无线测量APP开发总结
- 查看一个进程打开了哪些文件的命令
- 温室大棚冬季增温方案,适合自己的才最好
- Ceph分布式存储详述
- 实车、台架功能测试介绍
- 机器学习算法[9]--集成方法之XGBoost原理详解及XGBoost库实现
- 【单片机】心形流水灯の制作指南(保姆级)
热门文章
- 品味树莓派:GPIO Zero库使用入门
- java 实现长轮询(LongPolling)
- 上海大学计算机考研试题,08-09上海大学计算机考研试卷.doc
- 百度专家谈智能硬件测试探索
- java 根据IP地址获取地理位置
- FME之标准分幅cad地形图数据高程点提取与转换为GIS格式
- python监听局域网微信_python3.8 微信发送服务器监控报警消息代码实现
- Mac 如何修改用户名和用户文件夹
- (热学 热力学统计物理 )大题典选--------热力学状态与热力学第一定律
- 求整数 1~100之间含有7或者7的倍数的数一共有多少?分别是什么?