Android 自定义view 定制一个带比例的环形进度控件

最新推荐文章于 2021-05-26 12:42:16 发布
置顶 最新推荐文章于 2021-05-26 12:42:16 发布
阅读量308 收藏
点赞数
文章标签： canvas android paint
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlzlzl1988/article/details/107629394
版权

自定义view 定制一个带比例的环形进度控件，效果图如下：
   

大致思路如下：

  1. 最外层的圆弧
  2. 内层显示进度的圆弧
  3. view内文字显示
 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 中心坐标
         */
        float mCenterX = getWidth() / 2;
        /**
         * 圆弧外轮廓 矩形区域
         */
        RectF mRectF = new RectF(mBorderWidth / 2, mBorderWidth / 2, 2 * mCenterX - mBorderWidth / 2, 2 * mCenterX - mBorderWidth / 2);

        //画背景圆弧
        drawArcOne(canvas, mRectF);
        //画进度圆弧
        drawArcTwo(canvas, mRectF);
        //画中间数字
        drawTextNum(canvas, mCenterX);
        //画中间文字
        drawText(canvas, mCenterX);

    }

最外层的圆弧，绘制开始：

/**
     * 绘制最外层圆弧
     * @param canvas 
     * @param mRectF 
     */
    private void drawArcOne(Canvas canvas, RectF mRectF) {

        Paint paint = new Paint();
        //画笔颜色
        paint.setColor(Color.parseColor("#e0f9ff"));
        //画笔结合处类型 圆形
        paint.setStrokeJoin(Paint.Join.ROUND);
        //护臂落笔出类型  圆形
        paint.setStrokeCap(Paint.Cap.ROUND);
        //画笔类型 设置为 仅填充边框 
        paint.setStyle(Paint.Style.STROKE);
        //设置抗锯齿
        paint.setAntiAlias(true);
        //设置边框宽度
        paint.setStrokeWidth(mBorderWidth);

        /**
         * mRectF 圆形外矩形
         * mStartAngle 起始角度
         * mEndAngle   结束角度
         */
        canvas.drawArc(mRectF, mStartAngle, mEndAngle, false, paint);

    }

绘制内层进度圆弧

/**
     * 绘制内层进度圆弧
     * @param canvas
     * @param mRectF
     */
    private void drawArcTwo(Canvas canvas, RectF mRectF) {

        Paint paint = new Paint();
        //画笔颜色
        paint.setColor(getResources().getColor(R.color.blue_light));
        //画笔宽度
        paint.setStrokeWidth(mBorderWidth);
        //画笔抗锯齿
        paint.setAntiAlias(true);
        //Paint.Style.STROKE 仅填充描边
        paint.setStyle(Paint.Style.STROKE);
        //画笔触笔类型 Paint.Cap.ROUND 圆形
        paint.setStrokeCap(Paint.Cap.ROUND);
        //结合处为 Paint.Join.ROUND 圆形
        paint.setStrokeJoin(Paint.Join.ROUND);

        canvas.drawArc(mRectF, mStartAngle, mCurrentAngle, false, paint);
    }

绘制内层数字

/**
     * 绘制内层数字
     * @param canvas
     * @param centerX
     */
    private void drawTextNum(Canvas canvas, float centerX) {
        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setAntiAlias(true);
        paint.setTextSize(mTextSize);
        paint.setColor(getResources().getColor(R.color.black));
        //字体类型
        Typeface mTypeFace = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
        paint.setTypeface(mTypeFace);
        Rect rect = new Rect();
        paint.getTextBounds(mStepNum, 0, mStepNum.length(), rect);
        //获取文字基线位置
        float biseY = getTextBaseline(paint, getHeight() / 2);
        //为了显示数字之下的文字，在基线坐标基础上减去文字高度的一半
        canvas.drawText(mStepNum, centerX, biseY - rect.height() / 2, paint);
    }

