Android-自定义view之圆（选择程度圆以及进度圆）详解

很多时候我们需要用一个优美好看的圆之类的来表示进度或者选择程度，但是android自带的控件一般很难满足我们的需求，这时候就到自定义view登场啦！

---

文章结构：1.解析一个手动选择的程度圆的自定义view制作 2.解析一个圆环中的圆弧转动来表示进度的进度圆 （这两个例子已经帮各位写好调大小的方法了，复制即可使用）【接下来一段时间，本博主还会持续更新一系列的自定义view，敬请关注。】

---

先上图 可以看到上面的就是点击选择程度的圆，下面就是用圆弧旋转表示进度的进度圆

---

一、一个手动选择的程度圆的自定义view制作

1.先给出代码，在代码里面解析

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;

import com.demo.myview.R;

/**
 * Created by ${符柱成} on 2016/8/20.
 */
public class ManualCircle extends View {
    private Paint circlePaint, arcPaint, textPaint;           //画圆的笔，画弧线的笔，画圆中文字的笔
    private RectF rectF;                            //画弧线--弧线根据矩形生成
    //弧线度数变量
    int i = 0;
    /**
     * 圆环的宽度
     */
    private int mCircleWidth;
    //中心圆的颜色
    private int centerCircleColor;
    //圆环的颜色
    private int ringColor;
    //圆文字的颜色
    private int textColor;

    public ManualCircle(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);//将获取的属性转化为我们最先设好的属性
        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.CustomProgressBar_circleWidth :
                    mCircleWidth = (int) typedArray.getDimension(attr, 0);
                    break;
                case R.styleable.CustomProgressBar_centercircleColor :
                    centerCircleColor=typedArray.getColor(attr,0);       //默认黄色
                    break;
                case R.styleable.CustomProgressBar_ringColor :
                    ringColor=typedArray.getColor(attr,0);          //默认绿色
                    break;
                case R.styleable.CustomProgressBar_textColor :
                    textColor=typedArray.getColor(attr,0);          //默认黑色
                    break;
            }
        }
        typedArray.recycle();           //回收属性对象
        initPaint();
    }


    private void initPaint() {
        //画文字
        textPaint = new TextPaint(0);
        textPaint.setColor(textColor);
        textPaint.setTextSize(80);
        textPaint.setTextAlign(Paint.Align.CENTER);
        //实心圆画笔
        circlePaint = new Paint();
        circlePaint.setColor(centerCircleColor);
        //画弧线的画笔
        arcPaint = new Paint();
        arcPaint.setStyle(Paint.Style.STROKE);    //设置不填充中间,样式为描边
        arcPaint.setColor(ringColor);
        //是根据矩形来画弧线的
        rectF = new RectF();


    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //这是圆心的坐标，这个是在xml设置引用的这个布局控件的大小的中心点到这个布局控件的最左边
        float xy = getWidth() / 2;
        //圆圈的半径 这里是100
        float radius = xy - mCircleWidth;       //改半径会造成联动的，因为围绕着mCircleWidth这个变量去开展绘制，要理解就要画图,大家拿起手上的纸画一下就好
        //设置圆弧              //注意先确定圆弧的宽度，然后根据得到这个布局的中心点，然后进行演算，得到半径。然后确定一个矩形来画圆弧。圆弧
        rectF.left = xy - radius - mCircleWidth / 2;
        rectF.top = xy - radius - mCircleWidth / 2;
        rectF.right = xy + radius + mCircleWidth / 2;
        rectF.bottom = xy + radius + mCircleWidth / 2;
        arcPaint.setStrokeWidth(mCircleWidth);

        //画里面的圆
        canvas.drawCircle(xy, xy, radius, circlePaint);
        //画弧线
        int progress=i*10/36;
        canvas.drawArc(rectF, 270, i, false, arcPaint);
        //显示度数与提示
        canvas.drawText(String.valueOf(progress)+"%", xy, xy, textPaint);
    }

    /**
     * 公开一个方法，可以更新弧线的度数,也就是选择程度啦，设置为单击一次就增加10%
     */
    public void add() {
        //超过360度就还原到10度
        if (i >= 360) {
            i = 36;
            postInvalidate();           //通知onDraw重新绘制
        } else {
            this.i += 36;
            postInvalidate();
        }
    }
}

---

