Android 阶之自定义View，自定义属性（带进度的圆形进度条）

转于：http://blog.csdn.net/xiaanming/article/details/10298163

?

-----------------------------------------------------------------------------------------

?

?

很多的时候，系统自带的View满足不了我们功能的需求，那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View，添加类的构造方法，重写父类View的一些方法，例如onDraw，为了我们自定义的View在一个项目中能够重用，有时候我们需要自定义其属性，举个很简单的例子，我在项目中的多个界面使用我自定义的View，每个界面该自定义View的颜色都不相同，这时候如果没有自定义属性，那我们是不是需要构建不同颜色的View出来呢，这样子我们的代码就会显得很沉厄，所以这时候我们就需要自定义其属性来满足我们不同的需求，自定义属性呢，我们需要在values下建立attrs.xml文件，在其中定义我们需要定义的属性，然后在自定义View中也要做相对应的修改，我们还是用一个小例子来看看自定义View和自定义属性的使用

?

今天带大家来自己定义一个带进度的圆形进度条，我们还是先看一下效果吧

从上面可以看出，我们可以自定义圆环的颜色，圆环进度的颜色，是否显示进度的百分比，进度百分比的颜色，以及进度是实心还是空心等等，这样子是不是很多元化很方便呢？接下来我们就来教大家怎么来定义

?

1.在values下面新建一个attrs.xml，现在里面定义我们的属性，不同的属性对应不同的format，属性对应的format可以参考http://blog.csdn.net/pgalxx/article/details/6766677，介绍的还是比较详细，接下来我贴上我在自定义这个进度条所用到的属性

?

[html]?view plaincopy

?

1. <?xml?version="1.0"?encoding="UTF-8"?>??
2. <resources>??
3. ????<declare-styleable?name="RoundProgressBar">????
4. ????????<attr?name="roundColor"?format="color"/>??
5. ????????<attr?name="roundProgressColor"?format="color"/>??
6. ????????<attr?name="roundWidth"?format="dimension"></attr>??
7. ????????<attr?name="textColor"?format="color"?/>????
8. ????????<attr?name="textSize"?format="dimension"?/>???
9. ????????<attr?name="max"?format="integer"></attr>???
10. ????????<attr?name="textIsDisplayable"?format="boolean"></attr>??
11. ????????<attr?name="style">??
12. ????????????<enum?name="STROKE"?value="0"></enum>??
13. ????????????<enum?name="FILL"?value="1"></enum>??
14. ????????</attr>??
15. ????</declare-styleable>???
16. </resources>??

2.自定义View的属性我们算是定义好了，接下来就是怎么获取属性和代码的编写了，我们需要在构造方法中获取我们自己定义的相关属性，我们先调用context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar)来获取TypedArray，然后从TypedArray获取我们定义的属性，例如

?

?

[java]?view plaincopy

?

1. roundColor?=?mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor,?Color.RED);??
2. ????????roundProgressColor?=?mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor,?Color.GREEN);??
3. ????????textColor?=?mTypedArray.getColor(R.styleable.RoundProgressBar_textColor,?Color.GREEN);??
4. ????????textSize?=?mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize,?15);??
5. ????????roundWidth?=?mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,?5);??
6. ????????max?=?mTypedArray.getInteger(R.styleable.RoundProgressBar_max,?100);??
7. ????????textIsDisplayable?=?mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable,?true);??
8. ????????style?=?mTypedArray.getInt(R.styleable.RoundProgressBar_style,?0);??

上面的代码中，如roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED); getColor方法的第一个参数是我们在XML文件中定义的颜色，如果我们没有给我们自定义的View定义颜色，他就会使用第二个参数中的默认值，即Color.RED

?

?

3.为了方便大家理解，我将自定义View的全部代码贴出来，里面的代码我也有详细的注释

?

[java]?view plaincopy

?

