Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how Android simulates Huawei system upgrade progress bar". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how Android simulates Huawei system upgrade progress bar".

Let's start with the implementation of the dotted line progress bar. First, look at a picture:

Implementation steps

You can think about how this progress bar is realized. There are a variety of methods on the Internet, and some people use path's lineTo () method to achieve a similar effect. But personally, I think canvas's drawArc method is also a good choice, and what is suitable for you is the best.

Canvas.drawArc (rectF, 0, process, false, mPaint)

After reading a lot of articles, I found that changing the style of paint is the easiest and easiest way to use it. Just set up an effect for paint.

1. Add dotted line effect to paint with DashPathEffect DashPathEffect dashPathEffect = new DashPathEffect (new float [] {8,6}, 0); mPaintBack.setPathEffect (dashPathEffect)

When you build the project, the result is as follows:

If you can achieve this effect, you will know that if you have read my first two articles, the following steps will be simple, just add a progress bar and animation effects.

Private void drawBack (Canvas canvas) {RectF rectF = new RectF (strokeWidth, strokeWidth, getWidth ()-strokeWidth, getHeight ()-strokeWidth); PathEffect effects = new DashPathEffect (new float [] {8,6}, 0); mPaintBack.setPathEffect (effects); canvas.drawArc (rectF, 0360, false, mPaintBack);} 2. Draw a progress bar

The progress bar is exactly the same as the background, except that the brush color and the number of dots are not the same.

The code is as follows:

Private void drawProgress (Canvas canvas) {RectF rectF = new RectF (strokeWidth, strokeWidth, getWidth ()-strokeWidth, getHeight ()-strokeWidth); PathEffect effects = new DashPathEffect (new float [] {8,6}, 0); mPaint.setPathEffect (effects); canvas.drawArc (rectF, 0, process, false, mPaint);} 3. Draw text

The next step is to draw the text to achieve the effect of centered text. The idea is to calculate the center of the circle and call the method of canvas.drawText to draw text on the canvas. There is no need to update the progress text here, so it is easier.

10.0.0 below EMUI is the same way, just add 55 to the Y coordinate and move it down a little bit.

/ / draw text private void drawText (Canvas canvas) {int mTxtWidth = getTextWidth (); int mTxtHeight = getTextHeight (); int x = getWidth () / 2-mTxtWidth / 2; int y = getHeight () / 2 + mTxtHeight / 4; canvas.drawText (getResources (). GetString (R.string.defaultTextEmui), x, y, mPaintText) } / / draw the following text private void drawTextBlow (Canvas canvas) {int mTxtWidth = getTextWidthBlow (); int mTxtHeight = getTextHeight (); int x = getWidth () / 2-mTxtWidth / 2; int y = getHeight () / 2 + mTxtHeight / 4 + 55; canvas.drawText (getResources (). GetString (R.string.defaultTextBelow), x, y, mPaintTextLevel);} 4. Add animation effects / * set animation effects * / public void start () {ValueAnimator valueAnimator = ValueAnimator.ofInt (0360); valueAnimator.setDuration (duration); valueAnimator.setInterpolator (new LinearInterpolator ()); valueAnimator.addUpdateListener (animation-> {process = (int) animation.getAnimatedValue (); invalidate ();}); valueAnimator.start () }

Final result:

