自定義View之圓環的繪製

前言

這個也算是已經寫過的例子了,整理了一下就拿出來了,參考了一篇文章,並在原有的基礎上優化了圓環上下段之間的銜接間隔問題,時間久遠,找不到文章的地址了,如果有幫忙找到,請聯繫我加上去,謝謝.

效果

代碼

public class CircleRingView extends View {
    private static final String TAG = "SleepRingView";
    private int[] mColors;
    private Paint circlePaint;                                                                      //錶盤外輪廓畫筆
    private Paint linePaint;                                                                       // 錶盤內短線畫筆
    private int mWidth;
    private int mHeight;
    private float startPercent = 0;
    private float initStartPercent;
    //圓環的畫筆
    private Paint cyclePaint;
    //圓的直徑
    private float mRadius = 300;
    //圓的粗細
    private float mStrokeWidth = 80;
    private List<CircleRingMode> ringModes = new ArrayList<>();
    private Context mContext;
    private int startY = 0;
    private ArgbEvaluator argbEvaluator = new ArgbEvaluator();//顏色漸變插值器
    private int radius;

    public CircleRingView(Context context) {
        this(context, null);
    }

    public CircleRingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        mColors = new int[]{
                context.getResources().getColor(R.color.colorSleepGradient2),
                context.getResources().getColor(R.color.colorSleepGradient3),
                context.getResources().getColor(R.color.colorSleepGradient),
                context.getResources().getColor(R.color.colorSleepGradient4)
        };
        initPaint();
    }

    /**
     * 創建所有的paint
     */
    private void initPaint() {
        int strokeWidth = UnitUtil.dp2px(mContext, 2.5f);
        circlePaint = getAvailablePaint(Color.BLUE, strokeWidth, Paint.Style.STROKE);
        linePaint = getAvailablePaint(mContext.getResources().getColor(R.color.colorSleepGradient), strokeWidth, Paint.Style.FILL);
        linePaint.setTextSize(UnitUtil.dp2px(getContext(), 12));
        mStrokeWidth = UnitUtil.dp2px(mContext, 24);
        cyclePaint = getAvailablePaint(Color.BLUE, (int) mStrokeWidth, Paint.Style.STROKE);
        startY = UnitUtil.dp2px(mContext, 10);
    }

    private Paint getAvailablePaint(int color, int strokeWidth, Paint.Style style) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FAKE_BOLD_TEXT_FLAG);
        paint.setAntiAlias(true);
        paint.setColor(color);
        paint.setStyle(style);
        paint.setStrokeWidth(strokeWidth);

        paint.setDither(true);//設置圖像抖動處理
        paint.setStrokeJoin(Paint.Join.ROUND);//畫筆線等連接處的輪廓樣式
        paint.setSubpixelText(true);
        return paint;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        circlePaint.setShader(new LinearGradient(3, 3, mWidth - 3, mHeight - 3, mColors, null, Shader.TileMode.CLAMP));
        canvas.drawCircle(mWidth / 2, mHeight / 2, radius, circlePaint);
        mRadius = radius * 2 - startY * 6;
        canvas.translate(mWidth / 2 - mRadius / 2, mHeight / 2 - mRadius / 2);
        if (ringModes.size() == 0)
            return;
        //畫圓環
        drawCycle(canvas);
        drawSquare(canvas);
    }

    //畫圓環
    private void drawCycle(Canvas canvas) {
        float sweepPercent = 0f;
        CircleRingMode mode;
        startPercent = initStartPercent;
        for (int i = 0; i < ringModes.size(); i++) {
            mode = ringModes.get(i);
            cyclePaint.setColor(mode.getColorValue());
            startPercent += (sweepPercent - 0.5f);
            if (i < 2) {
                sweepPercent = (mode.getProgress() + 0.5f) * 360 / 100f;
                startPercent -= 1f;
            } else if (i == ringModes.size() - 1) {
                sweepPercent = 360f + initStartPercent - startPercent - 0.5f;
            } else {
                sweepPercent = mode.getProgress() * 360 / 100f;
            }
            canvas.drawArc(new RectF(0, 0, mRadius, mRadius), startPercent, sweepPercent, false, cyclePaint);
        }
    }

    private void drawSquare(Canvas canvas) {
        int base = Math.min(mWidth, mHeight) / 25;
        int startTop = mHeight / 2 - base * 3;
        int startLeft = mWidth / 2 + base;
        for (CircleRingMode mode : ringModes) {
            linePaint.setColor(mode.getColorValue());
            canvas.drawRect(new Rect(startLeft, startTop, startLeft + base, startTop + base), linePaint);
            canvas.drawText(mode.getProgress() + "%", startLeft + base + 10, startTop + base, linePaint);
            startTop += base * 2;
        }
    }

    /**
     * 獲取寬和高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        mHeight = getDefaultSize(getSuggestedMinimumWidth(), heightMeasureSpec);
        radius = Math.min(mWidth / 2, mHeight / 2) - UnitUtil.dp2px(mContext, 24);
        Log.d(TAG, "onMeasure: mWidth: " + mWidth + ",mHeight: " + mHeight);
    }


    public void setData(List<CircleRingMode> modeList) {
       this.setData(modeList,0);
    }

    public void setData(List<CircleRingMode> modeList, float hour) {
        if (modeList.size() == 0)
            return;
        if (this.ringModes.size() > 0)
            this.ringModes.clear();
        this.ringModes.addAll(modeList);
        this.startPercent = this.initStartPercent = 360 * hour / 24f - 90;
        invalidate();
    }
}

最後

Github項目地址

有不對的地方歡迎留言指正,不勝感激.