Android 高手進階之自定義View，自定義屬性（帶進度的圓形進度條）

很多的時候，系統自帶的View滿足不了我們功能的需求，那麼我們就需要自己來自定義一個能滿足我們需求的View,自定義View我們需要先繼承View，添加類的構造方法，重寫父類View的一些方法，例如onDraw，為了我們自定義的View在一個項目中能夠重用，有時候我們需要自定義其屬性，舉個很簡單的例子，我在項目中的多個界面使用我自定義的View，每個界面該自定義View的顔色都不相同，這時候如果沒有自定義屬性，那我們是不是需要建構不同顔色的View出來呢，這樣子我們的代碼就會顯得很沉厄，是以這時候我們就需要自定義其屬性來滿足我們不同的需求，自定義屬性呢，我們需要在values下建立attrs.xml檔案，在其中定義我們需要定義的屬性，然後在自定義View中也要做相對應的修改，我們還是用一個小例子來看看自定義View和自定義屬性的使用

今天帶大家來自己定義一個帶進度的圓形進度條，我們還是先看一下效果吧

從上面可以看出，我們可以自定義圓環的顔色，圓環進度的顔色，是否顯示進度的百分比，進度百分比的顔色，以及進度是實心還是空心等等，這樣子是不是很多元化很友善呢？接下來我們就來教大家怎麼來定義

1.在values下面建立一個attrs.xml，現在裡面定義我們的屬性，不同的屬性對應不同的format，屬性對應的format可以參考javascript:void(0)，介紹的還是比較詳細，接下來我貼上我在自定義這個進度條所用到的屬性

[html] 
   view plain
   copy
   
    
   
 
   
 
 
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 plain
   copy
   
    
   
 
   
 
 
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. 15);
5. 5);
6. 100);
7. true);
8. 0);

上面的代碼中，如roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED); getColor方法的第一個參數是我們在XML檔案中定義的顔色，如果我們沒有給我們自定義的View定義顔色，他就會使用第二個參數中的預設值，即Color.RED

3.為了友善大家了解，我将自定義View的全部代碼貼出來，裡面的代碼我也有詳細的注釋

[java] 
   view plain
   copy
   
    
   
 
   
 
 
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. * @author xiaanming
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. 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. 15);
96. 5);
97. 100);
98. true);
99. 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. //設定圓環的顔色
115. //設定空心
116. //設定圓環的寬度
117. true);  //消除鋸齒
118. //畫出圓環
119. 
120. "log", centre + "");
121. 
122. /**
123. * 畫進度百分比
124. */
125. 0);
126. paint.setColor(textColor);
127. paint.setTextSize(textSize);
128. //設定字型
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. "%", centre - textWidth / 2, centre + textSize/2, paint); //畫出進度百分比
134. }
135. 
136. 
137. /**
138. * 畫圓弧 ，畫圓環的進度
139. */
140. 
141. //設定進度是實心還是空心
142. //設定圓環的寬度
143. //設定進度的顔色
144. new RectF(centre - radius, centre - radius, centre
145. //用于定義的圓弧的形狀和大小的界限
146. 
147. switch (style) {
148. case STROKE:{
149. paint.setStyle(Paint.Style.STROKE);
150. 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. 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. * @param max
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. * @return
182. */
183. public synchronized int getProgress() {
184. return progress;
185. }
186. 
187. /**
188. * 設定進度，此為線程安全控件，由于考慮多線的問題，需要同步
189. * 重新整理界面調用postInvalidate()能在非UI線程重新整理
190. * @param progress
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的屬性，當然使用過程中還是有一點變化，我們必須在界面布局的最頂層加上

android_custom="http://schemas.android.com/apk/res/com.example.circlepregress"這個即命名空間，

紅色部分是自定義屬性的字首，什麼意思呢？對于android系統控件我們定義其控件屬性是用android:XXX="XXXXXXX",而我們自己定義的就用android_custom:XXX = "XXXXXX"
綠色部分則是我們的包的名字

通過上面這兩步我們就能自己定義屬性了,我貼出自定義View在XML中使用情況

[java] 
   view plain
   copy
   
    
   
 
   
 
 
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. "http://schemas.android.com/apk/res/com.example.circlepregress"
3. "http://schemas.android.com/tools"
4. "match_parent"
5. "match_parent" >
6. 
7. 
8. <com.example.roundprogressbar.RoundProgressBar
9. "@+id/roundProgressBar2"
10. "80dip"
11. "80dip"
12. "@+id/roundProgressBar1"
13. "true"
14. "78dp"
15. 
16. 
17. "#D1D1D1"
18. "@android:color/black"
19. "#9A32CD"
20. "false"
21. "10dip"
22. "18sp"/>
23. </RelativeLayout>

Android 高手進階之自定義View，自定義屬性（帶進度的圓形進度條）

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