自定义view之半圆环比例图（逻辑简洁，注释详细）

最新推荐文章于 2021-05-26 06:59:53 发布
最新推荐文章于 2021-05-26 06:59:53 发布
阅读量592 收藏 1
点赞数
分类专栏： Android开发心得 文章标签： canvas android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongtao63/article/details/105580635
版权

啥也不说先上图，线看效果,代码复制可用

第一：在values下创建 attrs.xml，写需要的自定义属性；
第二：在 自定义View第三个构造方法中，获取自定义属性；
第三：重写onMeasure【不是必须的】；
第四：重写onDraw【所有绘制代码都写在onDraw】；

一，定义线条宽度，间隔背景颜色，间隔角度，两个textview的属性等

<declare-styleable name="RoundRateView">
    <attr name="rrv_circleWidth" format="dimension" />
    <attr name="rrv_intervalColor" format="color" />
    <attr name="rrv_aboveTextColor" format="color" />
    <attr name="rrv_belowTextColor" format="color" />
    <attr name="rrv_intervalAngle" format="dimension" />
    <attr name="rrv_belowTextSize" format="dimension" />
    <attr name="rrv_aboveTextSize" format="dimension" />
    <attr name="rrv_isShowText" format="boolean" />
</declare-styleable>

二，如图，具体看下面代码

三，如图，具体看代码

四，如图，具体看代码

五，是view代码：

public class RoundRateView extends View {
    private int mCircleWidth; //圆环宽度
    private float intervalAngle = 0.5f;//间隔角度
    private int belowTextSize = 60;//下面的文字字体大小
    private int aboveTextSize = 30;//上面的文字字体大小
    private int aboveTextColor = Color.GRAY;//上面的文字 默认灰色
    private int belowTextColor = Color.BLACK;//下面的文字 默认黑色
    private int intervalColor = Color.GRAY;//间隔颜色 默认灰色
    private int noMoneyColor = Color.DKGRAY;//总金额为0 默认灰色
    private boolean isShowText = true; //是否显示中间文字 默认显示
    private Paint mPaint;//圆环画笔
    private Paint textPaint;//文字画笔
    private List<Float> angleList = new ArrayList<>(); //所有的角度 集合
    private List<Integer> colorList = new ArrayList<>(); //所有的色值 集合
    private RectF oval;//圆环所在区域
    private double allMoney;//总金额

    private int colors[] = {Color.parseColor("#41A8FF")
            , Color.parseColor("#86C8FF")
            , Color.parseColor("#FF8B13")
            , Color.parseColor("#FFB971")
            , Color.parseColor("#FF8A77")
            , Color.parseColor("#EEE685")
            , Color.parseColor("#EECBAD")
            , Color.parseColor("#EEAEEE")
            , Color.parseColor("#EE3B3B")
            , Color.parseColor("#EDEDED")};

