andriod自定义view 小案例（带进度的圆形进度条）

还是我们自定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>

效果预览

源码下载