android自定义圆形进度+自定义属性

jopen 9年前

今天无意中发现一个圆形进度,想想自己实现一个,如下图:


基本思路是这样的:

1.首先绘制一个实心圆

2.绘制一个白色实心的正方形,遮住实心圆

3.在圆的中心动态绘制当前进度的百分比字符

4.绘制一个与之前实心圆相同颜色的空心圆

5.逐渐改变当前的百分比

6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100%


首先看看自定义的属性

在values目录下新建attrs.xml内容如下:

定义绘制圆形的背景色,和绘制圆形的半径大小

<?xml version="1.0" encoding="utf-8"?>  <resources>        <attr name="circlecolor" format="color"></attr>      <attr name="half" format="dimension"></attr>        <declare-styleable name="myCircleImage">          <attr name="circlecolor"></attr>          <attr name="half"></attr>      </declare-styleable>    </resources>
自定义视图

import android.annotation.SuppressLint;  import android.content.Context;  import android.content.res.TypedArray;  import android.graphics.Canvas;  import android.graphics.Color;  import android.graphics.Paint;  import android.text.TextPaint;  import android.util.AttributeSet;  import android.util.Log;  import android.view.View;    public class CirclePro extends View {       private Paint paint;   private int circleBack;//圆的背景色   private int mschedual = 0;//用于控制动态变化   float circleHalf; //圆的半径   String percent = "";//绘制百分比的字符串      @SuppressLint("Recycle")   public CirclePro(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    paint = new Paint();    TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.myCircleImage, defStyleAttr,0);    @SuppressWarnings("unused")    int leng = array.length();    //获取自定义的属性,这里注意是R.styleable.myCircleImage_circlecolor而不是R.attr.circlecolor    circleBack = array.getColor(R.styleable.myCircleImage_circlecolor,Color.GREEN);    circleHalf = array.getDimension(R.styleable.myCircleImage_half,200.f);    System.out.println(circleBack);       }     /**    * 这个构造参数,当在布局文件中引用该view的时候,必须重写该构造函数    * @param context    * @param attrs    */   public CirclePro(Context context, AttributeSet attrs) {    this(context, attrs, 0);//调用自己的构造函数       }      /**    * 根据文本的    * @param text    * @param textSize    * @return    */   public float getTextWidth(String text,float textSize) {      TextPaint textPaint = new TextPaint();    textPaint.setTextSize(textSize);    return textPaint.measureText(text);   }      @Override   protected void onDraw(Canvas canvas) {    // TODO Auto-generated method stub    super.onDraw(canvas);      float height = getHeight();    float width = getWidth();  //  float circleHalf = (float) (width*0.7/2);      paint.setColor(circleBack);    paint.setAntiAlias(true);    paint.setStyle(Paint.Style.FILL);    canvas.drawCircle(width/2,height/2,circleHalf, paint);//画实心圆        if (mschedual <= 100) {//,如果当前进度小于100,画实心矩形     paint.setColor(Color.WHITE);     canvas.drawRect(width/2-circleHalf,height/2-circleHalf,width/2+circleHalf,height/2+circleHalf - mschedual*circleHalf/50, paint);    }        //画当前进度的字符串    paint.setColor(Color.BLACK);    paint.setTextSize(30.f);    percent = mschedual+" %";    canvas.drawText(percent, width/2-getTextWidth(percent,30)/2,height/2+paint.getTextSize()*3/8, paint);//字体的高度=paint.getTextSize()*3/4        //画空心圆    paint.setColor(circleBack);    paint.setStyle(Paint.Style.STROKE);    canvas.drawCircle(width/2,height/2,circleHalf, paint);      if (mschedual < 100) {//更改当前进度值,并重绘     mschedual++;     invalidate();    }   }  }

在activity_main.xml中,需要用到自定义的属性,首先添加命名空间: xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro"

其中liu是自定义的一个前缀,随意命名的,com.example.androidcirclepro是我们的应用的包名

activity_main.xmln内容如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context=".MainActivity" >        <com.example.androidcirclepro.CirclePro          android:layout_width="match_parent"          android:layout_height="match_parent"          liu:half="90dp"          liu:circlecolor="#fff0f0"          />    </RelativeLayout>


至此一个自定义的圆形进度条就完成了,是不是很简单。

源码下载



来自: http://blog.csdn.net//mockingbirds/article/details/41364251