绘制数字下的文字


    /**
     * 绘制文字
     * @param canvas
     * @param mCenterX
     */
    private void drawText(Canvas canvas, float mCenterX) {
        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(getResources().getColor(R.color.black));
        paint.setAntiAlias(true);
        paint.setTextSize(dipToPx(18));
        String s = "步数";
        Rect rect = new Rect();
        paint.getTextBounds(s, 0, 2, rect);
        float biseY = getTextBaseline(paint, getHeight() / 2);

        canvas.drawText(s, mCenterX, biseY + getFontHeight(mTextSize), paint);

    }

对外的方法

 /**
     * 对外的方法
     * @param mTotalNum       总数
     * @param mCurrentStepNum 当前数
     */
    public void setCurrentStep(int mTotalNum, int mCurrentStepNum) {

        if (mCurrentStepNum > mTotalNum) {
            mCurrentStepNum = mTotalNum;
        }
        //上次步数所占圆环比例
        float scalePrevious = (float) Integer.parseInt(mStepNum) / mTotalNum;
        float previousAngle = scalePrevious * mEndAngle;

        // 所走步数所占总数的百分比
        float scale = (float) mCurrentStepNum / mTotalNum;
        float currentAngle = scale * mEndAngle;

        mStepNum = String.valueOf(mCurrentStepNum);
        setTextSize(mCurrentStepNum);

        //执行动画
        startAnimation(previousAngle,currentAngle,animationLength);

    }

属性动画

private void startAnimation(float start, float current, int length) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(start,current);
        valueAnimator.setDuration(length);
        valueAnimator.setTarget(mCurrentAngle);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentAngle = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

下面附上完整代码，望各位大佬指正

//圆弧自定义view

public class ArcView extends View {

    /**
     * 圆弧的宽度
     *
     * @param context
     */
    private float mBorderWidth = dipToPx(10);

    /**
     * 中心数字的大小
     *
     * @param context
     */
    private float mTextSize = dipToPx(22);

    /**
     * 背景圆的起始角度
     *
     * @param context
     */
    private float mStartAngle = 90;
    /**
     * 背景圆的结束角度
     *
     * @param context
     */
    private float mEndAngle = 360;

    /**
     * 进度夹角
     *
     * @param context
     */
    private float mCurrentAngle = 0;

    /**
     * 步数
     */
    private String mStepNum = "0";

    /**
     * 动画时长
     */
    private int animationLength = 1000;

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

    public ArcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 中心坐标
         */
        float mCenterX = getWidth() / 2;
        /**
         * 圆弧外轮廓 矩形区域
         */
        RectF mRectF = new RectF(mBorderWidth / 2, mBorderWidth / 2, 2 * mCenterX - mBorderWidth / 2, 2 * mCenterX - mBorderWidth / 2);

