对于自定义view，应该对于一个程序员来说并不是很陌生。自定义view主要分为三部分onMeasure测量、onLayout摆放和onDraw绘制。好了，言归正传，说一下怎样绘制圆环占比动画吧！！！

第一步：首先先自定义一个类，这里面主要绘制圆环的形状等一些状态。

public class CircleProgressBar extends View {
    /**
     * 绘制百分比的圆，一共有四部分，分别是里面的文字、背景圆、默认圆环、开始绘制的圆环；
     * 思路：首先需要四支画笔, 设置画笔对应的属性等；
     */
    private Paint roundColorPaint;//外圆画笔
    private Paint mCirclePaint;//中心园的画笔
    private Paint mTextPaint;//文字的画笔
    private Paint mArcPaint;//外圆环的画笔
    private int mCircleX;//设置圆心x坐标
    private int mCircleY;//设置圆心y坐标
    private float mCurrentAngle;//当前角度
    private RectF mArcRectF;//画中心园的外接矩形，用来画圆环用
    private float mStartSweepValue;//圆环开始角度
    private float mTargetPercent;//设置目标的百分比(也就是后台返回的数据)
    private float mCurrentPercent;//当前百分比

    private int mRadius;//圆的半径
    private int mCircleBackground;//中间圆的背景颜色
    private int mRingColor;//外圆环的颜色  第二次画圆的颜色
    private int roundColor; //外圆环的颜色 第一次画圆的颜色
    private int mTextSize;//字体大小
    private int mTextColor;//字体颜色
    public CircleProgressBar(Context context) {
        super(context);
        //初始化数据
        init(context);
    }
    public CircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 自定义属性，attr
        // 使用TypedArray
        //自定义属性 values/attr
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PercentageRing);
        //中间圆的背景颜色  默认 - 白色
        mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xff000000);
        //外圆环的颜色  默认 - 灰色
        roundColor = typedArray.getColor(R.styleable.PercentageRing_circleColor, 0xfff5f5f5);
        //外圆环的颜色  动态画圆 - 默认-红色
        mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xfff5f5f5);
        //中间圆的半径 默认为80
        mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 80);
        //字体颜色 默认 - 灰色
        mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xff999999);
        //最后一定要调用这个 释放掉TypedArray
        typedArray.recycle();
        //初始化数据
        init(context);
    }

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

