自定义控件之按照数据百分比画圆环

最新推荐文章于 2024-04-07 22:00:00 发布

般若波乐me

最新推荐文章于 2024-04-07 22:00:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：自定义控件文章标签：控件数据

本文链接：https://blog.youkuaiyun.com/huhu1110/article/details/78415295

自定义控件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于Android的自定义View实现的画圆环控件。该控件能够根据传入的数据集自动排序并以不同颜色绘制圆环，通过ValueAnimator实现了动态展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是本人的第一个博客,也是值得纪念的,哈哈~~~
好了,咱们进入正题.
这是一个画圆环的小控件,你只管往定义好的集合里塞数据就行,它会把数据从大到小排序后,按照不同的颜色画出来,还是挺好玩的.
当时就是想单纯简单的学习一下,就没有写的那么正式,哈哈.下面是核心代码:

public class MyCircle1 extends View {
    private int mWidth = 100;
    private int mHeight = 100;
    private RectF mRectF;
    private ValueAnimator mAnimator;
    int sweepAngle;
    DataList dataList1,dataList2,dataList3,dataList4;
    List<MyCircle1.DataList>mDataLists=new ArrayList<>();
    List<MyCircleData>mMyCircleData=new ArrayList<>();
    private int shiftingAngle=7;
    private float mSpace=30;

    public MyCircle1(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        int centerW=getWidth()/2;
        int centerH=getHeight()/2;
        mRectF=new RectF(centerW+50,centerH+50,centerW+400,centerH+400);
        dataList1=new DataList(100,"#CCCCCC");
        dataList2=new DataList(800,"#FF7500");
        dataList3=new DataList(1000,"#7ED321");
        dataList4=new DataList(100,"#FFBF00");
        mDataLists.add(dataList4);
        mDataLists.add(dataList3);
        mDataLists.add(dataList2);
        mDataLists.add(dataList1);
        setData(mDataLists);
        initAnimator();
        startAnimator();
    }
    private void setData(List<DataList> dataLists) {
        Collections.sort(dataLists, new Comparator<DataList>() {
            @Override
            public int compare(DataList dataList, DataList t1) {
                return dataList.data-t1.data;
            }
        });
        float sum=0f;
        for (DataList data :
                dataLists) {
            sum += data.data;
        }
        MyCircleData myCircleDataBottom=new MyCircleData(270,-360,dataLists.get(dataLists.size()-1).mColor);
        mMyCircleData.add(myCircleDataBottom);
        float angle=0f;
        for (DataList data:
             dataLists) {
            MyCircleData myCircleData=new MyCircleData(270-19, (int) (-360+20+angle),data.mColor);
            mMyCircleData.add(myCircleData);
            angle+=data.data*360/sum;
        }
    }

    private void initAnimator() {
        mAnimator=ValueAnimator.ofInt(0,-360);
        mAnimator.setDuration(5000);
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                sweepAngle= (int) valueAnimator.getAnimatedValue();
                for (int i = 0; i < mMyCircleData.size(); i++) {
                    MyCircleData myCircleData=mMyCircleData.get(i);
                    if (i==0) {
                        if (sweepAngle<=myCircleData.getEndAngle()) {
                            myCircleData.setSweepAngle(myCircleData.getEndAngle());
                        }else {
                            myCircleData.setSweepAngle(sweepAngle);
                        }
                    }else {
                        int d1=sweepAngle+shiftingAngle;
                        if (d1 <= 0) {
                            if (d1 <= myCircleData.getEndAngle()) {
                                myCircleData.setSweepAngle(myCircleData.getEndAngle());
                            } else {
                                myCircleData.setSweepAngle(d1);
                            }
                        }
                    }
                }
                invalidate();
            }
        });

    }

    public void startAnimator(){
        mAnimator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i=0;i<mMyCircleData.size() ;i++) {
            MyCircleData arcEntity = mMyCircleData.get(i);
            arcEntity.setCanvas(canvas);
            arcEntity.drawArc();
        }

    }
    class MyCircleData{
        Paint mPaint;
        Canvas mCanvas;
        int sweepAngle;
        int startAngle;
        int endAngle;

        public int getEndAngle() {
            return endAngle;
        }

        public void setEndAngle(int endAngle) {
            this.endAngle = endAngle;
        }

        String color;

        public int getStartAngle() {
            return startAngle;
        }

        public void setStartAngle(int startAngle) {
            this.startAngle = startAngle;
        }

        public MyCircleData(int startAngle, int endAngle,String color) {
            mPaint = new Paint();
            this.endAngle = endAngle;
            this.startAngle=startAngle;
            this.color=color;

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.parseColor(color));
            mPaint.setStrokeWidth(50);
            mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
        }
        public void drawArc(){
            mCanvas.drawArc(mRectF,startAngle,sweepAngle,false,mPaint);
        }
        public Paint getPaint() {
            return mPaint;
        }

        public void setPaint(Paint paint) {
            mPaint = paint;
        }

        public Canvas getCanvas() {
            return mCanvas;
        }

        public void setCanvas(Canvas canvas) {
            mCanvas = canvas;
        }

        public int getSweepAngle() {
            return sweepAngle;
        }

        public void setSweepAngle(int sweepAngle) {
            this.sweepAngle = sweepAngle;
        }
    }
   static class DataList{
        int data;
        String mColor;

        public DataList(int data, String color) {
            this.data = data;
            mColor = color;
        }
    }
}

自定义圆环