        //画背景圆弧
        drawArcOne(canvas, mRectF);
        //画进度圆弧
        drawArcTwo(canvas, mRectF);
        //画中间数字
        drawTextNum(canvas, mCenterX);
        //画中间文字
        drawText(canvas, mCenterX);

    }

    /**
     * 绘制文字
     * @param canvas
     * @param mCenterX
     */
    private void drawText(Canvas canvas, float mCenterX) {
        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(getResources().getColor(R.color.black));
        paint.setAntiAlias(true);
        paint.setTextSize(dipToPx(18));
        String s = "步数";
        Rect rect = new Rect();
        paint.getTextBounds(s, 0, 2, rect);
        float biseY = getTextBaseline(paint, getHeight() / 2);

        canvas.drawText(s, mCenterX, biseY + getFontHeight(mTextSize), paint);

    }

    /**
     * 获取当前步数的数字的高度
     *
     * @param fontSize 字体大小
     * @return 字体高度
     */
    public int getFontHeight(float fontSize) {
        Paint paint = new Paint();
        paint.setTextSize(fontSize);
        Rect bounds_Number = new Rect();
        paint.getTextBounds(mStepNum, 0, mStepNum.length(), bounds_Number);
        return bounds_Number.height();
    }

    /**
     * 绘制内层数字
     * @param canvas
     * @param centerX
     */
    private void drawTextNum(Canvas canvas, float centerX) {
        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setAntiAlias(true);
        paint.setTextSize(mTextSize);
        paint.setColor(getResources().getColor(R.color.black));
        //字体类型
        Typeface mTypeFace = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
        paint.setTypeface(mTypeFace);
        Rect rect = new Rect();
        paint.getTextBounds(mStepNum, 0, mStepNum.length(), rect);
        //获取文字基线位置
        float biseY = getTextBaseline(paint, getHeight() / 2);
        //为了显示数字之下的文字，在基线坐标基础上减去文字高度的一半
        canvas.drawText(mStepNum, centerX, biseY - rect.height() / 2, paint);
    }

    /**
     * 绘制内层进度圆弧
     * @param canvas
     * @param mRectF
     */
    private void drawArcTwo(Canvas canvas, RectF mRectF) {

        Paint paint = new Paint();
        //画笔颜色
        paint.setColor(getResources().getColor(R.color.blue_light));
        //画笔宽度
        paint.setStrokeWidth(mBorderWidth);
        //画笔抗锯齿
        paint.setAntiAlias(true);
        //Paint.Style.STROKE 仅填充描边
        paint.setStyle(Paint.Style.STROKE);
        //画笔触笔类型 Paint.Cap.ROUND 圆形
        paint.setStrokeCap(Paint.Cap.ROUND);
        //结合处为 Paint.Join.ROUND 圆形
        paint.setStrokeJoin(Paint.Join.ROUND);

        canvas.drawArc(mRectF, mStartAngle, mCurrentAngle, false, paint);
    }


    /**
     * 绘制最外层圆弧
     * @param canvas
     * @param mRectF
     */
    private void drawArcOne(Canvas canvas, RectF mRectF) {

        Paint paint = new Paint();
        //画笔颜色
        paint.setColor(Color.parseColor("#e0f9ff"));
        //画笔结合处类型 圆形
        paint.setStrokeJoin(Paint.Join.ROUND);
        //护臂落笔出类型  圆形
        paint.setStrokeCap(Paint.Cap.ROUND);
        //画笔类型 设置为 仅填充边框
        paint.setStyle(Paint.Style.STROKE);
        //设置抗锯齿
        paint.setAntiAlias(true);
        //设置边框宽度
        paint.setStrokeWidth(mBorderWidth);

        /**
         * mRectF 圆形外矩形
         * mStartAngle 起始角度
         * mEndAngle   结束角度
         */
        canvas.drawArc(mRectF, mStartAngle, mEndAngle, false, paint);

    }


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

    /**
     * dip 转换成px
     *
     * @param dip
     * @return
     */
    private int dipToPx(float dip) {
        float density = getContext().getResources().getDisplayMetrics().density;
        return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1));
    }


    /**
     * 计算绘制文本的基线
     *
     * @param paint      绘制文字的画笔
     * @param halfHeight 高度的一半
     */
    private float getTextBaseline(Paint paint, float halfHeight) {
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        return halfHeight + dy;
    }


    /**
     * 对外的方法
     * @param mTotalNum       总数
     * @param mCurrentStepNum 当前数
     */
    public void setCurrentStep(int mTotalNum, int mCurrentStepNum) {

        if (mCurrentStepNum > mTotalNum) {
            mCurrentStepNum = mTotalNum;
        }
        //上次步数所占圆环比例
        float scalePrevious = (float) Integer.parseInt(mStepNum) / mTotalNum;
        float previousAngle = scalePrevious * mEndAngle;

        // 所走步数所占总数的百分比
        float scale = (float) mCurrentStepNum / mTotalNum;
        float currentAngle = scale * mEndAngle;

        mStepNum = String.valueOf(mCurrentStepNum);
        setTextSize(mCurrentStepNum);

        //执行动画
        startAnimation(previousAngle,currentAngle,animationLength);

    }

    private void startAnimation(float start, float current, int length) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(start,current);
        valueAnimator.setDuration(length);
        valueAnimator.setTarget(mCurrentAngle);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentAngle = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

    /**
     * 设置文本大小,防止步数特别大之后放不下，将字体大小动态设置
     *
     * @param num
     */
    public void setTextSize(int num) {
        String s = String.valueOf(num);
        int length = s.length();
        if (length <= 4) {
            mTextSize = dipToPx(30);
        } else if (length > 4 && length <= 6) {
            mTextSize = dipToPx(25);
        } else if (length > 6 && length <= 8) {
            mTextSize = dipToPx(24);
        } else if (length > 8) {
            mTextSize = dipToPx(22);
        }
    }

}

 

