由于項(xiàng)目需要 簡(jiǎn)單繪制一個(gè)圓形的充電進(jìn)度

圖片

WeChatSight342.gif

package com.yunzao.dd.support.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

import com.ike.l2_base.utils.DUtils;
import com.yunzao.dd.R;
import com.yunzao.dd.utils.LogUtil;

/**
 * @auth ike
 * @date 2018/5/9
 * @desc 類描述：充電中VIew
 */

public class ChargingView extends View {
    private static final String TAG = "ChargingView";

    private Context mContext;
    private Canvas mCanvas;
    //view寬高
    private int view_width = 0;
    private int view_height = 0;
    //圓環(huán)到view的間距
    private int padding = 240;
    //角標(biāo)寬度
    private int angleFlag_width = 24;
    private int angleFlag_textSize = 12;//角標(biāo)文字大小
    private int angleFlag_textPadding = 60;
    //圓環(huán)半徑
    private int radius = 0;
    //圓環(huán)寬度
    private int round_width = 24;
    //圓心坐標(biāo)
    private int centerX = 0;
    private int centerY = 0;
    private PaintFlagsDrawFilter filter;

    //畫(huà)筆
    private Paint paint;


    //文字的寬度
    private int textWidth = 0;
    //文字圖片
    private Bitmap textBitmap;

    //進(jìn)度 最大值100
    private int mProgress = 50;


    public ChargingView(Context context) {
        super(context);
        mContext = context;
        init();
    }

