Android自定义View基础开发之图片加载进度条

学会了paint，canvas的基本用法之后，我们就可以动手开始实践了，先写个简单的图片加载进度条看看。
按照惯例，先看效果图，再决定要不要往下看：

既然看到这里了，应该是想了解这个图片加载进度条了，我们先看具体用法，再看自定义view的实现：

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:custom="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <imageview
 android:id="@+id/img"
 android:layout_width="200dp"
 android:layout_height="200dp"
 android:scaletype="centercrop"
 android:layout_centerinparent="true"/>
 <com.example.circleprogresstest.circleprogressview
 android:id="@+id/progressview"
 android:layout_width="60dp"
 android:layout_height="60dp"
 android:layout_centerinparent="true"
 custom:isshowprogress="true" />
</relativelayout>

imageloader.getinstance().displayimage(url, imageview, options,
 new simpleimageloadinglistener() ,
 new imageloadingprogresslistener() {
  @override
  public void onprogressupdate(string imageuri, view view, int current, int total) {
  if(current==total){
   progressview.setvisibility(view.gone);
  }else{
   progressview.setsweepangle((int)(360*current*1.0f/total));
   progressview.postinvalidate();
  }
  }
 }
);

可以看出，以上的用法，非常简单，在xml中添加我们自定义的view，和添加textview或者button完全相同，只是多了我们自己的自定义属性而已，可以设置圆的颜色，以及文字颜色，大小等等。之后，在mainactivity中使用的方法也是同样简单，只要在图片的进度更新的时候，同时更新我们进度条的进度就行了。

下面我们具体说下我们实现自定义进度条的过程，我们只需要重写ondraw()方法就够了，很明显，我们的进度条包括三部分，内圈圆，外圈圆弧，中间的文字，具体看代码：

protected void ondraw(canvas canvas) {
 mwidth=getmeasuredwidth();
 mheight=getmeasuredheight();
 radius=(float)(math.min(mwidth,mheight)*1.0/2)-strokewidth/2;
 //绘制内圈圆
 mpaint.setcolor(initcolor);
 mpaint.setstyle(paint.style.stroke);
 mpaint.setstrokewidth(strokewidth);
 canvas.drawcircle(mwidth/2,mheight/2,radius,mpaint);
 //绘制覆盖的圆弧
 mpaint.setcolor(covercolor);
 rectf rectf=new rectf(mwidth/2-radius,mheight/2-radius,mwidth/2+radius,mheight/2+radius);
 canvas.drawarc(rectf,-90,sweepangle,false,mpaint);
 //绘制中间的文本
 if(isshowprogress){
 progresstext=string.format(getresources().getstring(r.string.progress_text),(int)(sweepangle*100.0/360));
 mpaint.settextsize(textsize);
 mpaint.setcolor(textcolor);
 if(mbound==null){
  mbound=new rect();
 }
 mpaint.gettextbounds(progresstext,0,progresstext.length(),mbound);
 mpaint.setstyle(paint.style.fill);
 canvas.drawtext(progresstext,mwidth/2-mbound.width()/2,mheight/2+mbound.height()/2,mpaint);
 }
}

当然，为了让我们可以自定义进度条的大小颜色，我们还采用了自定义属性，并且在构造器中，也需要加载xml中的各项属性：

<resources>
 <declare-styleable name="circleprogressview">
 <attr name="initcolor" format="color"/>
 <attr name="covercolor" format="color"/>
 <attr name="strokewidth" format="dimension"/>
 <attr name="progresstextsize" format="dimension"/>
 <attr name="progresstextcolor" format="color"/>
 <attr name="isshowprogress" format="boolean"/>
 </declare-styleable>
</resources>

private void initvalues(context context, attributeset attrs, int defstyleattr){
 typedarray typedarray=context.gettheme().obtainstyledattributes(attrs,r.styleable.circleprogressview,defstyleattr,0);
 int num=typedarray.getindexcount();
 for(int i=0;i<num;i++){
 int attr=typedarray.getindex(i);
 switch (attr){
  case r.styleable.circleprogressview_initcolor:
  initcolor=typedarray.getcolor(attr,color.gray);
  break;
  case r.styleable.circleprogressview_covercolor:
  covercolor=typedarray.getcolor(attr,color.black);
  break;
  case r.styleable.circleprogressview_strokewidth:
  strokewidth=typedarray.getdimensionpixeloffset(attr,5);
  break;
  case r.styleable.circleprogressview_progresstextsize:
  textsize=typedarray.getdimensionpixelsize(attr,30);
  break;
  case r.styleable.circleprogressview_progresstextcolor:
  textcolor=typedarray.getcolor(attr,color.black);
  break;
  case r.styleable.circleprogressview_isshowprogress:
  isshowprogress=typedarray.getboolean(attr,false);
  break;
  default:
  break;
 }
 }
 typedarray.recycle();

 mpaint=new paint();
 mpaint.setantialias(true);
}

源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。