كيف أعمل إطار Stroke لدائرة ببرمجة java على android Studio؟

يمكن إضافة بعض الخصائص لعنصر Circle بداخل ملف Xml ، حيث تعمل هذه الخصائص على التحكم في لون، سمك الإطار المحيط بالدائرة، مثلا:

في ملف res/values/attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <declare-styleable name="CircleView">
        <attr name="strokeWidth" format="dimension"/>
        <attr name="strokeColor" format="color|reference"/>
        <attr name="fillColor" format="color|reference"/>
        <attr name="circleRadius" format="dimension"/>
        <attr name="circleGap" format="dimension"/>
    </declare-styleable>
 
</resources>

ملف CircleView.Java وهو ملف كلاس المسؤول عن رسم الدائرة:

package ms.cloudtea.customcircleview.app.ui;
 
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
 
import ms.cloudtea.customcircleview.app.R;
 
/**
 * Created by Shahab on 3/20/14.
 */
public class CircleView
extends AbstractBaseView
{
 
    private int circleRadius = 20;
    private int strokeColor = 0xFFFF8C00;
    private int strokeWidth = 15;
    private int fillColor = 0XFFFFAB00;
    private int circleGap = 20;
 
    public CircleView(Context context) {
        super(context);
 
        init();
    }
 
    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
 
        init();
    }
 
    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
 
        TypedArray aTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleView, defStyleAttr, 0);
 
        strokeColor = aTypedArray.getColor(R.styleable.CircleView_strokeColor, strokeColor);
        strokeWidth = aTypedArray.getDimensionPixelSize(R.styleable.CircleView_strokeWidth, strokeWidth);
        fillColor = aTypedArray.getColor(R.styleable.CircleView_fillColor, fillColor);
        circleRadius = aTypedArray.getDimensionPixelSize(R.styleable.CircleView_circleRadius, circleRadius);
        circleGap = aTypedArray.getDimensionPixelSize(R.styleable.CircleView_circleGap, circleGap);
 
        aTypedArray.recycle();
 
        init();
    }
 
    public CircleView(Context context, int strokeColor, int strokeWidth, int fillColor, int circleRadius, int circleGap) {
        super(context);
        this.strokeColor = strokeColor;
        this.strokeWidth = strokeWidth;
        this.fillColor = fillColor;
        this.circleRadius = circleRadius;
        this.circleGap = circleGap;
 
        init();
    }
 
    private void init() {
        this.setMinimumHeight(circleRadius * 2 + strokeWidth);
        this.setMinimumWidth(circleRadius * 2 + strokeWidth);
        this.setSaveEnabled(true);
    }
 
    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int w = this.getWidth();
        int h = this.getHeight();
 
        int ox = w/2;
        int oy = h/2;
 
        canvas.drawCircle(ox, oy, circleRadius, getStroke());
        canvas.drawCircle(ox, oy, circleRadius - circleGap, getFill());
    }
 
    private Paint getStroke()
    {
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setStrokeWidth(strokeWidth);
        p.setColor(strokeColor);
        p.setStyle(Paint.Style.STROKE);
        return p;
    }
 
    private Paint getFill()
    {
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(fillColor);
        p.setStyle(Paint.Style.FILL);
        return p;
    }
 
    @Override
    protected int hGetMaximumHeight() {
        return circleRadius * 2 + strokeWidth;
    }
 
    @Override
    protected int hGetMaximumWidth() {
        return circleRadius * 2 + strokeWidth;
    }
 
    public int getCircleRadius() {
        return circleRadius;
    }
 
    public void setCircleRadius(int circleRadius) {
        this.circleRadius = circleRadius;
    }
 
    public int getStrokeColor() {
        return strokeColor;
    }
 
    public void setStrokeColor(int strokeColor) {
        this.strokeColor = strokeColor;
    }
 
    public int getStrokeWidth() {
        return strokeWidth;
    }
 
    public void setStrokeWidth(int strokeWidth) {
        this.strokeWidth = strokeWidth;
    }
 
    public int getFillColor() {
        return fillColor;
    }
 
    public void setFillColor(int fillColor) {
        this.fillColor = fillColor;
    }
 
    public int getCircleGap() {
        return circleGap;
    }
 
    public void setCircleGap(int circleGap) {
        this.circleGap = circleGap;
    }
}

ثم ملف layout/activty_main.xml:

<ms.cloudtea.customcircleview.app.ui.CircleView
        android:id="@+id/circle_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        cloudteams:circleRadius="@dimen/circle_view_radius"
        cloudteams:strokeWidth="@dimen/circle_view_stroke"
        cloudteams:circleGap="@dimen/circle_view_gap"
        cloudteams:fillColor="@android:color/holo_orange_light"
        cloudteams:strokeColor="@android:color/holo_purple"/>