Android-自定义圆环

效果图：

布局的代码，指定引用自定义View类：

<!-- 绘制圆环 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myswitch="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="400px"
    android:orientation="horizontal">

    <custom.view.upgrade.draw_ring.DrawRing
        android:layout_width="387px"
        android:layout_height="387px"
        />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="40dp"
        android:paddingTop="30dp"
        android:paddingBottom="30dp">

        <View
            android:layout_width="16dip"
            android:layout_height="16dip"
            android:background="@drawable/super_financing"/>

        <View
            android:layout_width="16dip"
            android:layout_height="16dip"
            android:background="@drawable/true_financing"
            android:layout_centerVertical="true"/>

        <View
            android:layout_width="16dip"
            android:layout_height="16dip"
            android:background="@drawable/diandian_voal"
            android:layout_alignParentBottom="true"
            />

    </RelativeLayout>

</LinearLayout>

三个小圆点的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="@color/ring_test2" />

    <corners android:radius="5dip" />

</shape>


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="@color/ring_test3" />

    <corners android:radius="5dip" />

</shape>


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="@color/ring_test1" />

    <corners android:radius="5dip" />

</shape>

颜色值代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    
    <color name="ring_test1">#BED887</color>
    <color name="ring_test2">#F53D4D</color>
    <color name="ring_test3">#ECBBB9</color>
</resources>

注意：我这一版，百分比值与绘制环的百分之多少，是写死的，后续我会更新成动态的绘制的

自定义圆环代码：

package custom.view.upgrade.draw_ring;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Build;
import android.os.SystemClock;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.View;

import custom.view.R;

public class DrawRing extends View {

    // 定义画笔
    private Paint mPaint1;

    private Paint mPaint2;

    private Paint mPaint3;

    private Paint mPaintText;

    @RequiresApi(api = Build.VERSION_CODES.M)
    public DrawRing(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint1 = new Paint();
        mPaint1.setAntiAlias(true);
        mPaint1.setColor(context.getColor(R.color.ring_test1));
        // mPaint1.setColor(Color.GREEN);
        //  设置样式为，空心的，这样那园环就出来了
        mPaint1.setStyle(Paint.Style.STROKE);
        // 设置那个圆环的粗细
        mPaint1.setStrokeWidth(40);

        mPaint2 = new Paint();
        mPaint2.setAntiAlias(true);
        mPaint2.setColor(context.getColor(R.color.ring_test2));
        // mPaint2.setColor(Color.RED);
        //  设置样式为，空心的，这样那园环就出来了
        mPaint2.setStyle(Paint.Style.STROKE);
        // 设置那个圆环的粗细
        mPaint2.setStrokeWidth(40);

        mPaint3 = new Paint();
        mPaint3.setAntiAlias(true);
        mPaint3.setColor(context.getColor(R.color.ring_test3));
        // mPaint3.setColor(Color.BLUE);
        //  设置样式为，空心的，这样那园环就出来了
        mPaint3.setStyle(Paint.Style.STROKE);
        // 设置那个圆环的粗细
        mPaint3.setStrokeWidth(40);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextSize(24);
    }

    private int w;
    private int h;

    private final int MOVE_VALUE = 88;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        w = MeasureSpec.getSize(widthMeasureSpec);
        h = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(w, h);
    }

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

        // 定义一个区域
        // 左边，上边，都给0
        // 右边与下边都给200
        RectF rectF = new RectF(20, 20, 356, 356);

        /*canvas.drawArc(rectF, 0, 241.2f, false, mPaint1);
        canvas.drawArc(rectF, 241.2f, 10, false, mPaint2);*/

        // useCenter：false  代表不花圆心

        // canvas.drawArc(rectF, 此值是开始点, 此值并不是从开始点到此值点 它会记录之前的值自动进行累加,false, mPaint1);

        // 360 * 0.67 = 241.2
        canvas.drawArc(rectF, 0 - MOVE_VALUE, 241.2f, false, mPaint1);

        // 360 * 0.23
        canvas.drawArc(rectF, 241.2f - MOVE_VALUE, 82.0f, false, mPaint2);

        // 360 * 0.10
        canvas.drawArc(rectF, 241.2f + 82.0f - MOVE_VALUE, 36, false, mPaint3);

        canvas.drawText("67%", canvas.getWidth() - 70, (canvas.getHeight() / 2) + 80, mPaintText);

        canvas.drawText("23%", 5, (canvas.getHeight() / 2) - 26, mPaintText);

        canvas.drawText("10%", 116, 34, mPaintText);

       // draw();
    }

    // 可以实现缓慢加载绘制的效果，但没有实际意义，就全部去除了

    /*private int countI;

    private void draw() {
        countI++;
        if (countI < 120) {
            SystemClock.sleep(18);
            invalidate();
        }
    }*/

}