Super_Ks
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android—RingView—自定义view，实现一个百分比圆环(展示百分比占比)
JiYaRuo的博客
04-21 1089
效果如图: 1.自定义view (RingView) package com.notepad.project.myview; import android.content.Context; import android.content.res.Resources; import android.graphics.Canvas; import android.graphics.Paint;...
Android自定义View圆形百分比控件（一）
01-20
做一个自定义View的小练习，效果如下 只需要画一个圆、一个圆弧、一个百分比文本，添加一个点击事件，传入百分比重绘 1、在res/values文件夹下新建attrs.xml文件，编写自定义属性： <?xml version=1.0 encoding=utf-8?> <resources> <declare name=CirclePercentView> <attr name=circleBg format=color/> <attr name=arcColor format=color/> <attr name=
Android自定义View实现圆环带数字百分比进度条
01-04
分享一个自己制作的Android自定义View。是一个圆环形状的反映真实进度的进度条，百分比的进度文字跟随已完成进度的圆弧转动。以下是效果图： 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小。 先说一下思路：这个View一共分为三部分：第一部分也就是灰色的圆环部分，代表未完成的进度；第二部分是蓝色的圆弧部分，代表已经完成的进度；第三部分是红色的百分比的数字百分比文本，显示当前确切的完成进度。 下面是View的编写思路： ①：定义三个画笔，分别画灰色圆环，蓝色圆弧，红色文字； ②：构造器中初始化数据，设置三个画笔的属性； ③：重写View的onMeasure方法，得到本Vie
安卓实现动态环状百分比动画(仿华为天气预报)
蓝不蓝编程
09-04 965
实现效果 实现方案 自定义view 主要代码 CircleProgress.kt class CircleProgress(context: Context, attrs: AttributeSet) : View(context, attrs) { private val ANTI_ALIAS = true private val DEFAULT_SIZE = 150 ...
android：自定义圆环形百分比控件，代码简单，加载动画，代码详细说明
qq_27454233的博客
04-17 1010
需求要写一个环形百分比，是这样的： 第一张是UI图，第二张做出来后，在layout上渲染出来的图。 首先，需要知道android的坐标系是怎么样的，左上为(0,0)往右x轴增大，往下y轴增大 然后就直接上代码啦，变量不多，都有注释，也没有弄AttributeSet，想弄layout设置参数的，可以自己加一下，style文件写好配置，layout文件里设置，然后自定义控件里获取。 ...
Android自定义View实现环形进度条的思路与实例
01-20
本文将深入探讨如何实现一个环形进度条，该进度条具有可设置宽度的外圆圈、可定制宽度和颜色的圆形进度条及底部线条，以及可旋转的内部圆形图片。 首先，我们要理解环形进度条的基本构成。如标题和描述所提及，这个...
Android自定义View仿QQ等级天数进度
09-02
通过这样的实践，开发者可以更好地理解和掌握Android自定义View的绘制机制，为创建更复杂、个性化的UI提供基础。在实际项目中，可以根据需求进行扩展，例如增加动画效果，使进度变化更加平滑自然。总之，自定义View...
Android自定义View圆形进度条控件（三）
08-31
Android自定义View圆形进度条控件是Android开发中非常常用的控件，它可以用来显示进度、百分比等信息。在本文中，我们将详细介绍Android自定义View圆形进度条控件的实现过程和相关知识点。 一、自定义属性 在...
Android自定义圆环倒计时控件
08-25
总结，`Android自定义圆环倒计时控件`的实现主要包括定义自定义属性、初始化视图、绘制圆环和文字，以及利用属性动画进行倒计时。通过这样的实现，开发者可以轻松地在应用中创建具有独特视觉效果和实用功能的倒计时...
android环状显示百分比、环状百分比视图实现
欢迎进入JesseAndroid的博客
09-20 1325
效果图： 百分比下带文字 只显示百分比 实现： 自定义一个View，重写onDraw方法： @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mWidth = getWidth(); mHeight = getHeight(); ...
android 自定义百分比显示进度条（改进版）
03-17
android 自定义百分比显示进度条（改进版），在原作者的基础上修改，改进的地方就是百分比文字显示在不同手机分辨率下进行处理，大家还可以继续在此基础上继续改进，本人主要使用在项目的系统版本更新，使用语法与原ProgressBar一样
自定义view—圆弧渐变旋转
08-04
圆弧绕圆心旋转的同时，颜色渐变
android 圆圈百分比,Android自定义View圆形百分比控件（一）
weixin_39607937的博客
05-26 250
做一个自定义view的小练习，效果如下只需要画一个圆、一个圆弧、一个百分比文本，添加一个点击事件，传入百分比重绘1、在res/values文件夹下新建attrs.xml文件，编写自定义属性：2、新建circlepercentview继承view，重写构造方法：public circlepercentview(context context) {this(context, null);}public...
Android获取字体高度
xiechengfa的技术笔记
03-09 665
网上介绍获取字体高度有两种方法，可以选择使用： 1。网络中好多资料介绍获取字体高度的方法如下：      public int getFontHeight(float fontSize) { Paint paint = new Paint(); paint.setTextSize(fontSize); FontMetrics fm = paint.getFont...
Android之自定义一个环形进度控件
热门推荐
顾林海
12-03 2万+
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/53264494 本文出自：【顾林海的博客】 前言最近看到一个评分和计步的弧形控件，于是自己也做了一个，希望大家按照这种思路可以写出更好看的控件。用法 <com.example.gulinhai.scoreview.RingRotateView
获取字体的高度和宽度
angel774422的博客
06-04 466
Rect rect= new Rect(); Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG); textPaint.setTextAligh(Paint.Align.Right); textPaint.setTextSize(12); textPaint.getTextBounds("ABC", 0, "ABC".leng...
Android自定义view之（刻度尺view）
vv_bug
05-11 2456
前言： 最近一直在做h5，感觉学的东西多了还真有点混淆了，再来看anroid的时候，觉得有点点陌生了，难道真的是鱼与熊掌不可兼得吗？ 好吧，也罢～ 在技术群中看到一个小伙伴有一个这样的需求，所以在不是很忙的情况下试着去实现了一下，感觉还不错！～～先上一张最终的结果图（我这样算不算侵权啊，小伙伴产品好不容易设计出来，就被我用啦！ 哈哈～～～不管了，反正android本身都是开源的）：效果还是不错的啊
Android——自定义环形音量调节控件
小欣儿的专栏
08-09 666
今天同样是练习自定义View的一天，今天实现环形音量调节控件，下滑增大音量值，上滑减小音量。 然后里面还做了一点仪表盘绘制的扩展，代码在注释里面。 attrs.xml <declare-styleable name="CircleVolumeView"> <attr name="choiceColor" format="color|reference" /&g...
Android自定义圆环进度控件
博由心生，福泽一生
11-29 324
HDCircleProgress 一个非常轻量级别的圆环进度控件，支持渐变色以及自定义属性 Github地址 https://github.com/yinhaide/HDCircleProgress 特性 支持动画过度 支持设置背景色，圆环渐变色 支持设置动画持续时间 支持设置进度开始点 支持设置进度值 如何快速集成 导入方式 在工程级别的build.gradle添加 a...
android 自定义一个水波进度view
最新发布
05-25
要自定义一个水波进度 View，你需要完成以下几个步骤： 1. 创建一个自定义 View 类，并在构造函数中初始化一些必要的属性，如颜色、线宽等。 2. 重写 onSizeChanged() 方法，在该方法中获取 View 的宽度和高度，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值