热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:深入解析Android自定义控件——Button的72种变形技巧

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Android自定义控件系列—Button七十二变相关的知识,希望对你有一定的参考价值。 转载请注明出处:http://www.cnblogs.com

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Android自定义控件系列—Button七十二变相关的知识,希望对你有一定的参考价值。



转载请注明出处:http://www.cnblogs.com/landptf/p/6290791.html

忙了一段时间,终于有时间整理整理之前所用到的一些知识,分享给大家,希望给同学们有些帮助,同时也是对自己的知识有个巩固的过程。

android的开发中比较常用的控件就是Button了,但是我们平时使用Button时是怎样来设置按下和抬起显示不同的效果呢?我想一般的实现方式就是定义一个selector的xml文件,然后在里面根据不同的state来设置不同的图片,但是当Button控件非常多的时候,就要写对应数量的xml文件,导致大码非常臃肿。

今天我们换种方式来改变这个样式,只需要两行代码即可实现按下的效果,同时支持圆角和圆形的按钮的样式。先看下效果图,这是我写的一个demo

 

接下来讲一下主要代码: 
第一步 自定义属性 
在res/values/目录下新建attrs.xml文件


1 xml version="1.0" encoding="utf-8"?>
2 <resources>
3
4 <attr name="backColor" format="color" />
5 <attr name="backColorPress" format="color" />
6 <attr name="backGroundImage" format="reference" />
7 <attr name="backGroundImagePress" format="reference" />
8 <attr name="textColor" format="color" />
9 <attr name="textColorPress" format="color" />
10
11 <declare-styleable name="buttonM">
12 <attr name="backColor" />
13 <attr name="backColorPress" />
14 <attr name="backGroundImage" />
15 <attr name="backGroundImagePress" />
16 <attr name="textColor" />
17 <attr name="textColorPress" />
18 <attr name="fillet" format="boolean" />
19 <attr name="radius" format="float" />
20 <attr name="shape">
21 <enum name="rectangle" value="0" />
22 <enum name="oval" value="1" />
23 <enum name="line" value="2" />
24 <enum name="ring" value="3" />
25 attr>
26 declare-styleable>
27
28 resources>

具体属性的含义在java代码中都有描述 
第二步 创建ButtonM类使其继承Button,代码如下:


