new一个类继承View

public class BatteryView extends View

定义变量

    private float mPower = 0f;//电量
    private float mBatteryStroke = 2f;

    private float mBatteryHeight = 30f; // 电池的高度
    private float mBatteryWidth = 60f; // 电池的宽度
    private float mCapHeight = 15f;
    private float mCapWidth = 5f;

    private float mPowerPadding = 1;
    private float mPowerHeight = mBatteryHeight - mBatteryStroke - mPowerPadding * 2; // 电池身体的高度
    private float mPowerWidth = mBatteryWidth - mBatteryStroke - mPowerPadding * 2;// 电池身体的总宽度

    private Paint mPaint;
    private RectF mBatteryRect;
    private RectF mCapRect;
    private RectF mPowerRect;

首先初始化Paint setAntiAlias设置抗锯齿 setStrokeWidth（设置画笔粗细度）

    mPaint = new Paint();
    mPaint.setColor(Color.GRAY);
    mPaint.setAntiAlias(true);
    mPaint.setStrokeWidth(mBatteryStroke);

用Paint和RectF构造矩形

RectF一共有四个构造方法： RectF()构造一个无参的矩形 RectF(float left,float top,float right,float bottom)构造一个指定了4个参数的矩形 RectF(Rect F r)根据指定的RectF对象来构造一个RectF对象(对象的左边坐标不变) RectF(Rect r)根据给定的Rect对象来构造一个RectF对象

  mBatteryRect = new RectF(mCapWidth, 0, mBatteryWidth, mBatteryHeight);
        mCapRect = new RectF(
                0,
                (mBatteryHeight - mCapHeight) /2,
                mCapWidth, 
                (mBatteryHeight - mCapHeight ) /2 + mCapHeight);
        
        mPowerRect = new RectF(
                mCapWidth + mBatteryStroke / 2 + mPowerPadding + mPowerWidth * ((100f - mPower) / 100f), // 需要调整左边的位置
                mPowerPadding + mBatteryStroke / 2, // 需要考虑到 画笔的宽度
                mBatteryWidth - mPowerPadding  * 2, 
                mBatteryStroke / 2 + mPowerPadding + mPowerHeight);
    }

onDraw在View上绘制Canvas对象 一般会在onDraw函数 但是onDraw是一个触发事件产生的调用 当组件将要绘制内容时就需要它

简单说下各个函数的作用

canvas.save()：锁画布(为了保存之前的画布状态) canvas.translate//把当前画布的原点移到(x，x)后面的操作都以(x,x)作为参照点，默认原点为(0,0) Paint.Style.FILL：填充内部

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        canvas.translate(mBatteryStroke, mBatteryStroke);      
        mPaint.setStyle(Style.STROKE);
        mPaint.setStrokeWidth(mBatteryStroke);
        canvas.drawRoundRect(mBatteryRect, 2f , 2f, mPaint);// 需要考虑 画笔的宽度 注意他下面不用考虑
       
        mPaint.setStyle(Style.FILL);
        canvas.drawRoundRect(mCapRect, 2f , 2f, mPaint);
       
        mPaint.setStrokeWidth(1);
        canvas.drawRect(mPowerRect, mPaint);
        canvas.restore();
    }

绘制完毕后还要

实现电量的设置

电量不能大于100，以免笔画超出矩形 用RectF重新调整位置，就能显示多少电量了 调整完后调用invalidate()刷新OnDraw()函数中的绘图语句

public void setPower(float power) {
        mPower = power;
        if (mPower > 100) {
            mPower = 100;
        }
        mPowerRect = new RectF(
                mBatteryWidth - mPowerPadding  * 2 - mPowerWidth * mPower / 100f, // 需要调整左边的位置
                mPowerPadding + mBatteryStroke / 2, // 需要考虑到 画笔的宽度
                mBatteryWidth - mPowerPadding  * 2, 
                mBatteryStroke / 2 + mPowerPadding + mPowerHeight);
        invalidate();
    }

调用mBatteryView.setPower(60);

不放图的一律当水贴处理