自定义View画直线、圆环数据变动View

对话、

发布于 2022-02-22 06:01:57

61500

代码可运行

文章被收录于专栏：Android-XjAndroid-Xj

运行总次数：0

代码可运行

效果

绘制直线

首先我们了解下自定义View

 /**
     * 测量的方法
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 定位的方法
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

    /**
     * 绘制View的方法
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

知道了这些下面我们开始绘制直线

  //画笔
 Paint red=new Paint();
 Paint green=new Paint();
 Paint text=new Paint();
 Paint black=new Paint();

这就是我们的画笔

现在开始给画笔安装笔芯

  //颜色
        red.setColor(Color.RED);
        //宽度
        red.setStrokeWidth(50);
        red.setAntiAlias(true);
        red.setStyle(Paint.Style.FILL);
        //抗锯齿功能
        green.setAntiAlias(true);
        green.setColor(Color.GREEN);
        green.setStyle(Paint.Style.FILL);
        //Paint.Style.FILL :填充内部
        // Paint.Style.FILL_AND_STROKE ：填充内部和描边
        // Paint.Style.STROKE ：仅描边
        green.setStrokeWidth(50);

        text.setStrokeWidth(4);
        text.setColor(Color.BLACK);
        text.setTextSize(30);

        //绘制文字的笔
        black.setColor(Color.BLACK);
        black.setStrokeWidth(2);
        black.setStyle(Paint.Style.STROKE);

笔芯装完

开始画！

  //画出红线
        canvas.drawLine(0,70,redLength,70,red);
        //画出绿线
        canvas.drawLine(0,70,greenLength,70,green);
        //画出文字
        canvas.drawText(end+"",end,25, text);
        canvas.drawText(start+"",0,25, text);

直线画完了

最后我们添加上刷新的方法

//刷新
        invalidate();

完整代码

public class DrawLine  extends View {
    //画笔
    Paint red=new Paint();
    Paint green=new Paint();
    Paint text=new Paint();
    Paint black=new Paint();
    /**
     * 整体长度
     */
    private float  redLength=400;
    /**
     * 进度长度
     */
    private  float  greenLength=200;
    /**
     * 起点显示文本
     */
    private  float  start=0;
    /**
     * 进度条显示文本
     */
    private  float end=greenLength;

    public float getRedLength() {
        return redLength;
    }

    public float getStart() {
        return start;
    }

    public void setStart(float start) {
        this.start = start;
    }

    public float getEnd() {
        return end;
    }

    public void setEnd(float end) {
        this.end = end;
    }

    public void setRedLength(float redLength) {
        this.redLength = redLength;
    }

    public float getGreenLength() {
        return greenLength;
    }

    public void setGreenLength(float greenLength) {
        this.greenLength = greenLength;
    }



    public DrawLine(Context context) {
        super(context);
    }

    /**
     * 绘制直线
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //颜色
        red.setColor(Color.RED);
        //宽度
        red.setStrokeWidth(50);
        red.setAntiAlias(true);
        red.setStyle(Paint.Style.FILL);
        //抗锯齿功能
        green.setAntiAlias(true);
        green.setColor(Color.GREEN);
        green.setStyle(Paint.Style.FILL);
        //Paint.Style.FILL :填充内部
        // Paint.Style.FILL_AND_STROKE ：填充内部和描边
        // Paint.Style.STROKE ：仅描边
        green.setStrokeWidth(50);

        text.setStrokeWidth(4);
        text.setColor(Color.BLACK);
        text.setTextSize(30);

        //绘制文字的笔
        black.setColor(Color.BLACK);
        black.setStrokeWidth(2);
        black.setStyle(Paint.Style.STROKE);

        //画出红线
        canvas.drawLine(0,70,redLength,70,red);
        //画出绿线
        canvas.drawLine(0,70,greenLength,70,green);
        //画出文字
        canvas.drawText(end+"",end,25, text);
        canvas.drawText(start+"",0,25, text);
        //刷新
        invalidate();
    }
}

代码其实很少，我添加了些get、set方法

绘制圆环

同样的我们要有一支笔

 mPaint = new Paint();

给笔装上笔芯

   mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
       mPaint.setAntiAlias(true); // 消除锯齿
       mPaint.setStyle(Paint.Style.STROKE); // 设置空心

好了现在我们开始画

 		RectF oval = new RectF(center - radius, center - radius,
 		 center + radius, center + radius); // 用于定义的圆弧的形状和大小的界限
       ArrayList list=new ArrayList();
       mPaint.setColor(mFirstColor); // 设置圆环的颜色
       canvas.drawCircle(center, center, radius, mPaint); // 画出圆环
       mPaint.setColor(mSecondColor); // 设置圆环的颜色
       canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧

       /**
        * oval :指定圆弧的外轮廓矩形区域。
        * startAngle: 圆弧起始角度，单位为度。
        * sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
        * useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。
        * paint: 绘制圆弧的画板属性，如颜色，是否填充等。
        */

最后同样是刷新

 invalidate();

完整代码

public class DrawCircle extends View {
    /**
     * 第一种颜色
     */
    private int mFirstColor=Color.parseColor("#fd0000");
    /**
     * 第二种颜色
     */
    private int mSecondColor=Color.parseColor("#0022ff");
    /**
     * 圆弧的宽度
     */
    private int mCircleWidth=60;
    /**
     * 画笔
     */
    private Paint mPaint;

    public int getmProgress() {
        return mProgress;
    }

    public void setmProgress(int mProgress) {
        this.mProgress = mProgress;
    }


    /**
     * 圆弧的度数
     */
    private int mProgress;

    /**
     *圆环大小
     */
    private int  mwidth=300;

    public int getMwidth() {
        return mwidth;
    }

    public void setMwidth(int mwidth) {
        this.mwidth = mwidth;
    }

    public DrawCircle(Context context) {
        super(context);
        mPaint = new Paint();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        int center = getMwidth()/ 2;
        int radius = center - mCircleWidth / 2;
        mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
        mPaint.setAntiAlias(true); // 消除锯齿
        mPaint.setStyle(Paint.Style.STROKE); // 设置空心
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius); // 用于定义的圆弧的形状和大小的界限
        ArrayList list=new ArrayList();
        mPaint.setColor(mFirstColor); // 设置圆环的颜色
        canvas.drawCircle(center, center, radius, mPaint); // 画出圆环
        mPaint.setColor(mSecondColor); // 设置圆环的颜色
        canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧

        /**
         * oval :指定圆弧的外轮廓矩形区域。
         * startAngle: 圆弧起始角度，单位为度。
         * sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
         * useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。
         * paint: 绘制圆弧的画板属性，如颜色，是否填充等。
         */
        invalidate();
    }
}