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

android自定义view制作圆形进度条效果

程序员文章站 2024-02-20 10:54:41
还是我们自定view的那几个步骤: 1、自定义view的属性 2、在view的构造方法中获得我们自定义的属性 [ 3、重写onmesure ] 4、重写ondraw...

还是我们自定view的那几个步骤:
1、自定义view的属性
2、在view的构造方法中获得我们自定义的属性
[ 3、重写onmesure ]
4、重写ondraw

1、自定义属性:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <declare-styleable name="customtitleview"> 
  <attr name="mspeed" format="integer" /> 
  <attr name="mfirstcolor" format="color" /> 
  <attr name="msecondcolor" format="color" /> 
  <attr name="mcirclewidth" format="dimension"/> 
  <attr name="textsize" format="dimension"/> 
 </declare-styleable> 
</resources> 

2、在view的构造方法中获得我们自定义的属性

/** 
 * 当前进度 
 */ 
 private int mprogress; 
 /** 
 * 第一圈的颜色 
 */ 
 private int mfirstcolor; 
 /** 
 * 第二圈的颜色 
 */ 
 private int msecondcolor; 
 /** 
 * 圈的宽度 
 */ 
 private int mcirclewidth; 
 /** 
 * 速度 
 */ 
 private int mspeed; 
 /** 
 * 中间进度百分比的字符串的字体 
 */ 
 private float textsize; 
 private boolean isnext = false; 
 private paint mpaint; 
 
 public customtitleview(context context, attributeset attrs) { 
  super(context, attrs); 
  typedarray typearray = context.obtainstyledattributes(attrs, r.styleable.customtitleview); 
  int count= typearray.getindexcount(); 
  for(int i=0;i<count;i++){ 
   int attr =typearray.getindex(i); 
   switch(attr){ 
    case r.styleable.customtitleview_mfirstcolor: 
     mfirstcolor=typearray.getcolor(attr,color.black); 
     break; 
    case r.styleable.customtitleview_msecondcolor: 
     msecondcolor=typearray.getcolor(attr,color.red); 
     break; 
    case r.styleable.customtitleview_mcirclewidth: 
     mcirclewidth = typearray.getdimensionpixelsize(attr,(int)typedvalue.applydimension( 
       typedvalue.complex_unit_px,20,getresources().getdisplaymetrics())); 
     break; 
 
    case r.styleable.customtitleview_textsize: 
     textsize = typearray.getdimensionpixelsize(attr,(int)typedvalue.applydimension( 
       typedvalue.complex_unit_px,30,getresources().getdisplaymetrics())); 
     break; 
    case r.styleable.customtitleview_mspeed: 
     mspeed = typearray.getint(attr,100);// 默认100 
     break; 
   } 
  } 
  log.v("----",mspeed+""); 
  typearray.recycle(); 
  mpaint = new paint(); 
  new thread() 
  { 
   public void run() 
   { 
    while (true) 
    { 
     mprogress++; 
     if (mprogress == 360) 
     { 
      mprogress = 0; 
      if (!isnext) 
       isnext = true; 
      else 
       isnext = false; 
     } 
     postinvalidate(); 
     try 
     { 
      thread.sleep(mspeed); 
     } catch (interruptedexception e) 
     { 
      e.printstacktrace(); 
     } 
    } 
   }; 
  }.start(); 
 } 

3、直接重写ondraw,这不需要重写onmeasure

protected void onmeasure(int widthmeasurespec, int heightmeasurespec){ 
    super.onmeasure(widthmeasurespec, heightmeasurespec); 
 } 
 protected void ondraw(canvas canvas) 
 { 
  /** 
  * 画进度百分比 
  */ 
  mpaint.setstrokewidth(0); 
  mpaint.setcolor(color.black); 
  mpaint.settextsize(textsize); 
  mpaint.settypeface(typeface.default_bold); //设置字体 
  int percent = (int)(((float)mprogress / (float)360) * 100); 
  int centre = getwidth() / 2; // 获取圆心的x坐标 
  int radius = centre - mcirclewidth / 2;// 半径 
  float textwidth = mpaint.measuretext(percent + "%"); //测量字体宽度,我们需要根据字体的宽度设置在圆环中间 
  canvas.drawtext(percent + "%",centre-textwidth/ 2,centre+textsize/2, mpaint); //画出进度百分比 
  mpaint.setstrokewidth(mcirclewidth); // 设置圆环的宽度 
  mpaint.setantialias(true); // 消除锯齿 
  mpaint.setstyle(paint.style.stroke); // 设置空心 
  rectf oval = new rectf(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 
  if(isnext){ 
   mpaint.setcolor(msecondcolor); // 设置圆环的颜色 
   canvas.drawcircle(centre, centre, radius, mpaint); // 画出圆环 
   mpaint.setcolor(mfirstcolor); // 设置圆环的颜色 
   canvas.drawarc(oval, -90, mprogress, false, mpaint); // 根据进度画圆弧 
  }else{ 
   mpaint.setcolor(mfirstcolor); // 设置圆环的颜色 
   canvas.drawcircle(centre, centre, radius, mpaint); // 画出圆环 
   mpaint.setcolor(msecondcolor); // 设置圆环的颜色 
   canvas.drawarc(oval, -90, mprogress, false, mpaint); // 根据进度画圆弧 
  } 
 } 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<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" 
 android:padding="20dp" 
 > 
 <view.customtitleview 
  android:layout_width="200dp" 
  android:layout_height="400dp" 
  custom:mspeed="50" 
  custom:mfirstcolor="#7300e6" 
  custom:msecondcolor="#39ac39" 
  custom:mcirclewidth="10px" 
  custom:textsize="20px" 
  android:id="@+id/one" 
 /> 
 <view.customtitleview 
  android:layout_toendof="@id/one" 
  android:layout_width="200dp" 
  android:layout_height="400dp" 
  custom:mspeed="100" 
  custom:mfirstcolor="#0040ff" 
  custom:msecondcolor="#40ff00" 
  custom:mcirclewidth="20px" 
  custom:textsize="30px" 
  /> 
</relativelayout> 

效果预览

android自定义view制作圆形进度条效果

源码下载:http://xiazai.jb51.net/201701/yuanma/androidprogressbar(jb51.net).rar

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