Android——ProgressBar(进度条)
阅读原文时间:2023年07月09日阅读:2

参考资料来源于菜鸟教程——学的不仅是技术,更是梦想!

学习!

从官方文档,我们看到了这样一个类关系图:

ProgressBar继承与View类,直接子类有AbsSeekBar和ContentLoadingProgressBar, 其中AbsSeekBar的子类有SeekBar和RatingBar,可见这二者也是基于ProgressBar实现的

常用属性详解:

  • android:max:进度条的最大值
  • android:progress:进度条已完成进度值
  • android:progressDrawable:设置轨道对应的Drawable对象
  • android:indeterminate:如果设置成true,则进度条不精确显示进度
  • android:indeterminateDrawable:设置不显示进度的进度条的Drawable对象
  • android:indeterminateDuration:设置不精确显示进度的持续时间
  • android:secondaryProgress:二级进度条,类似于视频播放的一条是当前播放进度,一条是缓冲进度,前者通过progress属性进行设置!

对应的再Java中我们可调用下述方法:

  • getMax():返回这个进度条的范围的上限
  • getProgress():返回进度
  • getSecondaryProgress():返回次要进度
  • incrementProgressBy(int diff):指定增加的进度
  • isIndeterminate():指示进度条是否在不确定模式下
  • setIndeterminate(boolean indeterminate):设置不确定模式下

接下来来看看系统提供的默认的进度条的例子吧!

系统默认进度条使用实例:

运行效果图:

实现布局代码:

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

<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" />

好吧,除了第二个能看,其他的就算了…系统提供的肯定是满足不了我们的需求的! 下面我们就来讲解下实际开发中我们对进度条的处理!


第一个方案是,使用一套连续图片,形成一个帧动画,当需要进度图的时候,让动画可见,不需要 的时候让动画不可见即可!而这个动画,一般是使用AnimationDrawable来实现的!好的,我们来 定义一个AnimationDrawable文件:

PS:用到的图片素材:进度条图片素材打包.zip

运行效果图:

实现步骤:

在res目录下新建一个:anim文件件,然后创建amin_pgbar.xml的资源文件:


<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"/>  

接着写个布局文件,里面仅仅有一个ImageView即可,用于显示进度条,把src设置为上述drawable资源即可! 最后到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);  
}

}

这里只是写了如何启动动画,剩下的就你自己来了哦~在需要显示进度条的时候,让ImageView可见; 在不需要的时候让他隐藏即可!另外其实Progressbar本身有一个indeterminateDrawable,只需把 这个参数设置成上述的动画资源即可,但是进度条条的图案大小是不能直接修改的,需要Java代码中 修改,如果你设置了宽高,而且这个宽高过大的时候,你会看到有多个进度条…自己权衡下吧~


相信你看完2会吐槽,卧槽,这么坑爹,拿个动画来坑人,哈哈,实际开发中都这样,当然上述 这种情况只适用于不用显示进度的场合,如果要显示进度的场合就没用处了,好吧,接下来看下 网上一个简单的自定义圆形进度条!代码还是比较简单,容易理解,又兴趣可以看看,或者进行相关扩展~

运行效果图:

实现代码:

自定义View类:

/**
* 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 =(int)(mRadius \*2+ mStrokeWidth);}else{  
        result = size;}return result;}privatevoid initRect(){if(mRect ==null){  
        mRect =newRectF();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);}}}

然后在布局文件中加上:

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章