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>