目录
[Android ProgressBar 进度条](#Android ProgressBar 进度条)
[ProgressBar 外观](#ProgressBar 外观)
[ProgressBar 属性](#ProgressBar 属性)
[ProgressBar 方法](#ProgressBar 方法)
[Android ProgressBar 动图替代圆形进度条](#Android ProgressBar 动图替代圆形进度条)
[Android ProgressBar 自定义圆环进度条](#Android ProgressBar 自定义圆环进度条)
Android ProgressBar 进度条
在Android中,ProgressBar(进度条)是用于显示任务进度的UI组件,通常用于耗时操作的过程中以及需要显示加载等待的情况下。ProgressBar可以显示水平或者圆形的样式,具体取决于所选择的样式。
ProgressBar
在Android中,ProgressBar类继承自View类,因此它是一个视图(View),用于在用户界面中显示任务的进度。由于ProgressBar继承自View类,因此它具有所有View类的属性和方法,同时也拥有专门用于控制进度条外观和行为的属性和方法。
ProgressBar 外观
在Android中,ProgressBar具有四种外观模式,这四种模式的组合由android:indeterminate和style属性确定。这里列出了这些属性及其取值的说明:
android:indeterminate属性
- 说明: 这个属性用于确定进度条是否显示在不确定模式下。
- 默认值: true,表示显示不确定模式。
style属性
1、说明: 这个属性用于确定ProgressBar的外观样式。
2、可选值:
- Widget.ProgressBar.Horizontal:水平条形模式。
- Widget.ProgressBar.Small:小型条形模式。
- Widget.ProgressBar.Large:大型条形模式。
- Widget.ProgressBar.Inverse:反向条形模式。
- Widget.ProgressBar.Small.Inverse:小型反向条形模式。
- Widget.ProgressBar.Large.Inverse:大型反向条形模式。
四种组合
1、水平条形模式:确定性进度
- android:indeterminate="false"
- style="@android:style/Widget.ProgressBar.Horizontal"
2、水平条形模式:不确定性进度
- android:indeterminate="true"
- style="@android:style/Widget.ProgressBar.Horizontal"
3、圆形模式:确定性进度
- android:indeterminate="false"
- style="@android:style/Widget.ProgressBar.Large"
4、圆形模式:不确定性进度
- android:indeterminate="true"
- style="@android:style/Widget.ProgressBar.Large"
实例
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="50" />
<ProgressBar
android:id="@+id/progressBar1"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_height="wrap_content"
android:indeterminate = "false"
android:progress="25"
android:max="100" />
<ProgressBar
android:layout_width="match_parent"
style="@android:style/Widget.ProgressBar.Inverse"
android:layout_height="wrap_content" />
</LinearLayout>
java
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ProgressBar progressBar = findViewById(R.id.progressBar);
progressBar.setProgress(75); // 更新进度为75
ProgressBar progressBar1 = findViewById(R.id.progressBar1);
progressBar1.setProgress(75); // 更新进度为75
}
}
ProgressBar 属性
android:max:
- 说明: 进度条的最大值。通常情况下,进度条的进度范围从0到这个值。
- 默认值: 100
android:progress:
- 说明: 进度条已完成的进度值。
- 默认值: 0
- 注意: 进度值应在0到android:max之间。
android:progressDrawable:
- 说明: 设置轨道对应的Drawable对象。通过这个属性,可以自定义进度条的外观。
- 默认值: 系统提供的进度条样式。
android:indeterminate:
- 说明: 如果设置成true,则进度条不精确显示进度。当进度无法确定时(例如,执行的任务没有确定的结束时间),通常会使用不确定性进度条。
- 默认值: false
android:indeterminateDrawable:
- 说明: 设置不显示进度的进度条的Drawable对象。这个属性可以用于定义不确定性进度条的外观。
- 默认值: 系统提供的不确定性进度条样式。
android:indeterminateDuration:
- 说明: 设置不精确显示进度的持续时间。这个属性用于控制不确定性进度条的动画持续时间。
- 默认值: 4000毫秒(4秒)
android:secondaryProgress:
- 说明: 二级进度条,类似于视频播放的一条是当前播放进度,一条是缓冲进度,前者通过android:progress属性进行设置。
- 默认值: 0
- 注意: 这个属性的值也应在0到android:max之间。
ProgressBar 方法
getMax():
- 说明: 返回这个进度条的范围的上限。
- 返回类型: int
getProgress():
- 说明: 返回进度条的当前进度。
- 返回类型: int
getSecondaryProgress():
- 说明: 返回进度条的次要进度,通常用于显示缓冲进度等。
- 返回类型: int
incrementProgressBy(int diff):
- 说明: 增加当前进度。可以通过传递正数或负数来增加或减少进度。
- 参数: diff - 增加的进度值。
isIndeterminate():
- 说明: 指示进度条是否在不确定模式下。
- 返回类型: boolean
setIndeterminate(boolean indeterminate):
- 说明: 设置进度条是否在不确定模式下。
- 参数: indeterminate - true表示进度条处于不确定模式,false表示进度条处于确定模式。
Android ProgressBar 动图替代圆形进度条
在Android中,可以通过使用帧动画来实现一个类似圆形进度条的效果。可以准备一组连续的图片,并将它们放置在一个ImageView中,然后使用帧动画来展示这些图片,从而创建一个类似于圆形进度条的效果。
范例
1、在 res/drawable 目录下新建一个 anim_pgbar.xml 的资源文件
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"/>
</animation-list>
2、修改 activity_main.xml 添加一个 ImageView
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<Button android:id="@+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="显示动画" />
<Button android:id="@+id/btn_hide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="隐藏动画" />
<ImageView
android:id="@+id/progressImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/anim_pgbar"
android:visibility="invisible" />
</LinearLayout>
3、修改 MainActivity.java
java
package com.example.myapplication;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private ImageView progressImageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progressImageView = findViewById(R.id.progressImageView);
Button btnShow = findViewById(R.id.btn_show);
Button btnHide = findViewById(R.id.btn_hide);
btnShow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showProgressAnimation();
}
});
btnHide.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
hideProgressAnimation();
}
});
}
private void showProgressAnimation() {
progressImageView.setVisibility(View.VISIBLE);
AnimationDrawable progressAnimation = (AnimationDrawable) progressImageView.getDrawable();
progressAnimation.start();
}
private void hideProgressAnimation() {
progressImageView.setVisibility(View.INVISIBLE);
AnimationDrawable progressAnimation = (AnimationDrawable) progressImageView.getDrawable();
progressAnimation.stop();
}
}
Android ProgressBar 自定义圆环进度条
在Android中,可以通过自定义绘制来实现一个圆环进度条。这可以通过自定义View来实现。
例子:
1、自定义一个 View 类 RingProgressBar.java
java
package com.example.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class RingProgressBar extends View {
private Paint mBackPaint;
private Paint mFrontPaint;
private Paint mTextPaint;
private float mStrokeWidth = 50;
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 RingProgressBar(Context context) {
super(context);
init();
}
public RingProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RingProgressBar(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);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
mWidth = resolveSizeAndState(widthSize, widthMeasureSpec, 0);
mHeight = resolveSizeAndState(heightSize, heightMeasureSpec, 0);
setMeasuredDimension(mWidth, mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float angle = mProgress / (float) mMax * 360;
canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
canvas.drawArc(getRect(), -90, angle, false, mFrontPaint);
canvas.drawText(mProgress + "%", mWidth / 2, mHeight / 2 + mStrokeWidth / 4, mTextPaint);
if (mProgress < mTargetProgress) {
mProgress += 1;
invalidate();
}
}
private RectF getRect() {
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);
}
return mRect;
}
}
2、然后修改 activity_main.xml 添加我们的 RingProgressBar
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="center">
<com.example.myapplication.RingProgressBar
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
参考文档
官方 API 文档: ProgressBar