Android 画个电池出来(Paint和canvas)

1.Android中很多时候都要自己去画一个自定义控件出来，就需要用到Paint和Canvas这两个类。

2.效果图：

　　

3.直接上代码：

　　

  1 public class BatteryView extends View {
  2 
  3     private Paint mBatteryPait;
  4     private Paint mPowerPaint;
  5     private float mBatteryStroke = 2.0f;
  6 
  7     /**
  8      * 屏幕的高宽
  9      * 
 10      * @param context
 11      */
 12     private int measureWidth;
 13     private int measureHeight;
 14 
 15     /**
 16      * 电池参数
 17      * 
 18      * @param context
 19      */
 20     private float mBatteryHeight = 30.0f;// 电池高度
 21     private float mBatteryWidth = 60.0f;// 电池的宽度
 22     private float mCapHeight = 15.0f;
 23     private float mCapWidth = 5.0f;
 24 
 25     /**
 26      * 电池电量
 27      * 
 28      * @param context
 29      */
 30     private float mPowerPadding = 5.0f;
 31     private float mPowerHeight = mBatteryHeight - mBatteryStroke
 32             - mPowerPadding;
 33     private float mPowerWidth = mBatteryWidth - mBatteryStroke - mPowerPadding
 34             * 2;// 电池身体的总宽度
 35     private float mPower = 0f;
 36 
 37     /**
 38      * 矩形
 39      */
 40     private RectF mBatteryRectF;
 41     private RectF mCapRectF;
 42     private RectF mPowerRectF;
 43 
 44     public BatteryView(Context context) {
 45         super(context);
 46         initView();
 47     }
 48 
 49     public BatteryView(Context context, AttributeSet attrs) {
 50         super(context, attrs);
 51         initView();
 52     }
 53 
 54     public BatteryView(Context context, AttributeSet attrs, int defStyle) {
 55         super(context, attrs, defStyle);
 56         initView();
 57     }
 58 
 59     private void initView() {
 60         /**
 61          * 设置电池画笔
 62          */
 63         mBatteryPait = new Paint();
 64         mBatteryPait.setColor(Color.GRAY);
 65         mBatteryPait.setStrokeWidth(mBatteryStroke);
 66         mBatteryPait.setStyle(Style.STROKE);
 67         mBatteryPait.setAntiAlias(true);
 68         /**
 69          * 电量画笔
 70          */
 71         mPowerPaint = new Paint();
 72         mPowerPaint.setColor(Color.RED);
 73         mPowerPaint.setStyle(Style.FILL);
 74         mPowerPaint.setStrokeWidth(mBatteryStroke);
 75         mPowerPaint.setAntiAlias(true);
 76         /**
 77          * 设置电池矩形
 78          */
 79         mBatteryRectF = new RectF(mCapWidth, 0, mCapWidth + mBatteryWidth,
 80                 mBatteryHeight);
 81 
 82         /**
 83          * 设置电池盖矩形
 84          */
 85 
 86         mCapRectF = new RectF(0, mBatteryHeight / 2 - mCapHeight / 2,
 87                 mCapWidth, mBatteryHeight / 2 + mCapHeight / 2);
 88 
 89         /**
 90          * 设置电量的矩形
 91          */
 92 
 93         mPowerRectF = new RectF(mBatteryWidth + mCapWidth - mPowerPadding
 94                 - mPowerWidth, mPowerPadding, mBatteryWidth + mCapWidth
 95                 - mPowerPadding, mBatteryHeight - mPowerPadding);
 96 
 97     }
 98 
 99     @Override
100     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
101         measureHeight = MeasureSpec.getSize(heightMeasureSpec);
102         measureWidth = MeasureSpec.getSize(widthMeasureSpec);
103 
104         setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
105     }
106 
107     @Override
108     protected void onDraw(Canvas canvas) {
109         super.onDraw(canvas);
110         canvas.save();
111         canvas.translate(measureWidth / 2, measureHeight / 2);
112         canvas.drawRoundRect(mBatteryRectF, 2.0f, 2.0f, mBatteryPait);
113         canvas.drawRoundRect(mCapRectF, 2.0f, 2.0f, mBatteryPait);
114         canvas.drawRect(mPowerRectF, mPowerPaint);
115         canvas.restore();
116     }
117 }

在XML中显示这个电池形状：

　　

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context=".MainActivity" >
 7 
 8     <com.example.battery.view.BatteryView
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent" />
11 
12 </LinearLayout>

 

posted @ 2014-11-06 22:33  perfect亮  阅读(1803)  评论(0)  编辑  收藏  举报