“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

New A class inherits View

public class BatteryView extends View
Copy the code

Define variables

    private float mPower = 0f;/ / power
    private float mBatteryStroke = 2f;

    private float mBatteryHeight = 30f; // Battery height
    private float mBatteryWidth = 60f; // Battery width
    private float mCapHeight = 15f;
    private float mCapWidth = 5f;

    private float mPowerPadding = 1;
    private float mPowerHeight = mBatteryHeight - mBatteryStroke - mPowerPadding * 2; // Battery body height
    private float mPowerWidth = mBatteryWidth - mBatteryStroke - mPowerPadding * 2;// Total width of battery body
Copy the code

    private Paint mPaint;
    private RectF mBatteryRect;
    private RectF mCapRect;
    private RectF mPowerRect;
Copy the code

I’m going to initialize Paint setAntiAlias and set the antialiasing setStrokeWidth

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

withPaintandRectFTo construct the rectangular

There are four constructors of RectF: RectF() constructs a RectF(float left,float top,float right,float bottom) constructs a RectF(Rect F) with four parameters specified R) constructs a RectF object from the specified RectF object (the left coordinate of the object remains unchanged) RectF(Rect r) constructs a RectF object from the given Rect object

  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), // Need to adjust the left position
                mPowerPadding + mBatteryStroke / 2.// The width of the brush needs to be considered
                mBatteryWidth - mPowerPadding  * 2, 
                mBatteryStroke / 2 + mPowerPadding + mPowerHeight);
    }
Copy the code

OnDraw draws the Canvas object on the View normally in the onDraw function but onDraw is a call that triggers the event that’s needed when the component is going to draw something

Just a little bit about what each function does

All operations that move the origin of the current canvas after (x,x) use (x,x) as the reference point. The default origin is (0,0) paint.style.fill: FILL the interior

 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);// The width of the brush needs to be considered
       
        mPaint.setStyle(Style.FILL);
        canvas.drawRoundRect(mCapRect, 2f , 2f, mPaint);
       
        mPaint.setStrokeWidth(1);
        canvas.drawRect(mPowerRect, mPaint);
        canvas.restore();
    }
Copy the code

I want it after I’ve drawn it

Realize the setting of electric quantity

The power should not be greater than 100, so that the strokes do not exceed the rectangle. RectF will reset the position to show how much power you have. Then call invalidate() to refresh the drawing statement in OnDraw()

public void setPower(float power) {
        mPower = power;
        if (mPower > 100) {
            mPower = 100;
        }
        mPowerRect = new RectF(
                mBatteryWidth - mPowerPadding  * 2 - mPowerWidth * mPower / 100f.// Need to adjust the left position
                mPowerPadding + mBatteryStroke / 2.// The width of the brush needs to be considered
                mBatteryWidth - mPowerPadding  * 2, 
                mBatteryStroke / 2 + mPowerPadding + mPowerHeight);
        invalidate();
    }
Copy the code

Call mBatteryView. SetPower (60);

Do not put the map shall be treated as water paste