Complete code package com.example.floatingwindow.widget; import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.DashPathEffect;import android.graphics.Paint;import android.graphics.PathEffect;import android.graphics.RectF;import android.util.AttributeSet;import android.util.TypedValue;import android.view.View;import android.view.animation.LinearInterpolator; import androidx.annotation.Nullable; import com.example.floatingwindow.R; public class DottedLineProgressBar extends View {private Paint mPaint; private Paint mPaintBack; private Paint mPaintText Private Paint mPaintTextLevel; private int strokeWidth = 30; private int textSize = 22; private int textSizeBlow = 15; private long duration = 3500; private int process; public DottedLineProgressBar (Context context) {super (context); init ();} public DottedLineProgressBar (Context context, @ Nullable AttributeSet attrs) {super (context, attrs); init () } public DottedLineProgressBar (Context context, @ Nullable AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); init ();} public void setStrokeWidth (int width) {strokeWidth = width;} public void setTextSize (int textSize) {this.textSize = textSize;} public void setDuration (long duration) {this.duration = duration } public void setTextSizeBlow (int textSizeBlow) {this.textSizeBlow = textSizeBlow;} / / initialize brush private void init () {mPaintBack = new Paint (); / / rounded rectangle mPaintBack.setColor (getResources (). GetColor (R.color.gray)); / / rounded rectangular color mPaintBack.setAntiAlias (true); / / Anti-aliasing mPaintBack.setStyle (Paint.Style.STROKE) / / set brush style mPaintBack.setStrokeWidth (strokeWidth); / / set brush width mPaint = new Paint (); mPaint.setColor (getResources (). GetColor (R.color.blue)); mPaint.setAntiAlias (true); mPaint.setStyle (Paint.Style.STROKE); mPaint.setStrokeWidth (strokeWidth); mPaintText = new Paint (); mPaintText.setAntiAlias (true) MPaintText.setStyle (Paint.Style.FILL); mPaintText.setColor (getResources (). GetColor (R.color.blue)); mPaintText.setTextSize (sp2px (textSize)); mPaintTextLevel = new Paint (); mPaintTextLevel.setAntiAlias (true); mPaintTextLevel.setStyle (Paint.Style.FILL); mPaintTextLevel.setColor (getResources (). GetColor (R.color.gray)); mPaintTextLevel.setTextSize (sp2px (textSizeBlow)) } @ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); drawBack (canvas); drawProgress (canvas); drawText (canvas); drawTextBlow (canvas);} private void drawBack (Canvas canvas) {RectF rectF = new RectF (strokeWidth, strokeWidth, getWidth ()-strokeWidth, getHeight ()-strokeWidth); PathEffect effects = new DashPathEffect (new float [] {8,6}, 0) MPaintBack.setPathEffect (effects); canvas.drawArc (rectF, 0360, false, mPaintBack);} private void drawProgress (Canvas canvas) {RectF rectF = new RectF (strokeWidth, strokeWidth, getWidth ()-strokeWidth, getHeight ()-strokeWidth); PathEffect effects = new DashPathEffect (new float [] {8,6}, 0); mPaint.setPathEffect (effects); canvas.drawArc (rectF, 0, process, false, mPaint) } / / draw text private void drawText (Canvas canvas) {int mTxtWidth = getTextWidth (); int mTxtHeight = getTextHeight (); int x = getWidth () / 2-mTxtWidth / 2; int y = getHeight () / 2 + mTxtHeight / 4; canvas.drawText (getResources (). GetString (R.string.defaultTextEmui), x, y, mPaintText) } / / draw the following text private void drawTextBlow (Canvas canvas) {int mTxtWidth = getTextWidthBlow (); int mTxtHeight = getTextHeight (); int x = getWidth () / 2-mTxtWidth / 2; int y = getHeight () / 2 + mTxtHeight / 4 + 55; canvas.drawText (getResources (). GetString (R.string.defaultTextBelow), x, y, mPaintTextLevel) } private int getTextWidth () {String text = getResources () .getString (R.string.defaultTextEmui); return (int) mPaintText.measureText (text, 0, text.length ());} private int getTextWidthBlow () {String text = getResources () .getString (R.string.defaultTextBelow); return (int) mPaintTextLevel.measureText (text, 0, text.length ()) } private int getTextHeight () {Paint.FontMetrics fm = mPaintText.getFontMetrics (); return (int) Math.ceil (fm.descent-fm.ascent);} private int sp2px (int sp) {return (int) TypedValue.applyDimension (TypedValue.COMPLEX_UNIT_SP, sp, getResources (). GetDisplayMetrics ()) } / * animate effects * / public void start () {ValueAnimator valueAnimator = ValueAnimator.ofInt (0360); valueAnimator.setDuration (duration); valueAnimator.setInterpolator (new LinearInterpolator ()); valueAnimator.addUpdateListener (animation-> {process = (int) animation.getAnimatedValue (); invalidate ();}); valueAnimator.start () }}

Kotlin call:

Class MainActivity: AppCompatActivity () {override fun onCreate (savedInstanceState: Bundle?) {super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) dottedLineProgressBar.post {dottedLineProgressBar.start ()}

XML:

The above is all the contents of the article "how to simulate the implementation of Huawei system upgrade Progress Bar by Android". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.