    public RoundRateView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundRateView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

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

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.RoundRateView,defStyleAttr,0);
        int n = array.getIndexCount();
        for(int i=0;i<n;i++){
            int attr  = array.getIndex(i);
            switch (attr){//这些属性都在xml里面设置。此处是默认
                case R.styleable.RoundRateView_rrv_circleWidth:
                    mCircleWidth = array.getDimensionPixelSize(attr, (int) dip2px(15));
                    if(mCircleWidth<2){//最小2
                        mCircleWidth = 2;
                    }
                    break;
                case R.styleable.RoundRateView_rrv_intervalAngle:
                    intervalAngle = array.getDimensionPixelSize(attr, (int) dip2px(1));
                    break;
                case R.styleable.RoundRateView_rrv_belowTextSize:
                    belowTextSize = array.getDimensionPixelSize(attr, (int) dip2px(60));
                    break;
                case R.styleable.RoundRateView_rrv_aboveTextSize:
                    aboveTextSize = array.getDimensionPixelSize(attr, (int) dip2px(30));
                    break;
                case R.styleable.RoundRateView_rrv_aboveTextColor:
                    aboveTextColor = array.getColor(attr, Color.GRAY);
                    break;
                case R.styleable.RoundRateView_rrv_belowTextColor:
                    belowTextColor = array.getColor(attr,Color.BLACK);
                    break;
                case R.styleable.RoundRateView_rrv_intervalColor:
                    intervalColor = array.getColor(attr,Color.GRAY);
                    break;
                case R.styleable.RoundRateView_rrv_isShowText:
                    isShowText = array.getBoolean(attr,true);
                    break;
            }
        }
        array.recycle();//定义后属性对象回收

        mPaint = new Paint();//初始化圆环画笔
        mPaint.setAntiAlias(true);//抗锯齿
        mPaint.setStyle(Paint.Style.STROKE); //设置绘画空心（比如画圆时画的是空心圆而不是实心圆）
        mPaint.setStrokeWidth(mCircleWidth);//设置画笔线宽

        textPaint = new Paint();//文字画笔
        textPaint.setAntiAlias(true);
        textPaint.setDither(true);//防抖动


    }

    /**
     * 设置数据
     * @param list
     */
    public void setList(List<Double> list) {
        float allIntervalAngle = 0f ;//所有间隔加起来的角度
        float allModuleAngle;  //所有模块加起来的角度  allModuleAngle + allIntervalAngle=180;
        if(list.size()>colors.length){//不能大于定义的颜色数组长度
            return;
        }
        angleList.clear();
        colorList.clear();
        allMoney = 0d;//总资产
        for(int i=0;i<list.size();i++){
            allMoney = allMoney+list.get(i);//资产累加
        }
        if(list.size() == 1){//只有一条数据//如果只有一条数据,就不要间隔
            angleList.add(180f);//半圆
            colorList.add(colors[0]);
        }else{
            for(int i=0;i<list.size()-1;i++){
                if(list.get(i)!=0){//数据不为0
                    allIntervalAngle+= intervalAngle; //间隔角度累加
                }
            }
            if(allIntervalAngle == intervalAngle){ //如果只有一条数据不为0,就不要间隔颜色
                angleList.add(180f);
                colorList.add(colors[0]);
            }else{
                allModuleAngle = 180- allIntervalAngle;//所有的颜色模块角度=180-所有间隔角度
                float angle = 0;//每个金额所占角度累加
                for(int i=0;i<list.size();i++){
                    if(list.get(i)!=0){
                        float e = (float) (list.get(i)/allMoney * allModuleAngle);//每个金额所占角度
                        if(i == list.size()-1){//如果是最后一个色块,所占角度就是剩余全部的角度
                            this.angleList.add(allModuleAngle - angle);
                        }else{
                            angle+=e;
                            this.angleList.add(e);
                            this.angleList.add(intervalAngle);
                        }
                        this.colorList.add(colors[i]);
                        this.colorList.add(intervalColor);

                    }
                }
            }

        }
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthPixels = this.getResources().getDisplayMetrics().widthPixels;//获取屏幕宽
        int heightPixels = this.getResources().getDisplayMetrics().heightPixels;//获取屏幕高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int hedight = MeasureSpec.getSize(heightMeasureSpec);
        int minWidth = Math.min(widthPixels, width);//控件宽高不超过屏幕宽高
        int minHedight = Math.min(heightPixels, hedight);//控件宽高不超过屏幕宽高
        setMeasuredDimension(Math.min(minWidth, minHedight), Math.min(minWidth, minHedight));//设置宽高中的最小数为控件的实际宽高
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawCircle(canvas);
        if(isShowText){//是否显示文本
            drawText(canvas);
        }
    }

    private void drawCircle(Canvas canvas) {
        if(oval==null){
            int min = Math.min(getWidth() - mCircleWidth/2,getHeight() - mCircleWidth/2);
            oval = new RectF(mCircleWidth/2,mCircleWidth/2,min,min);
        }
        float startAngle = -180f;//经过试验，-180这个值就是9点方向的位置 -90这个值就是12点方向的位置


        if(allMoney==0){
            mPaint.setColor(noMoneyColor);//总金额为0,给默认颜色
            mPaint.setStrokeWidth(mCircleWidth);
            mPaint.setStrokeCap(Paint.Cap.ROUND);//首位有弧度
            canvas.drawArc(oval, -180, 180, false, mPaint);//sweepAngle 跨度180画半圆  360圆
            return;
        }else{
            //画一个底层圆环,颜色和间隙颜色一样,因为间隙的色块和其他色块之间会有小缝隙
            mPaint.setColor(intervalColor);
            mPaint.setStrokeWidth(mCircleWidth - 1); //宽度减1是防止底色溢出
            mPaint.setStrokeCap(Paint.Cap.BUTT);
            canvas.drawArc(oval, -180, 180, false, mPaint);
            //左边开始的圆弧(没有设置线条开头圆弧，结束矩形的api)，所以首位画两个，没找到其他好方法，有大神知道吗请留言回复
            mPaint.setColor(colorList.get(0));
            mPaint.setStrokeWidth(mCircleWidth);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
            canvas.drawArc(oval, -180, 1, false, mPaint);
            //右边结束的圆弧
            mPaint.setColor(colorList.get(angleList.size()-1));
            mPaint.setStrokeWidth(mCircleWidth);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
            canvas.drawArc(oval, 0, 1, false, mPaint);
        }

        mPaint.setStrokeWidth(mCircleWidth);
        for(int i=0;i<angleList.size();i++){
            mPaint.setColor(colorList.get(i));
            mPaint.setStrokeCap(Paint.Cap.BUTT);
//            mPaint.setStrokeCap(Paint.Cap.ROUND);
//            if(i==0 || i==angleList.size()-1){
//                mPaint.setStrokeCap(Paint.Cap.ROUND);
//            }else{
//                mPaint.setStrokeCap(Paint.Cap.BUTT);
//            }
            if(i>0){
                startAngle += angleList.get(i-1);
            }
            canvas.drawArc(oval,startAngle,angleList.get(i),false,mPaint);
        }

    }

    private void drawText(Canvas canvas) {
        int center = getWidth()/2;

        String percent = "总资产(元)";
        textPaint.setTextSize(aboveTextSize);
        //防止文字边界超过内环边界  上面的文字大小减小 下面的文字大小也跟着减小
        while (textPaint.measureText(percent)>getWidth() - 2*mCircleWidth){
            aboveTextSize--;
            belowTextSize--;
            textPaint.setTextSize(aboveTextSize);
        }
        textPaint.setTextAlign(Paint.Align.CENTER);// 设置文字居中，文字的x坐标要注意
        textPaint.setColor(aboveTextColor);
        textPaint.setStrokeWidth(0);// 注意此处一定要重新设置宽度为0,否则绘制的文字会重叠
        Rect bounds = new Rect();// 文字边框
        textPaint.getTextBounds(percent,0,percent.length(),bounds);// 获得绘制文字的边界矩形
        Paint.FontMetricsInt fontMetricsInt = textPaint.getFontMetricsInt();// 获取绘制Text时的四条线
        int baseline = (int) (center - dip2px(20f));//字体所在位置，在中心点上方20dp
//        int baseline = center+ (fontMetricsInt.bottom - fontMetricsInt.top) / 2 -fontMetricsInt.bottom;
        canvas.drawText(percent,center,baseline,textPaint);

        //总金额
        percent = String.valueOf(allMoney);
        textPaint.setColor(belowTextColor); // 设置文字颜色
        textPaint.setTextSize(belowTextSize);
        textPaint.setFakeBoldText(true);//加粗
        //防止下面的文字超出内环边界
        while (textPaint.measureText(percent)>getWidth()-2f*mCircleWidth) {
            belowTextSize--;
            textPaint.setTextSize(belowTextSize);
        }
        textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 获得绘制文字的边界矩形
        Paint.FontMetricsInt fontMetrics1 = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线
        int baseline1 = center + (fontMetrics1.bottom - fontMetrics1.top) / 2 - fontMetrics1.bottom;
//        int baseline1 = center + (fontMetrics1.bottom - fontMetrics1.top) / 2 - fontMetrics1.bottom+38*2;
        canvas.drawText(percent, center, baseline1, textPaint); // 绘制文字
    }

    public static float dip2px(float dipValue) {
        final float scale = Resources.getSystem().getDisplayMetrics().density;
        return (dipValue * scale + 0.5f);
    }
    public void setIsShowMoney(boolean isShowMoney) {
        this.isShowText = isShowMoney;
        invalidate();
    }

}

