Android开发技巧:给Button的点击上色
UI设计中,按钮一般都会有多个状态,比如:聚焦、点击等,不同的状态必须显示不同的呈现形式(比如颜色、形状的改变),这样用户才能感觉到按钮被成功选中、点击了,否则用户体验就会非常差了。
本篇文章就简单地描述一下Android开发中,如何动态改变Button状态切换时的背景。
Android的UI设计中,默认情况下,系统会为Button的点击实现一个默认的背景切换。
例如下面这样的一个Button:
1
2
3
|
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" />
|
用户在点击Button的时候,会有一个蓝色外框显示出来,表明Button被点击了。如图所示:
但是,如果想为Button添加自定义的图片背景,如:
1
|
android:background="@drawable/upload"
|
那么,当你点击Button的时候会发现,Button啥反应都没有,在用户点击的时候Button的背景没有任何变化,用户无法知道到底点击成功了没有,所以,这不是一个好的用户体验。
当然,这种情况可以考虑使用ImageButton,如:
1
2
3
4
|
< ImageButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:src = "@drawable/upload" />
|
ImageButton会将src所指的图片缩小放入Button的方框内中央显示,Button点击前后的显示效果如图所示:
上面是采用系统默认的Button点击效果,那么,如果期望自己定义Button的点击效果,该如何实现呢?下面,我将介绍两种在Button被点击时改变背景的方式,一种是采用多张背景图片切换的方式,另一种是采用shape来定义Button状态切换的背景显示。
1. 多张背景图片切换
首先,为Button准备两张背景图片,一张是Button未点击时显示的图片,另一张是Button被点击时显示的图片,如图所示:
然后,在工程的res/drawable目录下创建一个 xml 文件,这里命名为:button_selector.xml
内容如下:
1
2
3
4
5
6
7
8
9
|
<? xml version = "1.0" encoding = "utf-8" ?>
< selector xmlns:android = "http://schemas.android.com/apk/res/android" >
< item
android:state_pressed = "true"
android:drawable = "@drawable/up_pressed" />
< item
android:state_pressed = "false"
android:drawable = "@drawable/up" />
</ selector >
|
说明:这里的selector标签就相当与Button状态的选择器,每一个item子项代表着Button的一种状态,这里我只选取了两种状态做示例,一种是Button被点击,另一种是Button未被点击。全部的Button状态可以参考Google Android Development相关网页:StateListDrawable
然后,在Button的标签中,把 background 属性的值改为 button_selector 即可:
1
|
android:background="@drawable/button_selector"
|
可以运行程序试试,当点击Button后,是不是Button的背景从左图变化成为右图了?
这种方法是比较直观简单的方法,在实际的工程中也大量使用,但也有一个缺陷,必须为所有的Button准备多张背景图片,为每一个状态准备一张,加大了UI设计的工作量,也加大了程序的大小。
2. 通过shape来自定义Button的UI显示
首先,定义两个xml文件,分别为shape_normal.xml ,shape_pressed.xml
文件中,定义shape的属性,shape的原理参考Google Android官方文档:
(1)shape_normal.xml
1
2
3
4
5
6
7
8
|
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape = "rectangle" >
< gradient
android:startColor = "#808080"
android:endColor = "#808080"
android:angle = "-90" />
</ shape >
|
(2) shape_pressed.xml
1
2
3
4
5
6
7
8
|
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape = "rectangle" >
< gradient
android:startColor = "#FF7F00"
android:endColor = "#EE7600"
android:angle = "-90" />
</ shape >
|
然后,依然定义一个 button_selector.xml文件,只不过该selector的android:drawable所指的内容,由图片改为shape文件。
1
2
3
4
5
6
7
8
9
10
|
<? xml version = "1.0" encoding = "utf-8" ?>
< selector xmlns:android = "http://schemas.android.com/apk/res/android" >
< item
android:state_pressed = "true"
android:drawable = "@drawable/shape_pressed" />
< item
android:state_pressed = "false"
android:drawable = "@drawable/shape_normal" />
</ selector >
|
然后,将所需的Button的background依然指向该selector文件,即可实现自定义Button点击的背景切换效果.
采用这种方式的Button点击前后的效果如图所示:
shape可以定义的内容很丰富,包括圆角的设置,线条的粗细等等,这里不一一演示,可以自己修改后测试效果。
本文转自 Jhuster 51CTO博客,原文链接:http://blog.51cto.com/ticktick/1260857,如需转载请自行联系原作者
ImageButton也可以采用这种方法来自定义Button点击的背景颜色切换效果,不过要注意为ImageButton添加一个android:padding属性,使得src的图片与Button的边界有一定的距离,这样才能动态改变背景,因为ImageButton能改变的颜色只是src图片以外的背景区域,图片本身的颜色是不会变的。
1
2
3
4
5
6
7
|
< ImageButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:src = "@drawable/upload_pressed"
android:padding = "5dp"
android:layout_centerVertical = "true"
android:background = "@drawable/button_selector" />
|
效果如图:
Android开发技巧:给Button的点击上色相关推荐
- 一些很不错的Android开发技巧
一些很不错的Android开发技巧,这个项目翻译自 android-tips-tricks 去掉了一些我认为不重要的,对我使用过的东东做了评价,同时翻译了一些自己没有注意到的知识点的文章. ❤️ st ...
- Android开发技巧——自定义控件之组合控件
Android开发技巧--自定义控件之组合控件 我准备在接下来一段时间,写一系列有关Android自定义控件的博客,包括如何进行各种自定义,并分享一下我所知道的其中的技巧,注意点等. 还是那句老话,尽 ...
- android开发技巧杂谈
android开发技巧一 android的一些常用包是发布在国外的,所以一些包,我们下载不下来,我们可以使用阿里云的镜像地址(maven { url 'https://maven.aliyun.com ...
- 社区说|常用 Android 开发技巧
活动时间 4月7日(本周四) 20:00-21:00 活动日程 20:00-20:45 主题分享 常用 Android 开发技巧 李老师的开发技巧私房菜,一定有你没吃过的菜! 重构技巧 常用插件 阅读 ...
- Android开发技巧——大图裁剪
本篇内容是接上篇<Android开发技巧--定制仿微信图片裁剪控件> 的,先简单介绍对上篇所封装的裁剪控件的使用,再详细说明如何使用它进行大图裁剪,包括对旋转图片的裁剪. 裁剪控件的简单使 ...
- Android开发技巧——自定义控件之自定义属性
Android开发技巧--自定义控件之自定义属性 掌握自定义控件是很重要的,因为通过自定义控件,能够:解决UI问题,优化布局性能,简化布局代码. 上一篇讲了如何通过xml把几个控件组织起来,并继承某个 ...
- android自定义漂亮按钮样式,Android开发之漂亮Button样式
开发中各种样式的Button,其实这些样式所有的View都可以共用的,可能对于你改变的只有颜色 所有的都是用代码实现 150CC48D90067F05BFAC966F4EE3E21D.jpg 边框样式 ...
- 50个Android开发技巧(09 避免用EditText对日期进行验证)
我们都知道,在表单中对数据进行验证不但无聊并且easy出错. (原文地址:http://blog.csdn.net/vector_yi/article/details/24424713) 想象一下,一 ...
- Android开发技巧!Android开发大佬的百度,美团,快手等大厂Offer收割之旅,附超全教程文档
想要成为一名优秀的Android开发,你需要一份完备的知识体系,在这里,让我们一起成长为自己所想的那样. 本文参考了目前大部分 Android 应用启动优化的方案,将大家的方案做一个汇总,如果你有这方 ...
- Android开发技巧!怒斩获了30家互联网公司offer,大厂直通车!
Gradle是什么? Gradle是一种构建语言,目前是Android的默认构建工具,我们编写的编译脚本,其实就是玩Gradle的API,所以从它更底层的意义上看,是一个编程框架. 因为涉及的内容很多 ...
最新文章
- 数据库概念 MySQL 库操作 表操作 记录操作
- Java FileInputStream finalize()方法与示例
- qt调用import sys库_Python模块之 sys 模块
- python基于opencv的手势识别_怎么在Python3.5 中利用OpenCV实现一个手势识别功能
- 2021年国货彩妆品牌推广营销趋势
- Step By Step(Lua字符串库)
- 《图解算法》第11章之 接下来如何做
- python爬取加密qq空间_用python爬取qq空间说说
- 程序员在二线城市工作爽吗?
- 【audio】耳机插拔/线控按键识别流程
- Android 节日短信送祝福(功能篇:1-数据库操作类与自定义ContentProvider)
- 派森编程python_派森学python
- MySQL数据库修改数据库名的三种方式
- 使用树莓派实现动作捕捉、抓拍并存储照片
- 怎样使用计算机的桌面助手,360安全卫士如何整理电脑桌面?360桌面助手使用说明...
- Fastly 全球规模边缘云计算实践
- 高德地图API实现区域立体效果
- 【人生杂谈】 - 金钱/名利 贫穷/富贵 健身房定律
- 疫情航班同程数据三维可视化
- 对不起,你的密码被破解了!