2.然后给出属性文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 手动选择的程度圆-->
    <declare-styleable name="CustomProgressBar">
        <attr name="circleWidth" format="dimension" />
        <attr name="ringColor" format="color" />
        <attr name="centercircleColor" format="color" />
        <attr name="textColor" format="color" />
    </declare-styleable>

<!--用弧度变化表示进度的程度圆，一会就不贴这个的代码了-->

    <declare-styleable name="AutomaticCircleProgress">
        <attr name="automaticCircleWidth" format="dimension" />
        <attr name="automaticBottomRingColor" format="color" />
        <attr name="automaticDrawRingColor" format="color" />
        <attr name="automaticCentercircleColor" format="color" />
        <attr name="automaticTextColor" format="color" />
    </declare-styleable>
</resources>

---

3.接下来就是给出在xml中的调用啦：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.demo.myview.progressCircle.ProgressCircleActivity">
<!-- 手动选择的程度圆-->
    <com.demo.myview.progressCircle.ManualCircle
        android:id="@+id/myview"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_centerInParent="true"
        app:centercircleColor="#FFFF00"
        app:circleWidth="11dp"
        app:ringColor="#008000"
        app:textColor="#000000"></com.demo.myview.progressCircle.ManualCircle>
<!--用弧度变化表示进度的程度圆，一会就不贴这个的代码了-->

    <com.demo.myview.progressCircle.AutomaticCircle
        android:id="@+id/automaticCircle"
        android:layout_width="160dp"
        android:layout_height="160dp"
        app:automaticBottomRingColor="#000000"
        app:automaticCentercircleColor="#aaa"
        app:automaticCircleWidth="20dp"
        app:automaticDrawRingColor="#FFFFFF"
        app:automaticTextColor="#FFFFFF" />

</LinearLayout>

---

然后就是为选择程度的圆添加我们刚刚在view里面暴露的接口方法

public class ProgressCircleActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_circle);
        //<!-- 手动选择的程度圆-->

        final ManualCircle myView = (ManualCircle) findViewById(R.id.myview);
        myView.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                myView.add();
            }
        });
//<!--用弧度变化表示进度的程度圆，一会就不贴这个的代码了-->

        final AutomaticCircle automaticCircle=(AutomaticCircle)findViewById(R.id.automaticCircle);
        automaticCircle.setScore(80);
    }
}

二、用弧度变化表示进度的程度圆

1.先给出view的代码，在代码里面解析

package com.demo.myview.progressCircle;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewTreeObserver;

import com.demo.myview.R;

/**
 * Created by ${符柱成} on 2016/8/21.
 */
public class AutomaticCircle extends View {
    private int mScore;      //方法传进来的表示进度
    private Paint mBlackPaint, mWhitePaint, mCirclePaint, mTextPaint;        //白色圆弧与黑色圆弧
    /**
     * 圆环的宽度
     */
    private int mCircleWidth;
    //圆弧的矩形
    private RectF mRectF;

    //白弧线度数变量
    int i = 0;
    //根据进度来白圆扫
    int count;
    //中心圆的颜色
    private int centerCircleColor;
    //底圆环的颜色
    private int bottomRingColor;
    //旋转圆环的颜色
    private int drawRingColor;
    //圆文字的颜色
    private int textColor;