1. package?com.example.roundprogressbar;??
2. ??
3. import?android.content.Context;??
4. import?android.content.res.TypedArray;??
5. import?android.graphics.Canvas;??
6. import?android.graphics.Color;??
7. import?android.graphics.Paint;??
8. import?android.graphics.RectF;??
9. import?android.graphics.Typeface;??
10. import?android.util.AttributeSet;??
11. import?android.util.Log;??
12. import?android.view.View;??
13. ??
14. import?com.example.circlepregress.R;??
15. ??
16. /**?
17. ?*?仿iphone带进度的进度条，线程安全的View，可直接在线程中更新进度?
18. [email protected]?
19. ?*?
20. ?*/??
21. public?class?RoundProgressBar?extends?View?{??
22. ????/**?
23. ?????*?画笔对象的引用?
24. ?????*/??
25. ????private?Paint?paint;??
26. ??????
27. ????/**?
28. ?????*?圆环的颜色?
29. ?????*/??
30. ????private?int?roundColor;??
31. ??????
32. ????/**?
33. ?????*?圆环进度的颜色?
34. ?????*/??
35. ????private?int?roundProgressColor;??
36. ??????
37. ????/**?
38. ?????*?中间进度百分比的字符串的颜色?
39. ?????*/??
40. ????private?int?textColor;??
41. ??????
42. ????/**?
43. ?????*?中间进度百分比的字符串的字体?
44. ?????*/??
45. ????private?float?textSize;??
46. ??????
47. ????/**?
48. ?????*?圆环的宽度?
49. ?????*/??
50. ????private?float?roundWidth;??
51. ??????
52. ????/**?
53. ?????*?最大进度?
54. ?????*/??
55. ????private?int?max;??
56. ??????
57. ????/**?
58. ?????*?当前进度?
59. ?????*/??
60. ????private?int?progress;??
61. ????/**?
62. ?????*?是否显示中间的进度?
63. ?????*/??
64. ????private?boolean?textIsDisplayable;??
65. ??????
66. ????/**?
67. ?????*?进度的风格，实心或者空心?
68. ?????*/??
69. ????private?int?style;??
70. ??????
71. ????public?static?final?int?STROKE?=?0;??
72. ????public?static?final?int?FILL?=?1;??
73. ??????
74. ????public?RoundProgressBar(Context?context)?{??
75. ????????this(context,?null);??
76. ????}??
77. ??
78. ????public?RoundProgressBar(Context?context,?AttributeSet?attrs)?{??
79. ????????this(context,?attrs,?0);??
80. ????}??
81. ??????
82. ????public?RoundProgressBar(Context?context,?AttributeSet?attrs,?int?defStyle)?{??
83. ????????super(context,?attrs,?defStyle);??
84. ??????????
85. ????????paint?=?new?Paint();??
86. ??
87. ??????????
88. ????????TypedArray?mTypedArray?=?context.obtainStyledAttributes(attrs,??
89. ????????????????R.styleable.RoundProgressBar);??
90. ??????????
91. ????????//获取自定义属性和默认值??
92. ????????roundColor?=?mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor,?Color.RED);??
93. ????????roundProgressColor?=?mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor,?Color.GREEN);??
94. ????????textColor?=?mTypedArray.getColor(R.styleable.RoundProgressBar_textColor,?Color.GREEN);??
95. ????????textSize?=?mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize,?15);??
96. ????????roundWidth?=?mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,?5);??
97. ????????max?=?mTypedArray.getInteger(R.styleable.RoundProgressBar_max,?100);??
98. ????????textIsDisplayable?=?mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable,?true);??
99. ????????style?=?mTypedArray.getInt(R.styleable.RoundProgressBar_style,?0);??
100. ??????????
101. ????????mTypedArray.recycle();??
102. ????}??
103. ??????
104. ??
105. ????@Override??
106. ????protected?void?onDraw(Canvas?canvas)?{??
107. ????????super.onDraw(canvas);??
108. ??????????
109. ????????/**?
110. ?????????*?画最外层的大圆环?
111. ?????????*/??
112. ????????int?centre?=?getWidth()/2;?//获取圆心的x坐标??
113. ????????int?radius?=?(int)?(centre?-?roundWidth/2);?//圆环的半径??
114. ????????paint.setColor(roundColor);?//设置圆环的颜色??
115. ????????paint.setStyle(Paint.Style.STROKE);?//设置空心??
116. ????????paint.setStrokeWidth(roundWidth);?//设置圆环的宽度??
117. ????????paint.setAntiAlias(true);??//消除锯齿???
118. ????????canvas.drawCircle(centre,?centre,?radius,?paint);?//画出圆环??
119. ??????????
120. ????????Log.e("log",?centre?+?"");??
121. ??????????
122. ????????/**?
123. ?????????*?画进度百分比?
124. ?????????*/??
125. ????????paint.setStrokeWidth(0);???
126. ????????paint.setColor(textColor);??
127. ????????paint.setTextSize(textSize);??
128. ????????paint.setTypeface(Typeface.DEFAULT_BOLD);?//设置字体??
129. ????????int?percent?=?(int)(((float)progress?/?(float)max)?*?100);??//中间的进度百分比，先转换成float在进行除法运算，不然都为0??
130. ????????float?textWidth?=?paint.measureText(percent?+?"%");???//测量字体宽度，我们需要根据字体的宽度设置在圆环中间??
131. ??????????
132. ????????if(textIsDisplayable?&&?percent?!=?0?&&?style?==?STROKE){??
133. ????????????canvas.drawText(percent?+?"%",?centre?-?textWidth?/?2,?centre?+?textSize/2,?paint);?//画出进度百分比??
134. ????????}??
135. ??????????
136. ??????????
137. ????????/**?
138. ?????????*?画圆弧?，画圆环的进度?
139. ?????????*/??
140. ??????????
141. ????????//设置进度是实心还是空心??
142. ????????paint.setStrokeWidth(roundWidth);?//设置圆环的宽度??
143. ????????paint.setColor(roundProgressColor);??//设置进度的颜色??
144. ????????RectF?oval?=?new?RectF(centre?-?radius,?centre?-?radius,?centre??
145. ????????????????+?radius,?centre?+?radius);??//用于定义的圆弧的形状和大小的界限??
146. ??????????
147. ????????switch?(style)?{??
148. ????????case?STROKE:{??
149. ????????????paint.setStyle(Paint.Style.STROKE);??
150. ????????????canvas.drawArc(oval,?0,?360?*?progress?/?max,?false,?paint);??//根据进度画圆弧??
151. ????????????break;??
152. ????????}??
153. ????????case?FILL:{??
154. ????????????paint.setStyle(Paint.Style.FILL_AND_STROKE);??
155. ????????????if(progress?!=0)??
156. ????????????????canvas.drawArc(oval,?0,?360?*?progress?/?max,?true,?paint);??//根据进度画圆弧??
157. ????????????break;??
158. ????????}??
159. ????????}??
160. ??????????
161. ????}??
162. ??????
163. ??????
164. ????public?synchronized?int?getMax()?{??
165. ????????return?max;??
166. ????}??
167. ??
168. ????/**?
169. ?????*?设置进度的最大值?
170. [email protected]?
171. ?????*/??
172. ????public?synchronized?void?setMax(int?max)?{??
173. ????????if(max?<?0){??
174. ????????????throw?new?IllegalArgumentException("max?not?less?than?0");??
175. ????????}??
176. ????????this.max?=?max;??
177. ????}??
178. ??
179. ????/**?
180. ?????*?获取进度.需要同步?
181. [email protected]?
182. ?????*/??
183. ????public?synchronized?int?getProgress()?{??
184. ????????return?progress;??
185. ????}??
186. ??
187. ????/**?
188. ?????*?设置进度，此为线程安全控件，由于考虑多线的问题，需要同步?
189. ?????*?刷新界面调用postInvalidate()能在非UI线程刷新?
190. [email protected]?
191. ?????*/??
192. ????public?synchronized?void?setProgress(int?progress)?{??
193. ????????if(progress?<?0){??
194. ????????????throw?new?IllegalArgumentException("progress?not?less?than?0");??
195. ????????}??
196. ????????if(progress?>?max){??
197. ????????????progress?=?max;??
198. ????????}??
199. ????????if(progress?<=?max){??
200. ????????????this.progress?=?progress;??
201. ????????????postInvalidate();??
202. ????????}??
203. ??????????
204. ????}??
205. ??????
206. ??????
207. ????public?int?getCricleColor()?{??
208. ????????return?roundColor;??
209. ????}??
210. ??
211. ????public?void?setCricleColor(int?cricleColor)?{??
212. ????????this.roundColor?=?cricleColor;??
213. ????}??
214. ??
215. ????public?int?getCricleProgressColor()?{??
216. ????????return?roundProgressColor;??
217. ????}??
218. ??
219. ????public?void?setCricleProgressColor(int?cricleProgressColor)?{??
220. ????????this.roundProgressColor?=?cricleProgressColor;??
221. ????}??
222. ??
223. ????public?int?getTextColor()?{??
224. ????????return?textColor;??
225. ????}??
226. ??
227. ????public?void?setTextColor(int?textColor)?{??
228. ????????this.textColor?=?textColor;??
229. ????}??
230. ??
231. ????public?float?getTextSize()?{??
232. ????????return?textSize;??
233. ????}??
234. ??
235. ????public?void?setTextSize(float?textSize)?{??
236. ????????this.textSize?=?textSize;??
237. ????}??
238. ??
239. ????public?float?getRoundWidth()?{??
240. ????????return?roundWidth;??
241. ????}??
242. ??
243. ????public?void?setRoundWidth(float?roundWidth)?{??
244. ????????this.roundWidth?=?roundWidth;??
245. ????}??
246. ??
247. ??
248. ??
249. }??