1 package com.landptf.view;
2
3 import android.content.Context;
4 import android.content.res.ColorStateList;
5 import android.content.res.TypedArray;
6 import android.graphics.drawable.Drawable;
7 import android.graphics.drawable.GradientDrawable;
8 import android.util.AttributeSet;
9 import android.view.MotionEvent;
10 import android.view.View;
11 import android.widget.Button;
12
13 import com.landptf.R;
14
15 /**
16 * Created by landptf on 2016/10/25.
17 * 自定义Button,支持圆角矩形,圆形按钮等样式,可通过配置文件改变按下后的样式
18 * 若通过代码设置圆角或者圆形,需要先调用setFillet方法将fillet设置为true
19 */
20 public class ButtonM extends Button {
21 private static String TAG = "ButtonM";
22 /**
23 * 按钮的背景色
24 */
25 private int backColor = 0;
26 /**
27 * 按钮被按下时的背景色
28 */
29 private int backColorPress = 0;
30 /**
31 * 按钮的背景图片
32 */
33 private Drawable backGroundDrawable = null;
34 /**
35 * 按钮被按下时显示的背景图片
36 */
37 private Drawable backGroundDrawablePress = null;
38 /**
39 * 按钮文字的颜色
40 */
41 private ColorStateList textColor = null;
42 /**
43 * 按钮被按下时文字的颜色
44 */
45 private ColorStateList textColorPress = null;
46 private GradientDrawable gradientDrawable = null;
47 /**
48 * 是否设置圆角或者圆形等样式
49 */
50 private boolean fillet = false;
51 /**
52 * 标示onTouch方法的返回值,用来解决onClick和onTouch冲突问题
53 */
54 private boolean isCost = true;
55
56 public ButtonM(Context context) {
57 super(context, null);
58 }
59
60 public ButtonM(Context context, AttributeSet attrs) {
61 this(context, attrs, 0);
62 }
63
64 public ButtonM(Context context, AttributeSet attrs, int defStyle) {
65 super(context, attrs, defStyle);
66 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.buttonM, defStyle, 0);
67 if (a != null) {
68 //设置背景色
69 ColorStateList colorList = a.getColorStateList(R.styleable.buttonM_backColor);
70 if (colorList != null) {
71 backColor = colorList.getColorForState(getDrawableState(), 0);
72 if (backColor != 0) {
73 setBackgroundColor(backColor);
74 }
75 }
76 //记录按钮被按下时的背景色
77 ColorStateList colorListPress = a.getColorStateList(R.styleable.buttonM_backColorPress);
78 if (colorListPress != null){
79 backColorPress = colorListPress.getColorForState(getDrawableState(), 0);
80 }
81 //设置背景图片,若backColor与backGroundDrawable同时存在,则backGroundDrawable将覆盖backColor
82 backGroundDrawable = a.getDrawable(R.styleable.buttonM_backGroundImage);
83 if (backGroundDrawable != null){
84 setBackgroundDrawable(backGroundDrawable);
85 }
86 //记录按钮被按下时的背景图片
87 backGroundDrawablePress = a.getDrawable(R.styleable.buttonM_backGroundImagePress);
88 //设置文字的颜色
89 textColor = a.getColorStateList(R.styleable.buttonM_textColor);
90 if (textColor != null){
91 setTextColor(textColor);
92 }
93 //记录按钮被按下时文字的颜色
94 textColorPress = a.getColorStateList(R.styleable.buttonM_textColorPress);
95 //设置圆角或圆形等样式的背景色
96 fillet = a.getBoolean(R.styleable.buttonM_fillet, false);
97 if (fillet){
98 getGradientDrawable();
99 if (backColor != 0) {
100 gradientDrawable.setColor(backColor);
101 setBackgroundDrawable(gradientDrawable);
102 }
103 }
104 //设置圆角矩形的角度,fillet为true时才生效
105 float radius = a.getFloat(R.styleable.buttonM_radius, 0);
106 if (fillet && radius != 0){
107 setRadius(radius);
108 }
109 //设置按钮形状,fillet为true时才生效
110 int shape = a.getInteger(R.styleable.buttonM_shape, 0);
111 if (fillet && shape != 0) {
112 setShape(shape);
113 }
114 a.recycle();
115 }
116 setOnTouchListener(new OnTouchListener() {
117 @Override
118 public boolean onTouch(View arg0, MotionEvent event) {
119 //根据touch事件设置按下抬起的样式
120 return setTouchStyle(event.getAction());
121 }
122 });
123 }
124
125 /**
126 * 根据按下或者抬起来改变背景和文字样式
127 * @param state
128 * @return isCost
129 * 为解决onTouch和onClick冲突的问题
130 * 根据事件分发机制,如果onTouch返回true,则不响应onClick事件
131 * 因此采用isCost标识位,当用户设置了onClickListener则onTouch返回false
132 */
133 private boolean setTouchStyle(int state){
134 if (state == MotionEvent.ACTION_DOWN) {
135 if (backColorPress != 0) {
136 if (fillet){
137 gradientDrawable.setColor(backColorPress);
138 setBackgroundDrawable(gradientDrawable);
139 }else {
140 setBackgroundColor(backColorPress);
141 }
142 }
143 if (backGroundDrawablePress != null) {
144 setBackgroundDrawable(backGroundDrawablePress);
145 }
146 if (textColorPress != null) {
147 setTextColor(textColorPress);
148 }
149 }
150 if (state == MotionEvent.ACTION_UP) {
151 if (backColor != 0) {
152 if (fillet){
153 gradientDrawable.setColor(backColor);
154 setBackgroundDrawable(gradientDrawable);
155 }else {
156 setBackgroundColor(backColor);
157 }
158 }
159 if (backGroundDrawable != null) {
160 setBackgroundDrawable(backGroundDrawable);
161 }
162 if (textColor != null) {
163 setTextColor(textColor);
164 }
165 }
166 return isCost;
167 }
168
169 /**
170 * 重写setOnClickListener方法,解决onTouch和onClick冲突问题
171 * @param l
172 */
173 @Override
174 public void setOnClickListener(OnClickListener l) {
175 super.setOnClickListener(l);
176 isCost = false;
177 }
178
179 /**
180 * 设置按钮的背景色
181 * @param backColor
182 */
183 public void setBackColor(int backColor) {
184 this.backColor = backColor;
185 if (fillet){
186 gradientDrawable.setColor(backColor);
187 setBackgroundDrawable(gradientDrawable);
188 }else {
189 setBackgroundColor(backColor);
190 }
191 }
192
193 /**
194 * 设置按钮被按下时的背景色
195 * @param backColorPress
196 */
197 public void setBackColorPress(int backColorPress) {
198 this.backColorPress = backColorPress;
199 }
200
201 /**
202 * 设置按钮的背景图片
203 * @param backGroundDrawable
204 */
205 public void setBackGroundDrawable(Drawable backGroundDrawable) {
206 this.backGroundDrawable = backGroundDrawable;
207 setBackgroundDrawable(backGroundDrawable);
208 }
209
210 /**
211 * 设置按钮被按下时的背景图片
212 * @param backGroundDrawablePress
213 */
214 public void setBackGroundDrawablePress(Drawable backGroundDrawablePress) {
215 this.backGroundDrawablePress = backGroundDrawablePress;
216 }
217
218 /**
219 * 设置文字的颜色
220 * @param textColor
221 */
222 public void setTextColor(int textColor) {
223 if (textColor == 0) return;
224 this.textColor = ColorStateList.valueOf(textColor);
225 //此处应加super关键字,调用父类的setTextColor方法,否则会造成递归导致内存溢出
226 super.setTextColor(this.textColor);
227 }
228
229 /**
230 * 设置按钮被按下时文字的颜色
231 * @param textColorPress
232 */
233 public void setTextColorPress(int textColorPress) {
234 if (textColorPress == 0) return;
235 this.textColorPress = ColorStateList.valueOf(textColorPress);
236 }
237
238 /**
239 * 设置按钮是否设置圆角或者圆形等样式
240 * @param fillet
241 */
242 public void setFillet(boolean fillet){
243 this.fillet = fillet;
244 getGradientDrawable();
245 }
246
247 /**
248 * 设置圆角按钮的角度
249 * @param radius
250 */
251 public void setRadius(float radius){
252 if (!fillet) return;
253 getGradientDrawable();
254 gradientDrawable.setCornerRadius(radius);
255 setBackgroundDrawable(gradientDrawable);
256 }
257
258 /**
259 * 设置按钮的形状
260 * @param shape
261 */
262 public void setShape(int shape){
263 if (!fillet) return;
264 getGradientDrawable();
265 gradientDrawable.setShape(shape);
266 setBackgroundDrawable(gradientDrawable);
267 }
268
269 private void getGradientDrawable() {
270 if (gradientDrawable == null){
271 gradientDrawable = new GradientDrawable();
272 }
273 }
274
275 }