    public AutomaticCircle(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AutomaticCircleProgress);//将获取的属性转化为我们最先设好的属性
        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
        //属性文件在上面已经给出
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.AutomaticCircleProgress_automaticCircleWidth:
                    mCircleWidth = (int) typedArray.getDimension(attr, 0);
                    break;
                case R.styleable.AutomaticCircleProgress_automaticCentercircleColor:
                    centerCircleColor = typedArray.getColor(attr, 0);
                    Log.e("centerColor", String.valueOf(centerCircleColor));
                    break;
                case R.styleable.AutomaticCircleProgress_automaticBottomRingColor:
                    bottomRingColor =  typedArray.getColor(attr, 0);
                    Log.e("centerColor", String.valueOf(bottomRingColor));
                    break;
                case R.styleable.AutomaticCircleProgress_automaticDrawRingColor:
                    drawRingColor =  typedArray.getColor(attr, 0);
                    break;
                case R.styleable.AutomaticCircleProgress_automaticTextColor:
                    textColor = typedArray.getColor(attr, 0);
                    break;
            }
        }
        initPaint();
    }

    private void initPaint() {
        //初始化中心圆的黑色笔
        mCirclePaint = new Paint();
        //设置抗锯齿，优化绘制效果的精细度
        mCirclePaint.setAntiAlias(true);
        //设置图像抖动处理,也是用于优化图像的显示效果
        mCirclePaint.setDither(true);
        //设置画笔的颜色
        mCirclePaint.setColor(centerCircleColor);

        //初始圆弧黑色笔
        mBlackPaint = new Paint();
        //设置抗锯齿，优化绘制效果的精细度
        mBlackPaint.setAntiAlias(true);
        //设置图像抖动处理,也是用于优化图像的显示效果
        mBlackPaint.setDither(true);
        //设置画笔的颜色
        mBlackPaint.setColor(bottomRingColor);
        //设置画笔的风格为空心
        mBlackPaint.setStyle(Paint.Style.STROKE);
        //设置“空心”的外框宽度为2dp
        mBlackPaint.setStrokeWidth(mCircleWidth);

        //初始白色笔
        mWhitePaint = new Paint();
        mWhitePaint.setAntiAlias(true);
        mWhitePaint.setStyle(Paint.Style.STROKE);
        mWhitePaint.setStrokeWidth(mCircleWidth);
        mWhitePaint.setDither(true);
        mWhitePaint.setColor(drawRingColor);

        //文本的笔
        mTextPaint = new Paint();
        //设置文本的字号大小
        mTextPaint.setTextSize(40);
        mTextPaint.setDither(true);
        //设置文本的对其方式为水平居中
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setColor(textColor);


        //获取该view的视图树观察者并添加绘制变化监听者
        //实现有绘制变化时的回调方法
        this.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                //2.开启子线程对绘制用到的数据进行修改
                new DrawThread();
                getViewTreeObserver().removeOnPreDrawListener(this);
                return false;
            }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //这是圆心的坐标，这个是在xml设置引用的这个布局控件的大小的中心点到这个布局控件的最左边
        float xy = getWidth() / 2;
        //圆圈的半径
        float radius = xy - mCircleWidth;       //改半径会造成联动的，因为围绕着mCircleWidth这个变量去开展绘制

        //初始化圆弧所需条件（及设置圆弧的外接矩形的四边）
        mRectF = new RectF();
        mRectF.set(xy - radius - mCircleWidth / 2, xy - radius - mCircleWidth / 2, xy + radius + mCircleWidth / 2, xy + radius + mCircleWidth / 2);

        //画里面的灰色圆
        canvas.drawCircle(xy, xy, radius, mCirclePaint);


        //绘制弧形
        //黑笔画的是一个整圆所有从哪里开始都一样
        canvas.drawArc(mRectF, 0, 360, false, mBlackPaint);
        //白笔之所以从-90度开始，是因为0度其实使我们的3点钟的位置，所以-90才是我们的0点的位置
        canvas.drawArc(mRectF, -90, i, false, mWhitePaint);
        //绘制文本
        canvas.drawText(count + "", xy, xy, mTextPaint);


    }
    //暴露一个方法给外部调用来调整进度
    public void setScore(int score) {
        this.mScore = score;
    }
    //开启子线程,并通过绘制监听实时更新绘制数据
    public class DrawThread implements Runnable {
        private final Thread mDrawThread;
        private int statek;

        public DrawThread() {
            mDrawThread = new Thread(this);
            mDrawThread.start();
        }

        @Override
        public void run() {
            while (true) {
                switch (statek) {
                    case 0://给一点点缓冲的时间
                        try {
                            Thread.sleep(200);
                            statek = 1;
                        } catch (InterruptedException e) {

                        }
                        break;
                    case 1:
                        try {//更新显示的数据
                            Thread.sleep(20);
                            i += 3.6f;
                            count++;
                            postInvalidate();       //每count加1就去刷新onDraw来刷新图
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        break;
                }
                if (count >= mScore)//满足该条件就结束循环
                    break;
            }

        }
    }
}

恩，属性文件和调用的代码都在上一个例子里面了，这里就不再贴了。

---

好了，自定义view圆已经讲解完毕，欢迎指出错误，共同学习。接下来一段时间还会更新一系列的自定义view，敬请关注。

转载请注明：【JackFrost的博客】

更多精彩的内容，可以访问JackFrost的博客