本节导言:

本节给咱们带来的是Android根本UI控件中的ProgressBar(进展条),ProgressBar的运用场景许多,比方 用户登录时,后台在发恳求,以及等候服务器回来信息,这个时分会用到进展条;或许当在进行一些比较 耗时的操作,需求等候一段较长的时刻,这个时分假如没有提示,用户可能会认为程序Carsh或许手机死机 了,这样会大大下降用户体会,所以在需求进行耗时操作的当地,添加上进展条,让用户知道当时的程序 在履行中,也能够直观的告知用户当时使命的履行进展等!运用进展条能够给我带来这样的便当! 好了,开端解说本节内容~ 对了,ProgressBar官方API文档:


1.常用特点解说与根底实例

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

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):设置不确定形式下

接下来来看看体系供给的默许的进展条的比如吧!

体系默许进展条运用实例:

运转效果图:

完结布局代码:

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

好吧,除了第二个能看,其他的就算了...体系供给的肯定是满意不了咱们的需求的! 下面咱们就来解说下实践开发中咱们对进展条的处理!


2.运用动画来代替圆形进展条

第一个计划是,运用一套接连图片,构成一个帧动画,当需求进展图的时分,让动画可见,不需求 的时分让动画不行见即可!而这个动画,一般是运用AnimationDrawable来完结的!好的,咱们来 界说一个AnimationDrawable文件:

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

运转效果图:

完结过程:

在res目录下新建一个:anim文件件,然后创立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"/>  
  
</animation-list> 

接着写个布局文件,里边仅仅有一个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代码中 修正,假如你设置了宽高,并且这个宽高过大的时分,你会看到有多个进展条...自己权衡下吧~


3.自界说圆形进展条

相信你看完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;
    }

    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);
        }
    }


}

然后在布局文件中加上:

 <com.jay.progressbardemo.CirclePgBar
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

便是这么简略~


本节小结:

本节给咱们介绍了Android中的常用控件:ProgressBar解说了根本用法,以及实践开发中 关于进展条的两种完结办法,第二个自界说进展条能够自行完善,然后用到实践开发中~! 好的,本节就到这儿,谢谢~