Android 自訂UI--電池

標籤：

 首先看一下，

  下面看代碼：

 

[html] view plaincopy 

1. /**  
2.  *   
3.  */  
4. package com.example.batterydemo;  
5.   
6. import android.content.Context;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.Paint;  
10. import android.graphics.Paint.Style;  
11. import android.graphics.RectF;  
12. import android.util.AttributeSet;  
13. import android.view.View;  
14.   
15. /**  
16.  * @author kince  
17.  * @category 自訂View電池  
18.  * @time 2014.2.13  
19.  * @qq 543781062  
20.  *   
21.  */  
22. public class BatteryView extends View {  
23.   
24.     /**  
25.      * 畫筆資訊  
26.      */  
27.     private Paint mBatteryPaint;  
28.     private Paint mPowerPaint;  
29.     private float mBatteryStroke = 2f;  
30.     /**  
31.      * 螢幕高寬  
32.      */  
33.     private int measureWidth;  
34.     private int measureHeigth;  
35.     /**  
36.      *   
37.      * 電池參數  
38.      */  
39.     private float mBatteryHeight = 30f; // 電池的高度  
40.     private float mBatteryWidth = 60f; // 電池的寬度  
41.     private float mCapHeight = 15f;  
42.     private float mCapWidth = 5f;  
43.     /**  
44.      *   
45.      * 電池電量  
46.      */  
47.     private float mPowerPadding = 1;  
48.     private float mPowerHeight = mBatteryHeight - mBatteryStroke  
49.             - mPowerPadding * 2; // 電池身體的高度  
50.     private float mPowerWidth = mBatteryWidth - mBatteryStroke - mPowerPadding  
51.             * 2;// 電池身體的總寬度  
52.     private float mPower = 0f;  
53.     /**  
54.      *   
55.      * 矩形  
56.      */  
57.     private RectF mBatteryRect;  
58.     private RectF mCapRect;  
59.     private RectF mPowerRect;  
60.   
61.     public BatteryView(Context context) {  
62.         super(context);  
63.         initView();  
64.     }  
65.   
66.     public BatteryView(Context context, AttributeSet attrs) {  
67.         super(context, attrs);  
68.         initView();  
69.     }  
70.   
71.     public BatteryView(Context context, AttributeSet attrs, int defStyleAttr) {  
72.         super(context, attrs, defStyleAttr);  
73.         initView();  
74.     }  
75.   
76.     public void initView() {  
77.         /**  
78.          * 設定電池畫筆  
79.          */  
80.         mBatteryPaint = new Paint();  
81.         mBatteryPaint.setColor(Color.GRAY);  
82.         mBatteryPaint.setAntiAlias(true);  
83.         mBatteryPaint.setStyle(Style.STROKE);  
84.         mBatteryPaint.setStrokeWidth(mBatteryStroke);  
85.         /**  
86.          * 設定電量畫筆  
87.          */  
88.         mPowerPaint = new Paint();  
89.         mPowerPaint.setColor(Color.RED);  
90.         mPowerPaint.setAntiAlias(true);  
91.         mPowerPaint.setStyle(Style.FILL);  
92.         mPowerPaint.setStrokeWidth(mBatteryStroke);  
93.         /**  
94.          * 設定電池矩形  
95.          */  
96.         mBatteryRect = new RectF(mCapWidth, 0, mBatteryWidth, mBatteryHeight);  
97.         /**  
98.          * 設定電池蓋矩形  
99.          */  
100.         mCapRect = new RectF(0, (mBatteryHeight - mCapHeight) / 2, mCapWidth,  
101.                 (mBatteryHeight - mCapHeight) / 2 + mCapHeight);  
102.         /**  
103.          * 設定電量矩形  
104.          */  
105.         mPowerRect = new RectF(mCapWidth + mBatteryStroke / 2 + mPowerPadding  
106.                 + mPowerWidth * ((100f - mPower) / 100f), // 需要調整左邊的位置  
107.                 mPowerPadding + mBatteryStroke / 2, // 需要考慮到 畫筆的寬度  
108.                 mBatteryWidth - mPowerPadding * 2, mBatteryStroke / 2  
109.                         + mPowerPadding + mPowerHeight);  
110.     }  
111.   
112.     @Override  
113.     protected void onDraw(Canvas canvas) {  
114.         super.onDraw(canvas);  
115.         canvas.save();  
116.         canvas.translate(measureWidth / 2, measureHeigth / 2);  
117.         canvas.drawRoundRect(mBatteryRect, 2f, 2f, mBatteryPaint); // 畫電池輪廓需要考慮 畫筆的寬度  
118.         canvas.drawRoundRect(mCapRect, 2f, 2f, mBatteryPaint);// 畫電池蓋  
119.         canvas.drawRect(mPowerRect, mPowerPaint);// 畫電量  
120.         canvas.restore();  
121.     }  
122.       
123.     @Override  
124.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
125.         measureWidth = MeasureSpec.getSize(widthMeasureSpec);  
126.         measureHeigth = MeasureSpec.getSize(heightMeasureSpec);  
127.         setMeasuredDimension(measureWidth, measureHeigth);  
128.     }  
129.   
130.     /**]  
131.      * @category 設定電池電量  
132.      * @param power  
133.      */  
134.     public void setPower(float power) {  
135.         mPower = power;  
136.         if (mPower < 0) {  
137.             mPower = 0;  
138.         }  
139.         mPowerRect = new RectF(mCapWidth + mBatteryStroke / 2 + mPowerPadding  
140.                 + mPowerWidth * ((100f - mPower) / 100f), // 需要調整左邊的位置  
141.                 mPowerPadding + mBatteryStroke / 2, // 需要考慮到 畫筆的寬度  
142.                 mBatteryWidth - mPowerPadding * 2, mBatteryStroke / 2  
143.                         + mPowerPadding + mPowerHeight);  
144.         invalidate();  
145.     }  
146.   
147. }  

  代碼已經注釋得比較清楚了，大家自己看吧，不懂的方法可以去看一下api。

Android 自訂UI--電池