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();
        }
    }*/

}