Android 自定义UI--电池

首先看一下效果图，

下面看代码：

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

代码已经注释得比较清楚了，大家自己看吧，不懂的方法可以去看一下api。