//    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
//        super(context, attrs, defStyleAttr, defStyleRes);
//        init(context);
//    }
    private void init(Context context){
        //圆环开始角度 -90° 正北方向
        mStartSweepValue = -90;
        //当前角度
        mCurrentAngle = 0;
        //当前百分比
        mCurrentPercent = 0;
        //设置中心园的画笔
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(mCircleBackground);
        mCirclePaint.setStyle(Paint.Style.FILL);
        //设置文字的画笔
        mTextPaint = new Paint();
        mTextPaint.setColor(mTextColor);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setStrokeWidth((float) (0.025*mRadius));
        mTextPaint.setTextSize(mRadius/2);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        //设置外圆环的画笔
        mArcPaint = new Paint();
        roundColorPaint = new Paint();
        roundColorPaint.setColor(roundColor);
        mArcPaint.setAntiAlias(true);
        mArcPaint.setColor(mRingColor);
        mArcPaint.setStyle(Paint.Style.STROKE);
        mArcPaint.setStrokeWidth((float) (0.075*mRadius));
        //获得文字的字号 因为要设置文字在圆的中心位置
        mTextSize = (int) mTextPaint.getTextSize();
    }
    //主要是测量wrap_content时候的宽和高，因为宽高一样，只需要测量一次宽即可，高等于宽
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measure(widthMeasureSpec), measure(widthMeasureSpec));
        //设置圆心坐标
        mCircleX = getMeasuredWidth()/2;
        mCircleY = getMeasuredHeight()/2;
        //如果半径大于圆心横坐标，需要手动缩小半径的值，否则就画到外面去了
        if (mRadius>mCircleX) {
            //设置半径大小为圆心横坐标到原点的距离
            mRadius = mCircleX;
            mRadius = (int) (mCircleX-0.075*mRadius);
            //因为半径改变了，所以要重新设置一下字体宽度
            mTextPaint.setStrokeWidth((float) (0.025*mRadius));
            //重新设置字号
            mTextPaint.setTextSize(mRadius/2);
            //重新设置外圆环宽度
            mArcPaint.setStrokeWidth((float) (0.075*mRadius));
            //重新获得字号大小
            mTextSize = (int) mTextPaint.getTextSize();
        }
        //画中心园的外接矩形，用来画圆环用
        mArcRectF = new RectF(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius);
    }

    //当wrap_content的时候，view的大小根据半径大小改变，但最大不会超过屏幕
    private int measure(int measureSpec){
        int result=0;
        //1、先获取测量模式 和 测量大小
        //2、如果测量模式是MatchParent 或者精确值，则宽为测量的宽
        //3、如果测量模式是WrapContent ，则宽为 直径值 与 测量宽中的较小值；否则当直径大于测量宽时，会绘制到屏幕之外；
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        }else {
            result =(int) (1.075*mRadius*2);
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
    //开始画中间圆、文字和外圆环
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //画中间圆
            canvas.drawCircle(mCircleX, mCircleY, mRadius, mCirclePaint);
            //画圆环
        roundColorPaint.setStyle(Paint.Style.STROKE);
        //设置外圆环的宽度（默认灰色的圆环）
        roundColorPaint.setStrokeWidth((float) (0.075*mRadius));
        canvas.drawCircle(mCircleX, mCircleY, mRadius, roundColorPaint);
        //动态绘制红色的圆环
        canvas.drawArc(mArcRectF, mStartSweepValue ,mCurrentAngle, false, mArcPaint);
        //画文字 -  此处可以注销(原因：不能绘制有小数的百分比，例如：1.4%   如果是5%、12%这些可以不用注销下面代码)，自定义布局将获取的值写在Textview上，
        //再使用下面的setTargetPercent方法获取数据动态画圆
        //canvas.drawText(String.valueOf(mCurrentPercent)+"%", mCircleX, mCircleY+mTextSize/4, mTextPaint);
        //判断当前百分比是否小于设置目标的百分比
        if (mCurrentPercent<mTargetPercent) {
            //当前百分比+1
            mCurrentPercent+=1;
            //当前角度+360
            mCurrentAngle+=3.6;
            //每10ms重画一次
            postInvalidateDelayed(10);
        }
    }
    //设置目标的百分比
    public void setTargetPercent(float percent){
        this.mTargetPercent = percent;
    }
}

这个可以根据自己的需求来绘制自己喜欢的图形，上面的就是绘制出的自定义view的形状。

第二步：现在开始在activity中进行视图的绘制。

<?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"
    tools:context="com.ky.circleprogressbar.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="40dp"
        android:orientation="horizontal"
        >

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <com.ky.circleprogressbar.CircleProgressBar
                android:id="@+id/recommend_progressBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:circleBackground="#00000000"
                android:layout_centerHorizontal="true"
                app:ringColor="#ffea4745"
                app:textColor="#ff999999"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:orientation="horizontal"
                android:visibility="visible">

                <TextView
                    android:id="@+id/recommend_rate_circle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text=""
                    android:textColor="#ff999999"
                    android:textSize="14.0sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="%"
                    android:textColor="#ff999999"
                    android:textSize="12.0sp" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

同时，这个也是，也可以根据自己的需求绘制。

第三步：不用说就是在activity中去调用了，那么怎样去调用呢，其实很简单。

    private CircleProgressBar recommend_progressBar;//circle百分比
    private TextView recommend_rate_circle;//百分比利率

    private float aFloat = 75.8f;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recommend_progressBar = (CircleProgressBar) findViewById(R.id.recommend_progressBar);
        recommend_rate_circle = (TextView) findViewById(R.id.recommend_rate_circle);
        recommend_rate_circle.setText(String.valueOf(aFloat));//百分比利率
        recommend_progressBar.setTargetPercent(aFloat);//circle百分比
    }

是不是很简单呢？基本上自定义view绘制的流程就是这样，其实很简单的，主要是自己有思路。

好了今天就介绍到这里了，有问题的地方可以提出更正！