    public ChargingView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }

    /**
     * 初始化
     */
    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        filter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);

        angleFlag_textSize = DUtils.sp2px(mContext, angleFlag_textSize);
    }

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

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        view_width = right - left;
        view_height = bottom - top;
        radius = (view_width - padding) / 2;
        centerX = view_width / 2;
        centerY = view_height / 2;
        textWidth = (view_width - padding) / 2 - 200;
        LogUtil.info(TAG, "width:" + view_width + "/height:" + view_height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mCanvas = canvas;
        //從canvas層面抗鋸齒
        canvas.setDrawFilter(filter);

        //1.繪制白色背景圓環(huán)
        paint.reset();
        paint.setColor(ContextCompat.getColor(mContext, R.color.text_white));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(round_width);
        canvas.drawCircle(centerX, centerY, radius, paint);

        //2.畫(huà)開(kāi)始點(diǎn)的角標(biāo)
        paint.reset();
        paint.setColor(ContextCompat.getColor(mContext, R.color.text_white));
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect((view_width - angleFlag_width) / 2, padding / 2 - angleFlag_width - round_width / 2, (view_width - angleFlag_width) / 2 + angleFlag_width, padding / 2, paint);

        //3.畫(huà)00文字
        drawAngleFlagText(canvas, mProgress);

        //4.畫(huà)圓弧進(jìn)度
        drawProgress(canvas, mProgress);
    }

    /**
     * 繪制進(jìn)度
     *
     * @param canvas
     * @param progress
     */
    private void drawProgress(Canvas canvas, int progress) {
        int angle = 3600 / 100 * progress / 10;
        LogUtil.info(TAG, "進(jìn)度：" + progress + "、角度：" + angle);
        /**
         * 畫(huà)圓弧 ，畫(huà)圓環(huán)的進(jìn)度
         */
        paint.reset();
        paint.setColor(ContextCompat.getColor(mContext, R.color.green));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(round_width);

        //設(shè)置進(jìn)度是實(shí)心還是空心
        paint.setStrokeWidth(round_width); //設(shè)置圓環(huán)的寬度
        RectF oval = new RectF(centerX - radius, centerX - radius, centerX
                + radius, centerX + radius);  //用于定義的圓弧的形狀和大小的界限
        canvas.drawArc(oval, 270, angle, false, paint);  //根據(jù)進(jìn)度畫(huà)圓弧

        //每到12.5畫(huà)一次角標(biāo)
//        for (float i = 0; i < progress; i += 0.5) {
//            if ((i * 10) % 125 == 0) {
//                drawAngleFlag(canvas, (int) (i * 10));
//            }
//        }
        //繪制文字圖片 并保存canvas
        drawBitmapText(canvas, progress);
        canvas.save();

        //繪制角標(biāo)
        drawAngleFlag(canvas, angle);

    }

    /**
     * 繪制進(jìn)度角標(biāo) 綠色
     *
     * @param angle
     */
    private void drawAngleFlag(Canvas canvas, int angle) {
        LogUtil.info(TAG, "繪制角標(biāo)：" + angle);
        paint.reset();
        paint.setColor(ContextCompat.getColor(mContext, R.color.green));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(round_width);

        //設(shè)置進(jìn)度是實(shí)心還是空心
        paint.setStrokeWidth(round_width); //設(shè)置圓環(huán)的寬度

        RectF oval = new RectF(
                centerX - radius - angleFlag_width,
                centerX - radius - angleFlag_width,
                centerX + radius + angleFlag_width,
                centerX + radius + angleFlag_width);  //用于定義的圓弧的形狀和大小的界限
//        canvas.drawArc(oval, 270, angle, false, paint);  //根據(jù)進(jìn)度畫(huà)圓弧

        for (int i = 0; i <= angle / 45; i++) {
            canvas.drawLine(centerX,
                    centerY - radius + round_width / 2,
                    centerX,
                    centerY - radius - angleFlag_width - 12, paint);
            canvas.rotate(45, centerX, centerY);
        }
    }

    /**
     * 繪制角標(biāo)文字
     *
     * @param canvas
     */
    private void drawAngleFlagText(Canvas canvas, int progress) {
        //3.畫(huà)四個(gè)角文字
        paint.reset();
        paint.setTextSize(angleFlag_textSize);
        paint.setColor(ContextCompat.getColor(mContext, R.color.text_black));
        //上
        canvas.drawText("00",
                view_width / 2 - getTextWidth("00", paint) / 2,
                padding / 2 - angleFlag_textPadding,
                paint);
        if (progress >= 25) {
            //右
            canvas.drawText("25",
                    view_width - getTextWidth("25", paint) - (padding / 2 - getTextWidth("25", paint) - angleFlag_textPadding),
                    centerY + getTextHeight("50", paint) / 3,
                    paint);
        }
        if (progress >= 50) {
            //下
            canvas.drawText("50",
                    view_width / 2 - getTextWidth("50", paint) / 2,
                    view_height - (padding / 2 - angleFlag_textPadding - getTextHeight("50", paint) + round_width / 2),
                    paint);
        }
        if (progress >= 75) {
            //左
            canvas.drawText("75",
                    padding / 2 - angleFlag_textPadding - getTextWidth("50", paint),
                    centerY + getTextHeight("50", paint) / 3,
                    paint);
        }


    }

    /**
     * 繪制圖片文字
     *
     * @param canvas
     * @param progress
     */
    private void drawBitmapText(Canvas canvas, int progress) {
        paint.reset();
        int StartX = (view_width - textWidth) / 2;
//        paint.setColor(ContextCompat.getColor(mContext, R.color.text_red));
//        paint.setStyle(Paint.Style.STROKE);
//        paint.setStrokeWidth(round_width);
//        canvas.drawLine(StartX, view_height / 2, StartX + 5, view_height / 2, paint);
        Bitmap[] bitmaps = createBitmap(progress);
        for (int i = 1; i <= bitmaps.length; i++) {
            LogUtil.info(TAG, "文字 X ： " + StartX + ((textWidth / bitmaps.length) * (i - 1)));
            int temp = (textWidth - (bitmaps[i - 1].getWidth() * bitmaps.length)) / 2;
            canvas.drawBitmap(bitmaps[i - 1], StartX + ((textWidth / bitmaps.length) * (i - 1)) + temp, view_height / 2 - bitmaps[i - 1].getHeight() / 2, paint);

        }
    }

    /**
     * 創(chuàng)建圖標(biāo)drawable
     */
    private Bitmap[] createBitmap(int mProgress) {
        Bitmap[] bitmaps = new Bitmap[("" + mProgress).length()];
        String text = mProgress + "";
        for (int i = 0; i < text.length(); i++) {
            int temp = Integer.parseInt(text.charAt(i) + "");
//            LogUtil.info(TAG, "temp:" + text.charAt(i));
            textBitmap = BitmapFactory.decodeResource(mContext.getResources(), getDrawableId(temp));
            int oldSize = textBitmap.getHeight();
            int newSize = textWidth / text.length();
            float scale = newSize * 1.0f / oldSize;
            Matrix matrix = new Matrix();
            matrix.setScale(scale, scale);
            bitmaps[i] = textBitmap;
        }
        return bitmaps;
    }

    /**
     * 獲取圖片ID
     *
     * @param flag
     * @return
     */
    private int getDrawableId(int flag) {
        int drawableId = 0;
        switch (flag) {
            case 0:
                drawableId = R.drawable.icon_0;
                break;
            case 1:
                drawableId = R.drawable.icon_1;
                break;
            case 2:
                drawableId = R.drawable.icon_2;
                break;
            case 3:
                drawableId = R.drawable.icon_3;
                break;
            case 4:
                drawableId = R.drawable.icon_4;
                break;
            case 5:
                drawableId = R.drawable.icon_5;
                break;
            case 6:
                drawableId = R.drawable.icon_6;
                break;
            case 7:
                drawableId = R.drawable.icon_7;
                break;
            case 8:
                drawableId = R.drawable.icon_8;
                break;
            case 9:
                drawableId = R.drawable.icon_9;
                break;
        }
        return drawableId;
    }

    /**
     * 計(jì)算文字寬度
     */
    private int getTextWidth(String textString, Paint mPaint) {
        Rect bounds = new Rect();
        mPaint.getTextBounds(textString, 0, textString.length(), bounds);
        return bounds.right - bounds.left;
    }

    //計(jì)算文字高度
    private int getTextHeight(String textString, Paint mPaint) {
        // 1.用FontMetrics對(duì)象計(jì)算高度
        Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
        return fontMetrics.bottom - fontMetrics.top;
    }

    /**
     * 繪制進(jìn)度
     *
     * @param progress
     */
    public void setProgress(int progress) {
        if (progress > 100)
            progress = 100;
        mProgress = progress;
        postInvalidate();
    }

}