六，使用方法

 

 

 


 

寻觅_
关注
专栏目录
Android自定义view 实现半圆环
陈正的博客
03-02 2861
1.自定义属性<declare-styleable name="SemicircleView"> <attr name="radius" format="dimension" /> <attr name="strokeWidth" format="dimension" /> <attr name="bgArcColor" format="color"
Android自定义半圆环进度分布控件
博由心生，福泽一生
11-29 551
HDSemicircle 一个非常轻量级别的半圆环进度分布控件，支持自定义属性 Github地址 https://github.com/yinhaide/HDSemicircle 特性 支持动画过度 支持设置背景色，圆环各种分布色 支持设置颜色块分布区域 如何快速集成 导入方式 在工程级别的build.gradle添加 allprojects { repositories...
【QT学习之路】利用QtCharts绘制半圆环比例图
未来的博客
12-02 2304
在以前文章中介绍了QtCharts的简单使用：https://blog.csdn.net/qq_42449351/article/details/99954436，今天我们就来用Charts绘制半圆环比例图 同样要先在.pro文件中添加charts库，QT += charts；在界面中添加Graphics View组件， 作为Chart的载体， 将该组件提升为QtCharts::...
Android 自定义占比圆环View
等我的包纸
02-09 226
package io.dcloud.H58E83894.weiget; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.
android 简单环形比例图
尚尚的博客
04-22 971
好久不写博客了 最近项目中用到一个环形比例图，分享一下 先上效果图 其实是挺简单的，调用几次drawArc而已，简单封装了一下 有点细节的是，当要画的圆弧数量大于1即不是某一比例值为100%，以最上方为起始点逆时针开始画，从最小值向最大值画，因为看到圆弧的端口是一个压着一个的，所以画完后要再画起始圆弧的一半，不然最大一段圆弧（也就是最后画的圆弧）的两个圆角端口都是可见的。 使用时非常的简单： &...
Android自定义View图片裁剪，支持自由裁剪、按自定义比例裁剪、圆形裁剪、旋转、镜面翻转，从0到1自定义View
最新发布
09-03
方便调用，有示例。 Android自定义View图片裁剪，支持自由裁剪、按自定义比例裁剪、圆形裁剪、旋转、镜面翻转，从0到1自定义View。kotlin编写的一个自定义View。
Android自定义view实现圆形与半圆形菜单
09-01
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且符合应用需求的界面元素。本篇文章将深入探讨如何实现一个自定义的圆形与半圆形菜单，以满足特定的UI设计要求。 首先，我们要了解自定义...
高仿猎豹清理大师自定义内存开口圆环比例进度View（源码）
05-22
本主题聚焦于“高仿猎豹清理大师”的自定义内存开口圆环比例进度View的源码分析，帮助开发者理解和实现类似的功能。 1. **自定义View的基本概念** 自定义View是Android开发者为了满足特定需求，对系统提供的标准...
Android自定义带动画的半圆环型进度效果
01-20
总的来说，创建这个自定义的半圆环型进度效果涉及了Android的自定义View机制、图形绘制、属性动画以及XML布局中的自定义属性。通过理解和掌握这些知识点，开发者可以创建出更多富有创意和交互性的用户界面。
Android 自定义View实现环形带刻度的进度条
06-19
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建独特且富有表现力的用户界面。...参考提供的博客链接，你可以找到详细的代码实现和示例，进一步加深对这个自定义View的理解。
Android超赞动态环形比例图
11-18
Android超赞的动态环形比例图 给你一个马上就完美的体验
Android自定义（三）圆环的实现
12-11
有需要的可以下载哈，没事就点赞呗
适用于Android的自定义圆形SeekBar（圆形，半圆形和椭圆形）-Android开发
05-26
CircularSeekBar丰富的功能，适用于Android的圆形SeekBar（圆形，半圆形和椭圆形）。 该库基于Matt Joseph（devadvance）的CircularSeekBar。 但是原始作者似乎已经停止维护（l的CircularSeekBar丰富功能Circular SeekBar（圆，半圆和椭圆））。该库基于Matt Joseph的CircularSeekBar（devadvance）。但是原始作者似乎已经停止了。维护（最后一次提交是在2016年），所以我决定自己解决这个问题。我将其构建在Android Studio（Gradle）上，然后修复并向库中添加了更多功能。我添加的功能支持浮动进度，而不是仅整数。重构属性的名称，以避免con
android roundView(android 环形转盘按钮)
12-31
自定义UI,实现了转盘样式按钮，多功能按钮。 此控件可以设置 按钮的图片，按钮的数量，还有背景，样式，分割线的宽度，还有对称轴。
android 画圆环表示收益所占比重
小辉辉的android成长日记
09-29 784
因为工作项目需要，做了一个圆环控件，表示各部分收益
echart雷达图文字挤在一起_DIV+CSS带百分比的环形图
weixin_39647186的博客
11-27 337
代码见：https://codepen.io/xiaokuoai/pen/bGVBxPq需求：在h5上展示如下图的环形效果图，其中被我马赛克的地方是文字描述，可以忽略。其实像很多图表库都可以满足，譬如echart/antv等，但是只是这一个展示，把第三方库引入进来，会导致文件太大，因此想着自己实现需求ui图实现：其中主要的html内容如下红色方框loading所示代码主要是分左右2部分，先将lef...
另类圆环图的做法
data_cola的博客
03-22 565
某一日，在网易数读的文章里看见了这样一个图，感慨万千，这其实不就是一个条形图吗，只不过是变成了圆环的样子，效果却比单纯的条形图好了不知道多少倍，我就在想，怪不得老板总说我做的图丑，和别人一比是真的丑呀，于是我决定，模仿一下这个图，就用Excel来做。 先看结果： 准备数据 首先，准备数据，name一列为各种病的名字，value一列为占比，同时还需要一列辅助列，辅助列是100减去...
android 半圆型菜单,Android-自定义view之圆形与“半圆形”菜单
weixin_33443333的博客
05-26 602
前不久看到鸿洋大大的圆形菜单，就想开始模仿，因为实在是太酷了，然后自己根据别人(zw哥)给我讲的一些思路、一些分析，就开始改造自己的圆形菜单了。源码附送">文章结构：1.功能介绍以及展示；2.部分代码讲解；3.大致可以实现的UI效果展示讲解。4.源码附送。一、功能介绍以及展示第一个展示是本控件的原样。但是我们可以使用很多技巧去达到我们的商业UI效果嘛。这里给出的是本博客作品demo的展示图以...
Android笔记之自定义View——绘制圆环比例展示图
加油，向未来！
10-27 6744
前言：           本人菜鸟程序员一枚，大学本是电子专业，也是学渣一枚。从两年前来到到上海，阴差阳错，从事起了android开发工作，从零开始自学从学习java到android已两年有余。受鸿洋弟弟大神的激励后启发（本人鸿神郭神粉），第一次尝试这在CSDN写一篇简单的博文（文章中如有错误，欢迎指正）。       废话少说，言归正传。最近去支援一个项目，其中分配到我的任务种其中一个页面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值