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的点击上色相关推荐

  1. 一些很不错的Android开发技巧

    一些很不错的Android开发技巧,这个项目翻译自 android-tips-tricks 去掉了一些我认为不重要的,对我使用过的东东做了评价,同时翻译了一些自己没有注意到的知识点的文章. ❤️ st ...

  2. Android开发技巧——自定义控件之组合控件

    Android开发技巧--自定义控件之组合控件 我准备在接下来一段时间,写一系列有关Android自定义控件的博客,包括如何进行各种自定义,并分享一下我所知道的其中的技巧,注意点等. 还是那句老话,尽 ...

  3. android开发技巧杂谈

    android开发技巧一 android的一些常用包是发布在国外的,所以一些包,我们下载不下来,我们可以使用阿里云的镜像地址(maven { url 'https://maven.aliyun.com ...

  4. 社区说|常用 Android 开发技巧

    活动时间 4月7日(本周四) 20:00-21:00 活动日程 20:00-20:45 主题分享 常用 Android 开发技巧 李老师的开发技巧私房菜,一定有你没吃过的菜! 重构技巧 常用插件 阅读 ...

  5. Android开发技巧——大图裁剪

    本篇内容是接上篇<Android开发技巧--定制仿微信图片裁剪控件> 的,先简单介绍对上篇所封装的裁剪控件的使用,再详细说明如何使用它进行大图裁剪,包括对旋转图片的裁剪. 裁剪控件的简单使 ...

  6. Android开发技巧——自定义控件之自定义属性

    Android开发技巧--自定义控件之自定义属性 掌握自定义控件是很重要的,因为通过自定义控件,能够:解决UI问题,优化布局性能,简化布局代码. 上一篇讲了如何通过xml把几个控件组织起来,并继承某个 ...

  7. android自定义漂亮按钮样式,Android开发之漂亮Button样式

    开发中各种样式的Button,其实这些样式所有的View都可以共用的,可能对于你改变的只有颜色 所有的都是用代码实现 150CC48D90067F05BFAC966F4EE3E21D.jpg 边框样式 ...

  8. 50个Android开发技巧(09 避免用EditText对日期进行验证)

    我们都知道,在表单中对数据进行验证不但无聊并且easy出错. (原文地址:http://blog.csdn.net/vector_yi/article/details/24424713) 想象一下,一 ...

  9. Android开发技巧!Android开发大佬的百度,美团,快手等大厂Offer收割之旅,附超全教程文档

    想要成为一名优秀的Android开发,你需要一份完备的知识体系,在这里,让我们一起成长为自己所想的那样. 本文参考了目前大部分 Android 应用启动优化的方案,将大家的方案做一个汇总,如果你有这方 ...

  10. Android开发技巧!怒斩获了30家互联网公司offer,大厂直通车!

    Gradle是什么? Gradle是一种构建语言,目前是Android的默认构建工具,我们编写的编译脚本,其实就是玩Gradle的API,所以从它更底层的意义上看,是一个编程框架. 因为涉及的内容很多 ...

最新文章

  1. 数据库概念 MySQL 库操作 表操作 记录操作
  2. Java FileInputStream finalize()方法与示例
  3. qt调用import sys库_Python模块之 sys 模块
  4. python基于opencv的手势识别_怎么在Python3.5 中利用OpenCV实现一个手势识别功能
  5. 2021年国货彩妆品牌推广营销趋势
  6. Step By Step(Lua字符串库)
  7. 《图解算法》第11章之 接下来如何做
  8. python爬取加密qq空间_用python爬取qq空间说说
  9. 程序员在二线城市工作爽吗?
  10. 【audio】耳机插拔/线控按键识别流程
  11. Android 节日短信送祝福(功能篇:1-数据库操作类与自定义ContentProvider)
  12. 派森编程python_派森学python
  13. MySQL数据库修改数据库名的三种方式
  14. 使用树莓派实现动作捕捉、抓拍并存储照片
  15. 怎样使用计算机的桌面助手,360安全卫士如何整理电脑桌面?360桌面助手使用说明...
  16. Fastly 全球规模边缘云计算实践
  17. 高德地图API实现区域立体效果
  18. 【人生杂谈】 - 金钱/名利 贫穷/富贵 健身房定律
  19. 疫情航班同程数据三维可视化
  20. 对不起,你的密码被破解了!

热门文章

  1. 如何在iOS地图上高效的显示大量数据
  2. HDU 1102 Constructing Roads
  3. T-SQL查询处理详解
  4. SpringCloud 微服务消费者之间相互调用的方式
  5. 2018 Wannafly summer camp Day8--区间权值
  6. Cocos2d JS 之消灭星星(十) 关卡配置
  7. 基于C#的socket编程的TCP异步实现
  8. 第五话 Asp.Net MVC 3.0【MVC实战项目の一】
  9. 9I DATAGUARD备库的MRP0进程shutdown
  10. MICAPS系统中云图数据转换为位图的实现(转)