4.通过上面几步我们就实现了自定义View,和自定义View的属性，当然使用过程中还是有一点变化，我们必须在界面布局的最顶层加上

?

?xmlns:android_custom="http://schemas.android.com/apk/res/com.example.circlepregress"这个即命名空间，

?

• 红色部分是自定义属性的前缀，什么意思呢？对于android系统控件我们定义其控件属性是用android:XXX="XXXXXXX",而我们自己定义的就用android_custom:XXX = "XXXXXX"
• 绿色部分则是我们的包的名字

?

通过上面这两步我们就能自己定义属性了,我贴出自定义View在XML中使用情况

?

[java]?view plaincopy

?

1. <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"????
2. ????xmlns:android_custom="http://schemas.android.com/apk/res/com.example.circlepregress"??
3. ????xmlns:tools="http://schemas.android.com/tools"????
4. ????android:layout_width="match_parent"????
5. ????android:layout_height="match_parent"?>????
6. ????
7. ????
8. ????<com.example.roundprogressbar.RoundProgressBar????
9. ????????android:id="@+id/roundProgressBar2"????
10. ????????android:layout_width="80dip"????
11. ????????android:layout_height="80dip"????
12. ????????android:layout_alignLeft="@+id/roundProgressBar1"????
13. ????????android:layout_alignParentBottom="true"????
14. ????????android:layout_marginBottom="78dp"????
15. ????????????
16. ????????????
17. ????????android_custom:roundColor="#D1D1D1"????
18. ????????android_custom:roundProgressColor="@android:color/black"????
19. ????????android_custom:textColor="#9A32CD"????
20. ????????android_custom:textIsDisplayable="false"????
21. ????????android_custom:roundWidth="10dip"????
22. ????????android_custom:textSize="18sp"/>????
23. </RelativeLayout>???

?

?

?

今天就到此结束，如果大家有什么疑问，请留言，我会及时回复大家的

?

项目源码，点击下载

?