前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义View画直线、圆环数据变动View

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

作者头像
对话、
发布2022-02-22 14:01:57
5450
发布2022-02-22 14:01:57
举报
文章被收录于专栏:Android-Xj

效果

在这里插入图片描述
在这里插入图片描述

绘制直线

首先我们了解下自定义View

代码语言:javascript
复制
 /**
     * 测量的方法
     * @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);
    }

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

代码语言:javascript
复制
  //画笔
 Paint red=new Paint();
 Paint green=new Paint();
 Paint text=new Paint();
 Paint black=new Paint();

这就是我们的画笔

现在开始给画笔安装笔芯

代码语言:javascript
复制
  //颜色
        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);

笔芯装完

开始画!

代码语言:javascript
复制
  //画出红线
        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);

直线画完了

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

代码语言:javascript
复制
//刷新
        invalidate();

完整代码

代码语言:javascript
复制
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方法

绘制圆环

同样的我们要有一支笔

代码语言:javascript
复制
 mPaint = new Paint();

给笔装上笔芯

代码语言:javascript
复制
   mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
       mPaint.setAntiAlias(true); // 消除锯齿
       mPaint.setStyle(Paint.Style.STROKE); // 设置空心

好了现在我们开始画

代码语言:javascript
复制
 		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: 绘制圆弧的画板属性,如颜色,是否填充等。
        */

最后同样是刷新

代码语言:javascript
复制
 invalidate();

完整代码

代码语言:javascript
复制
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();
    }
}

如有不足,请指出谢谢!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果
    • 首先我们了解下自定义View
      • 知道了这些下面我们开始绘制直线
        • 现在开始给画笔安装笔芯
          • 开始画!
            • 最后我们添加上刷新的方法
              • 代码其实很少,我添加了些get、set方法
                • 同样的我们要有一支笔
                  • 给笔装上笔芯
                    • 好了现在我们开始画
                      • 最后同样是刷新
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档