Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

In the reading page of some reading software, there will always be the icon of battery, which will change with the change of our mobile phone power. You may think of the UI to ask for a picture. You can’t have 100 images on a phone that has 100 battery, but this time we’ll use a custom View to do that.

First let’s take a look at what other apps do

This app is called The Thief Cow of Reading Feeling writing, especially the change of source, which completely avoids copyright issues, but the author doesn’t seem to make any profit from this app

Feel the starting point now with betta fish, tiger teeth like, completely without the atmosphere of reading, full of the taste of money….

Overall analysis, reading the battery is best to do, go to a foreign website to search a hollow battery box, which is filled with how much electricity is left. The battery at the starting point is relatively troublesome. There is a rectangle inside, and different lengths need to be drawn according to different electric quantity. It is quite troublesome, so let's do it today

Let’s first define some of the necessary attributes

public class BatteryView extends View { private int width, height; Private int borderWidth; Private int mMargin = 4; // color private int backgroundColor; Private int batteryLevel = 0; Private RectF headRect; Private Paint Paint = new Paint(); Private Paint insidePaint = new Paint(); public BatteryView(Context context) { this(context, null); } public BatteryView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public BatteryView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); borderWidth = ImageUtil.dp2px(context, 2); height = ImageUtil.dp2px(context, 10); width = height * 2; }}Copy the code

Nothing to talk about, just some width, height, brush, color, spacing

private void init(Context context) { paint.setAntiAlias(true); insidePaint.setAntiAlias(true); Int headHeight = height / 2; headRect = new RectF(width, (height - headHeight) / 2, width + borderWidth, (height - headHeight) / 2 + headHeight); }Copy the code

Let’s initialize it.

paint.setAntiAlias(true);
insidePaint.setAntiAlias(true);
Copy the code

These two lines set the battery border and battery core brush to anti-aliasing, otherwise the edges will look like dogs gnawing.

int headHeight = height / 2;
headRect = new RectF(width, (height - headHeight) / 2,
        width + borderWidth, (height - headHeight) / 2 + headHeight);
Copy the code

The first parameter of RectF is how far the left border is from the left side of the parent layout. The third parameter is how far the right border is from the left side of the parent layout. This makes up the width of our rectangle. The second parameter is the distance between the top border and the parent layout, and the fourth parameter is the distance between the bottom border and the parent layout, which constitutes the height of the rectangle.

Since it’s a custom View, we definitely need to draw the parameters set to it, so we can rewrite onDraw

@SuppressLint("DrawAllocation") @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (width == 0 || mMargin == 0 || batteryLevel == 0) { return; } // paint. SetColor (backgroundColor == 0? Color.BLACK : backgroundColor); / / solid paint. SetStyle (paint. Style. The STROKE). RectF externalRect = new RectF(0, 0, width, height); canvas.drawRect(externalRect, paint); InsidePaint. SetColor (paint. GetColor ())); Int insideWidth = (width-mmargin) * batteryLevel / 100; Rect rect = new Rect(mMargin, mMargin, insideWidth + 1, height - mMargin + 1); canvas.drawRect(rect, insidePaint); // Paint. SetStyle (paint. Style.fill); canvas.drawRect(headRect, paint); }Copy the code

There’s really nothing to talk about, except where the charge rectangle is drawn, but that’s it.

Now that the basic drawing is complete, we need to set a public method to set the power parameters

public void setLevelAndColor(int batteryLevel, int backgroundColor) {
    this.batteryLevel = batteryLevel;
    this.backgroundColor = backgroundColor;
    invalidate();
}
Copy the code

The first parameter is our charge, the second is the color of the battery, and here’s the code

public class BatteryView extends View { private int width, height; Private int borderWidth; Private int mMargin = 4; // color private int backgroundColor; Private int batteryLevel = 0; Private RectF headRect; Private Paint = new Paint(); private Paint insidePaint = new Paint(); public BatteryView(Context context) { this(context, null); } public BatteryView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public BatteryView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); borderWidth = ImageUtil.dp2px(context, 2); height = ImageUtil.dp2px(context, 10); width = height * 2; init(context); } private void init(Context context) { paint.setAntiAlias(true); insidePaint.setAntiAlias(true); Int headHeight = height / 2; headRect = new RectF(width, (height - headHeight) / 2, width + borderWidth, (height - headHeight) / 2 + headHeight); } @SuppressLint("DrawAllocation") @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (width == 0 || mMargin == 0 || batteryLevel == 0) { return; } // paint. SetColor (backgroundColor == 0? Color.BLACK : backgroundColor); / / solid paint. SetStyle (paint. Style. The STROKE). RectF externalRect = new RectF(0, 0, width, height); canvas.drawRect(externalRect, paint); InsidePaint. SetColor (paint. GetColor ())); Int insideWidth = (width-mmargin) * batteryLevel / 100; Rect rect = new Rect(mMargin, mMargin, insideWidth + 1, height - mMargin + 1); canvas.drawRect(rect, insidePaint); // Paint. SetStyle (paint. Style.fill); canvas.drawRect(headRect, paint); } / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * public * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / public void setLevelAndColor (int batteryLevel,  int backgroundColor) { this.batteryLevel = batteryLevel; this.backgroundColor = backgroundColor; invalidate(); }}Copy the code

Let’s see the effect

The first time I turned it on was the power of the system, and the second time I set it to 10.

Okay, that's it. Good-bye to old age commercials