欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-06 22:26:56
学会了paint,canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看。 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里...

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

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

既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义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);
}

源码下载:

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