【IT168技术】从Android 1.6开始，系统设置中的电池使用记录提供了一种简单的自绘Button按钮演示-GraphableButton类，通过GraphableButton我们可以很清晰的了解到前几次Android123讲到的UI开发要点。
1 public class GraphableButton extends Button { //从Button类继承
2
3 private static final String TAG = "GraphableButton";
4
5 static Paint[] sPaint = new Paint[2]; //定义两种颜色
6
7 static {
8
9 sPaint[0] = new Paint();
10
11 sPaint[0].setStyle(Paint.Style.FILL);
12
13 sPaint[0].setColor(0xFF0080FF);
14
15 sPaint[1] = new Paint();
16
17 sPaint[1].setStyle(Paint.Style.FILL);
18
19 sPaint[1].setColor(0xFFFF6060);
20
21 }
22
23 double[] mValues;
24
25 public GraphableButton(Context context, AttributeSet attrs) {
26
27 super(context, attrs);
28
29 }
30
31 public void setValues(double[] values, double maxValue) { //设置显示范围，下文提到
32
33 mValues = values.clone();
34
35 for (int i = 0; i < values.length; i++) {
36
37 mValues[i] /= maxValue;
38
39 }
40
41 }
42
43 @Override
44
45 public void onDraw(Canvas canvas) { //重写onDraw直接绘制
46
47 Log.i(TAG, "onDraw: w = " + getWidth() + ", h = " + getHeight());
48
49 int xmin = getPaddingLeft();
50
51 int xmax = getWidth() - getPaddingRight();
52
53 int ymin = getPaddingTop();
54
55 int ymax = getHeight() - getPaddingBottom();
56
57 int startx = xmin;
58
59 for (int i = 0; i < mValues.length; i++) {
60
61 int endx = xmin + (int) (mValues[i] * (xmax - xmin));
62
63 canvas.drawRect(startx, ymin, endx, ymax, sPaint[i]); //通过canvas绘制范围
64
65 // 该方法原型 drawRect(float left, float top, float right, float bottom, Paint paint)
66
67 startx = endx;
68
69 }
70
71 super.onDraw(canvas);
72
73 }
74
75 }
76
2
3 private static final String TAG = "GraphableButton";
4
5 static Paint[] sPaint = new Paint[2]; //定义两种颜色
6
7 static {
8
9 sPaint[0] = new Paint();
10
11 sPaint[0].setStyle(Paint.Style.FILL);
12
13 sPaint[0].setColor(0xFF0080FF);
14
15 sPaint[1] = new Paint();
16
17 sPaint[1].setStyle(Paint.Style.FILL);
18
19 sPaint[1].setColor(0xFFFF6060);
20
21 }
22
23 double[] mValues;
24
25 public GraphableButton(Context context, AttributeSet attrs) {
26
27 super(context, attrs);
28
29 }
30
31 public void setValues(double[] values, double maxValue) { //设置显示范围，下文提到
32
33 mValues = values.clone();
34
35 for (int i = 0; i < values.length; i++) {
36
37 mValues[i] /= maxValue;
38
39 }
40
41 }
42
43 @Override
44
45 public void onDraw(Canvas canvas) { //重写onDraw直接绘制
46
47 Log.i(TAG, "onDraw: w = " + getWidth() + ", h = " + getHeight());
48
49 int xmin = getPaddingLeft();
50
51 int xmax = getWidth() - getPaddingRight();
52
53 int ymin = getPaddingTop();
54
55 int ymax = getHeight() - getPaddingBottom();
56
57 int startx = xmin;
58
59 for (int i = 0; i < mValues.length; i++) {
60
61 int endx = xmin + (int) (mValues[i] * (xmax - xmin));
62
63 canvas.drawRect(startx, ymin, endx, ymax, sPaint[i]); //通过canvas绘制范围
64
65 // 该方法原型 drawRect(float left, float top, float right, float bottom, Paint paint)
66
67 startx = endx;
68
69 }
70
71 super.onDraw(canvas);
72
73 }
74
75 }
76
调用方法很简单，和普通的Button没有什么区别，这里我们仅仅多定义了setValues方法，Android开发网提醒网哟注意布局文件xml中如何定义，在最下文
1 private GraphableButton mButtons;
2
3 mButtons = (GraphableButton) findViewById(R.id.button0);
4
5 mButtons.setOnClickListener(this); //设置一个按下事件监听
6
7 mButtons.setVisibility(View.INVISIBLE); //设置当前按钮不可见
8
9 mButtons.setText("android123.com欢迎您");
10
11 mButtons.setValues(0,100);
12
13 mButtons.setVisibility(View.VISIBLE); //设置按钮可见
14
2
3 mButtons = (GraphableButton) findViewById(R.id.button0);
4
5 mButtons.setOnClickListener(this); //设置一个按下事件监听
6
7 mButtons.setVisibility(View.INVISIBLE); //设置当前按钮不可见
8
9 mButtons.setText("android123.com欢迎您");
10
11 mButtons.setValues(0,100);
12
13 mButtons.setVisibility(View.VISIBLE); //设置按钮可见
14
下面在layout.xml中如何写呢，这里要写上自己程序完整的package name才能正确被adt识别，相关的具体定义如下:
1 android:id="@+id/button7"
2
3 android:layout_width="fill_parent"
4
5 android:layout_height="0dp"
6
7 android:layout_marginLeft="4dp"
8
9 android:layout_marginRight="4dp"
10
11 android:layout_marginBottom="4dp"
12
13 android:layout_weight="1" />
14
2
3 android:layout_width="fill_parent"
4
5 android:layout_height="0dp"
6
7 android:layout_marginLeft="4dp"
8
9 android:layout_marginRight="4dp"
10
11 android:layout_marginBottom="4dp"
12
13 android:layout_weight="1" />
14
