ProgressBar(progress bar)


Introduction to this section:

This section brings you the ProgressBar (progress bar) in the basic UI control of Android. ProgressBar has many application scenarios, such as When the user logs in, the background is sending requests and waiting for the server to return information. At this time, the progress bar will be used; or when making some comparisons Time-consuming operations require a long wait. If there is no prompt at this time, the user may think that the program Carsh or the phone has crashed. , this will greatly reduce the user experience, so where time-consuming operations are required, add a progress bar to let the user know the current program During execution, the user can also be intuitively informed of the execution progress of the current task, etc.! Using a progress bar can bring me such convenience! Okay, let’s start explaining the content of this section~ By the way, ProgressBar official API document: ProgressBar

1. Explanation of common attributes and basic examples

From the official document, we saw such a class relationship diagram :

1.png

ProgressBar inherits from the View class, and its direct subclasses include AbsSeekBar and ContentLoadingProgressBar. Among them, the subclasses of AbsSeekBar include SeekBar and RatingBar. It can be seen that these two are also implemented based on ProgressBar.

Detailed explanation of common attributes:

  • android:max: The maximum value of the progress bar
  • android:progress: The progress bar has completed the progress value
  • android:progressDrawable: Set the Drawable object corresponding to the track
  • android:indeterminate: If set to true, the progress bar will not accurately display the progress
  • android:indeterminateDrawable: Set the Drawable object of the progress bar that does not display progress
  • android:indeterminateDuration: Set the duration of the progress bar that does not display accurately
  • android:secondaryProgress: The secondary progress bar is similar to video playback. One is the current playback progress and the other is the buffering progress. The former is set through the progress attribute!

Correspondingly, we can call the following method in Java:

  • getMax(): Return this progress bar The upper limit of the range
  • getProgress(): Returns the progress
  • getSecondaryProgress(): Returns the secondary progress
  • incrementProgressBy(int diff): Specify the incremental progress
  • isIndeterminate(): Indicate whether the progress bar is in indeterminate mode
  • setIndeterminate(boolean indeterminate): Set in indeterminate mode

Let’s take a look at the example of the default progress bar provided by the system!

System default progress bar usage example:

Running rendering:

2.gif

实现布局代码：


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- 系统提供的圆形进度条,依次是大中小 -->

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!--系统提供的水平进度条-->
    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="18" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:indeterminate="true" />

</LinearLayout>


Okay, except for the second one, forget about the others... What the system provides definitely cannot meet our needs! Now let’s explain how we handle the progress bar in actual development!

2. Use animation to replace the circular progress bar

The first solution is to use a set of continuous pictures to form a frame animation. When a progress chart is needed, let Animation visible, not needed Just make the animation invisible! This animation is generally implemented using AnimationDrawable! OK, let's do it Define an AnimationDrawable file:

PS: Picture materials used: Progress bar picture material packaging.zip

Running rendering:

3.gif

<pImplementation steps:

Create a new :anim file in the res directory, and then create the resource file amin_pgbar.xml:

<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
    android:oneshot="false" >  
 
    <item  
        android:drawable="@drawable/loading_01"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_02"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_03"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_04"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_05"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_06"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_07"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_08"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_09"  
        android:duration="200"/>  
    <item  
        android:drawable="@drawable/loading_10"  
android:duration="200"/>
<item
android:drawable="@drawable/loading_11"
android:duration="200"/>
<item
Android: Drawable = "@DRAWABLE/LOADING_12" ## android: Duration = "200"/& GT File, there is only one ImageView in it, used to display the progress bar, just set src to the above drawable resource! Finally go to MainActivity.java


public class MainActivity extends AppCompatActivity {
private ImageView img_pgbar;

private AnimationDrawable ad;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img_pgbar = (ImageView) findViewById(R.id.img_pgbar);
ad = (AnimationDrawable) img_pgbar.getDrawable();
img_pgbar.postDelayed(new Runnable() {
@Override
public void run() {
ad.start() ;
        }
}, 100);
}

}

Here I just write how to start the animation, the rest is up to you~ When you need to display the progress bar, make the ImageView visible; Just let him hide when he is not needed! In addition, in fact, Progressbar itself has an indeterminateDrawable, just put This parameter can be set to the above animation resource, but the pattern size of the progress bar cannot be modified directly. It needs to be written in Java code. Modify, if you set the width and height, and the width and height are too large, you will see multiple progress bars...Weigh it yourself~

3. Customize the circle Progress bar

I believe you will complain after watching 2, damn, it’s so cheating, use an animation to cheat people, haha, this is the case in actual development, of course the above This situation only applies to situations where progress does not need to be displayed. If it is necessary to display progress, it is useless. Okay, let’s take a look next. A simple custom circular progress bar on the Internet! The code is relatively simple and easy to understand. If you are interested, you can take a look or make relevant extensions~

Running rendering:

4.gif


/**
 * Created by Jay on 2015/8/5 0005.
 */
public class CirclePgBar extends View {


    private Paint mBackPaint;
    private Paint mFrontPaint;
    private Paint mTextPaint;
    private float mStrokeWidth = 50;
    private float mHalfStrokeWidth = mStrokeWidth / 2;
    private float mRadius = 200;
    private RectF mRect;
    private int mProgress = 0;
    //目标值，想改多少就改多少
    private int mTargetProgress = 90;
    private int mMax = 100;
    private int mWidth;
    private int mHeight;


    public CirclePgBar(Context context) {
        super(context);
        init();
    }

    public CirclePgBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CirclePgBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    //完成相关参数初始化
    private void init() {
        mBackPaint = new Paint();
        mBackPaint.setColor(Color.WHITE);
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mStrokeWidth);

        mFrontPaint = new Paint();
        mFrontPaint.setColor(Color.GREEN);
        mFrontPaint.setAntiAlias(true);
        mFrontPaint.setStyle(Paint.Style.STROKE);
        mFrontPaint.setStrokeWidth(mStrokeWidth);


        mTextPaint = new Paint();
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(80);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }


    //重写测量大小的onMeasure方法和绘制View的核心方法onDraw()
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        initRect();
        float angle = mProgress / (float) mMax * 360;
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
        canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
        canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight / 2 + mHalfStrokeWidth, mTextPaint);
        if (mProgress < mTargetProgress) {
            mProgress += 1;
            invalidate();
        }

    }

    public int getRealSize(int measureSpec) {
        int result = 1;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);

if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
                                                                                                                                                                                   result = size;
}

return result;
}

private void initRect() {
if (mRect == null) {
mRect = new RectF();
int viewSize = (int) (mRadius * 2);
int left = (mWidth - viewSize) / 2;
int top = (mHeight - viewSize) / 2;
int right = left + viewSize;
int bottom = top + viewSize;
mRect.set(left, top, right, bottom);
}
}


}


Implementation code:

Custom View class:

Then add:

<com.jay.progressbardemo.CirclePgBar

android:layout_width="match_parent"
android:layout_height="match_parent"/>


It’s that simple~

Summary of this section:

This section introduces you to the common controls in Android: ProgressBar explains the basic usage, and the actual development Regarding the two implementation methods of the progress bar, the second custom progress bar can be improved by yourself and then used in actual development~! Okay, that’s it for this section, thank you~

←
→