注释基本上写的比较详细,下面主要说一下这里面涉及的一些知识点 
1 关于onTouch返回值问题,如果返回true表示要消费该点击事件,后续的所有事件都交给他处理,同时onTouchEvent将不会执行,因此onClick也得不到执行,在这里通过重写setOnClickListener设置变量来改变返回值。具体关于View的事件分发机制可以查阅有关文档,网上很多这方面的教程。

2 如果想要通过java代码来设置圆角或者圆形时,必须先设置setFillet(true),然后再设置背景色,形状或者角度等参数。通过xml文件则无限制

最后讲一下怎么使用,这里以设置圆角矩形为例,分别通过xml和java代码实现,其他的可参考源码。

1 xml


1 <com.landptf.view.ButtonM
2 android:id="@+id/btm_radius_color_xml"
3 android:layout_width="0dp"
4 android:layout_height="50dp"
5 android:layout_weight="1"
6 android:gravity="center"
7 android:text="点击改变背景色"
8 landptf:backColor="#ff3300"
9 landptf:backColorPress="#ff33ff"
10 landptf:fillet="true"
11 landptf:radius="30"
12 landptf:textColor="@android:color/white" />

2 java


1 ButtonM btmRadiusColorJava = (ButtonM) findViewById(R.id.btm_radius_color_java);
2 if (btmRadiusColorJava != null) {
3 btmRadiusColorJava.setFillet(true);
4 btmRadiusColorJava.setRadius(30);
5 btmRadiusColorJava.setTextColor(Color.parseColor("#ffffff"));
6 btmRadiusColorJava.setBackColor(Color.parseColor("#ff3300"));
7 btmRadiusColorJava.setBackColorPress(Color.parseColor("#ff33ff"));
8 btmRadiusColorJava.setOnClickListener(new View.OnClickListener() {
9 @Override
10 public void onClick(View v) {
11 Toast.makeText(ButtonMTestActivity.this, "java代码实现", Toast.LENGTH_SHORT).show();
12 }
13 });
14 }

代码已托管到开源中国的码云上,欢迎下载,地址:https://git.oschina.net/landptf/landptf.git



推荐阅读
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • PHP 编程疑难解析与知识点汇总
    本文详细解答了 PHP 编程中的常见问题,并提供了丰富的代码示例和解决方案,帮助开发者更好地理解和应用 PHP 知识。 ... [详细]
  • 本文详细介绍 Go+ 编程语言中的上下文处理机制,涵盖其基本概念、关键方法及应用场景。Go+ 是一门结合了 Go 的高效工程开发特性和 Python 数据科学功能的编程语言。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
author-avatar
_i逗比_985
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有