Android自定義View，簡單的圖形繪制

一  res\values下建立resources檔案attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomView">
        <attr name="text" format="string" />
        <attr name="textSize" format="dimension" />
        <attr name="textColor" format="color" />
        <attr name="color" format="color" />
        <attr name="ringWidth" format="dimension" />
        <attr name="rectWidth" format="dimension" />
        <attr name="bgColor" format="color" />
        <attr name="arcColor" format="color" />
    </declare-styleable>

</resources>
           

二  建立layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:toos="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:gravity="center"
    tools:context=".MainActivity">

    <com.test.customview.CustomView
        android:id="@+id/circle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        toos:arcColor="#FFFFFF"
        toos:bgColor="#000000"
        toos:color="#ff3377"
        toos:rectWidth="20dp"
        toos:ringWidth="20dp"
        toos:text="圓"
        toos:textColor="#000000"
        toos:textSize="20sp" />

</RelativeLayout>
           

三  建立Class，繼承View

package com.test.customview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by ${DarkGown} on 2019/4/25
 */
public class CustomView extends View {

    private final String text;
    private final float textSize;
    private final int color;
    private final int bgColor;
    private final int arcColor;
    private final float ringWidth;
    private final float rectWidth;

    private Paint paint_rect_fill;
    private Paint paint_rect_stroke;
    private Paint paint_ring;
    private Paint paint_circle;
    private Paint paint_arc;
    private Paint paint_text;


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

        //擷取屬性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
        text = typedArray.getString(R.styleable.CustomView_text);
        color = typedArray.getColor(R.styleable.CustomView_color, Color.RED);
        bgColor = typedArray.getColor(R.styleable.CustomView_bgColor, Color.BLACK);
        arcColor = typedArray.getColor(R.styleable.CustomView_arcColor, Color.WHITE);
        textSize = typedArray.getDimension(R.styleable.CustomView_textSize, 0);
        ringWidth = typedArray.getDimension(R.styleable.CustomView_ringWidth, 0);
        rectWidth = typedArray.getDimension(R.styleable.CustomView_rectWidth, 0);

        typedArray.recycle();
        init();
    }


    private void init() {

        //背景矩形
        paint_rect_fill = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint_rect_fill.setStyle(Paint.Style.FILL);
        paint_rect_fill.setColor(bgColor);

        //邊框矩形
        paint_rect_stroke = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint_rect_stroke.setStyle(Paint.Style.STROKE);
        paint_rect_stroke.setStrokeWidth(rectWidth);
        paint_rect_stroke.setColor(color);

        //圓環
        paint_ring = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint_ring.setStyle(Paint.Style.STROKE);
        paint_ring.setStrokeWidth(ringWidth);
        paint_ring.setColor(color);

        //圓
        paint_circle = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint_circle.setStyle(Paint.Style.FILL);
        paint_circle.setColor(color);

        //扇形
        paint_arc = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint_arc.setStyle(Paint.Style.FILL);
        paint_arc.setColor(arcColor);

        //文字
        paint_text = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint_text.setTextAlign(Paint.Align.CENTER);
        paint_text.setTextSize(textSize);
    }


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

        //控件寬高
        int width = getWidth();
        int height = getHeight();

        //圓環半徑
        float radius_ring = Math.min(width, height) / 2f - rectWidth * 2f - ringWidth / 2f;
        //圓半徑
        float radius_circle = radius_ring - ringWidth * 1.5f;

        //畫背景矩形
        canvas.drawRect(0, 0, width, height, paint_rect_fill);
        //畫邊框矩形
        canvas.drawRect(rectWidth / 2f, rectWidth / 2f, width - rectWidth / 2f, height - rectWidth / 2f, paint_rect_stroke);
        //畫圓環
        canvas.drawCircle(width / 2f, height / 2f, radius_ring, paint_ring);
        //畫圓
        canvas.drawCircle(width / 2f, height / 2f, radius_circle, paint_circle);
        //畫扇形
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
            canvas.drawArc(width / 2f - radius_circle, height / 2f - radius_circle, width / 2f + radius_circle, height / 2f + radius_circle, -90, 150, true, paint_arc);
        //畫文字
        canvas.drawText(text, width / 2f, height / 2f + textSize / 3f, paint_text);
    }
}