安卓自定义动态饼状图

最新推荐文章于 2021-12-12 13:55:35 发布
最新推荐文章于 2021-12-12 13:55:35 发布
阅读量461 收藏 1
点赞数
分类专栏： 安卓 文章标签： 安卓饼状图 动态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22718203/article/details/81608451
版权

最近项目需要画个动态的饼状图　旁边还有项目名称以及百分比，所以就想自己画一个，顺便练习下。先看效果图

思路：画饼状图容易，动态的饼状图就需要用到属性动画ValueAnimator，同过在动画的时候不停的画加上时间效果看上去是动态的画的一样。首先看attr文件

 <declare-styleable name="MyRoundView">
        <attr name="roundTextColor" format="color"/>
        <attr name="roundTextSize" format="dimension"/>
    </declare-styleable>

简单其实用到的只有字体大小了。

接下来就是三部曲了，onMeasure，onLayout，onDraw

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width;
        int height;
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = widthSize * 1 / 2;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = heightSize * 1 / 2;
        }

        setMeasuredDimension(width, height);
    }
@Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHeight = getHeight();
        mWidth = getWidth();
    }

这个主要用来定位圆的位置。主要的就是在drwa里面了看代码

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mRectPaint.setColor(Color.YELLOW);
        //画的背景
//        canvas.drawRect(0, 0, getWidth(), getHeight(), mRectPaint);
//        Log.e("234","999966666==="+Thread.currentThread());
        ondraw(canvas);
        float textNameX = getHeight()/4 + circleCenterWith+dip2px(context,70);
        float textNameY = getHeight()/2-circleCenterWith;
        float textPrenX = getHeight()/4 + circleCenterWith+dip2px(context,95);
        float textPrenY = getHeight()/2-circleCenterWith;
        textPaint.setColor(roundTextColor);
        textPaint.setTextSize(roundTextSize);
        for (int i=0;i<list.size();i++){
            circlePaint.setColor(Color.parseColor(list.get(i).getColor()));
            canvas.drawCircle(textNameX,textNameY,dip2px(context,3),circlePaint);
            textPaint.getTextBounds(list.get(i).getName(),0,list.get(i).getName().length(),mBound);
            String prsent = DensityUtil.decFormatOfTwoPoint(presents.get(i)+"")+"%";
            canvas.drawText(list.get(i).getName(),textNameX+dip2px(context,20),textNameY+mBound.height()/2-dip2px(context,2),textPaint);
            canvas.drawText(prsent,textPrenX+dip2px(context,40),textPrenY+mBound.height()/2-dip2px(context,2),textPaint);
            textNameY+=dip2px(context,20);
            textPrenY+=dip2px(context,20);
        }

    }

这是画右边的名字和百分百。主要要注意位置。计算好圆的位置后就好画字的位置。看怎么画的圆弧。

/**
     * 画饼状图
     * @param canvas
     */
    private void ondraw(Canvas canvas){
        float sweepAngle = 0.0f;
//        float startAngle =0.0f;
        float startAngleY =0.0f;
        boolean isBreak=false;//退出循环
        for (int i=0;i<list.size();i++){
//            startAngle += sweepAngle;
            sweepAngle =(float) 3.6*presents.get(i);
            mPaint.setColor(Color.parseColor(list.get(i).getColor()));
            mPaint.setStyle(Paint.Style.STROKE);// 设置中空的样式
            mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿
            mPaint.setStrokeWidth(dip2px(context,DEFAULT_GRENN_WIDTH));
            mRectF.set(getWidth()/4 - circleCenterWith, getHeight()/2 - circleCenterWith,
                    getWidth()/4 + circleCenterWith, getHeight()/2 + circleCenterWith);

            int leng =(int)((float)(presents.get(i)));
            float sweepAngleY = 0.0f;
            sweepAngleY = sweepAngle/leng;
            if (leng<1){
                sweepAngleY = sweepAngle;
                canvas.drawArc(mRectF, startAngleY-0.5f, sweepAngleY+0.5f, false, mPaint);
                startAngleY +=sweepAngle;//要画完再重新计算开始的角度不然会有空隙 错乱
            }
            for (int j=0;j<leng;j++){
                if (mAngle <= startAngleY)
                    isBreak = true;
                if (isBreak)
                       break;
                    canvas.drawArc(mRectF, startAngleY - 0.5f, sweepAngleY + 0.5f, false, mPaint);
                    startAngleY +=sweepAngleY;//要画完再重新计算开始的角度不然会有空隙 错乱
                }
            if (isBreak)
                break;

        }
    }

这里我先计算的是每个名字（衣服、饮食）等所占的百分比通过从属性动画里面获取的角度值和衣服饮食等所占的百分比比较小于的就画大于的就不画每次画３.６度。所占比小于百分之一的就另外画。下面放全部的代码说总没看的精彩。自己看看就明白了。

package com.py.ysl.view.myview;

import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.DecelerateInterpolator;

import com.py.ysl.R;
import com.py.ysl.bean.RoundInfo;
import com.py.ysl.utils.DensityUtil;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;


/**
 * 自定义饼状图
 */
public class RoundView extends View{



    private List<RoundInfo>list;
    private List<Float> presents;

    private Paint mPaint;
    private Paint textPaint;//字的画笔
    private Paint circlePaint;//小圆的的画笔
     private Rect mBound;
    private RectF mRectF;
    private Paint mRectPaint;

    private int roundTextColor;
    private int roundTextSize;

    private int mHeight;
    private int mWidth;
    private float circleCenterWith;
    private static final float DEFAULT_GRENN_CENYER= 55;//空白圆的半径
    private static final float DEFAULT_GRENN_WIDTH= 35;//圆弧的宽度

    private ValueAnimator cakeValueAnimator;
    private float  mAngle = 0.0f;
    private Context context;
    public RoundView(Context context){
        this(context,null);

    }
    public RoundView(Context context,AttributeSet attrs){
        this(context,attrs,0);
    }
    public RoundView(Context context,AttributeSet attrs,int defStyleAttr){
        super(context,attrs,defStyleAttr);
        this.context =context;
        initView(context,attrs,defStyleAttr);
    }
    private void initView(Context context,AttributeSet attrs,int defStyleAttr){
        TypedArray array =context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyRoundView,defStyleAttr,0);
        int count = array.getIndexCount();
        for (int i=0;i<count;i++){
            int attr = array.getIndex(i);
            switch (attr){
                case R.styleable.MyRoundView_roundTextColor:
                    roundTextColor = array.getColor(attr, Color.BLACK);
                    break;
                    case R.styleable.MyRoundView_roundTextSize:
                    roundTextSize = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 12, getResources().getDisplayMetrics()));
                    break;


            }
        }
        array.recycle();
        init();
    }
    private void init(){
        initValueAnimator();
        circleCenterWith =dip2px(context, DEFAULT_GRENN_CENYER);
        list = new ArrayList<>();
        presents = new ArrayList<>();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        circlePaint= new Paint();
        circlePaint.setAntiAlias(true);
        mBound = new Rect();
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        mRectF = new RectF();
        mRectPaint = new Paint();
        mRectPaint.setAntiAlias(true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width;
        int height;
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = widthSize * 1 / 2;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = heightSize * 1 / 2;
        }

        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHeight = getHeight();
        mWidth = getWidth();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mRectPaint.setColor(Color.YELLOW);
        //画的背景
//        canvas.drawRect(0, 0, getWidth(), getHeight(), mRectPaint);
//        Log.e("234","999966666==="+Thread.currentThread());
        ondraw(canvas);
        float textNameX = getHeight()/4 + circleCenterWith+dip2px(context,70);
        float textNameY = getHeight()/2-circleCenterWith;
        float textPrenX = getHeight()/4 + circleCenterWith+dip2px(context,95);
        float textPrenY = getHeight()/2-circleCenterWith;
        textPaint.setColor(roundTextColor);
        textPaint.setTextSize(roundTextSize);
        for (int i=0;i<list.size();i++){
            circlePaint.setColor(Color.parseColor(list.get(i).getColor()));
            canvas.drawCircle(textNameX,textNameY,dip2px(context,3),circlePaint);
            textPaint.getTextBounds(list.get(i).getName(),0,list.get(i).getName().length(),mBound);
            String prsent = DensityUtil.decFormatOfTwoPoint(presents.get(i)+"")+"%";
            canvas.drawText(list.get(i).getName(),textNameX+dip2px(context,20),textNameY+mBound.height()/2-dip2px(context,2),textPaint);
            canvas.drawText(prsent,textPrenX+dip2px(context,40),textPrenY+mBound.height()/2-dip2px(context,2),textPaint);
            textNameY+=dip2px(context,20);
            textPrenY+=dip2px(context,20);
        }

    }

    /**
     * 画饼状图
     * @param canvas
     */
    private void ondraw(Canvas canvas){
        float sweepAngle = 0.0f;
//        float startAngle =0.0f;
        float startAngleY =0.0f;
        boolean isBreak=false;//退出循环
        for (int i=0;i<list.size();i++){
//            startAngle += sweepAngle;
            sweepAngle =(float) 3.6*presents.get(i);
            mPaint.setColor(Color.parseColor(list.get(i).getColor()));
            mPaint.setStyle(Paint.Style.STROKE);// 设置中空的样式
            mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿
            mPaint.setStrokeWidth(dip2px(context,DEFAULT_GRENN_WIDTH));
            mRectF.set(getWidth()/4 - circleCenterWith, getHeight()/2 - circleCenterWith,
                    getWidth()/4 + circleCenterWith, getHeight()/2 + circleCenterWith);

            int leng =(int)((float)(presents.get(i)));
            float sweepAngleY = 0.0f;
            sweepAngleY = sweepAngle/leng;
            if (leng<1){
                sweepAngleY = sweepAngle;
                canvas.drawArc(mRectF, startAngleY-0.5f, sweepAngleY+0.5f, false, mPaint);
                startAngleY +=sweepAngle;//要画完再重新计算开始的角度不然会有空隙 错乱
            }
            for (int j=0;j<leng;j++){
                if (mAngle <= startAngleY)
                    isBreak = true;
                if (isBreak)
                       break;
                    canvas.drawArc(mRectF, startAngleY - 0.5f, sweepAngleY + 0.5f, false, mPaint);
                    startAngleY +=sweepAngleY;//要画完再重新计算开始的角度不然会有空隙 错乱
                }
            if (isBreak)
                break;

        }
    }


    /**
     * 元数据
     * @param list
     */
    public   void setData(List<RoundInfo>list){
        this.list = list;
        int total = 0;
        for (int i=0;i<list.size();i++){
            total += Integer.parseInt(list.get(i).getCount());
        }
        for (int i=0;i<list.size();i++){
            float cursent  = (float) (Integer.parseInt(list.get(i).getCount()))*100/total;

            presents.add(cursent);
        }
        cakeValueAnimator.start();
        invalidate();
    }
    public int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    private void initValueAnimator() {

        PropertyValuesHolder angleValues = PropertyValuesHolder.ofFloat(
                "angle", 0f, 360f);
        cakeValueAnimator = ValueAnimator.ofPropertyValuesHolder(angleValues);
        cakeValueAnimator.setDuration(1500);
        cakeValueAnimator.setRepeatCount(0);
        cakeValueAnimator.setInterpolator(new DecelerateInterpolator());
        cakeValueAnimator.setRepeatMode(ValueAnimator.RESTART);
        updataAnimator();

    }

    /**
     * 动作效果
     * @param
     */
    private void updataAnimator(){

        cakeValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                 mAngle = (Float)animation.getAnimatedValue("angle");
//               long now = Calendar.getInstance().getTimeInMillis();
//                long vi=now-time;
//
//               time = now;

               invalidate();
            }
        });
    }
}

最后在ａｃｔｉｖｉｔｙ里面调用随便造的数据。

RoundInfo info = new RoundInfo();
        info.setCount("250");
        info.setColor("#ffd862");
        info.setName("衣服");
        RoundInfo info2 = new RoundInfo();
        info2.setCount("1250");
        info2.setName("饮食");
        info2.setColor("#71c6fe");

        RoundInfo info3 = new RoundInfo();
        info3.setCount("2250");
        info3.setName("购物");
        info3.setColor("#5f98fe");

        RoundInfo info4 = new RoundInfo();
        info4.setCount("10");
        info4.setName("桑拿");
        info4.setColor("#fe7614");

        RoundInfo info5 = new RoundInfo();
        info5.setCount("115");
        info5.setName("淘宝");
        info5.setColor("#a488fe");

        RoundInfo info6 = new RoundInfo();
        info6.setCount("350");
        info6.setName("喝酒");
        info6.setColor("#ff9693");
        roundList.add(info);
        roundList.add(info2);
        roundList.add(info3);
        roundList.add(info4);
        roundList.add(info5);
        roundList.add(info6);
//       

        roundView.setData(roundList);

这样就完成了，大神们还有什么更简单的方法可以说下，一起学习下。感谢

qq_22718203
关注
专栏目录
Android自定义饼状图
10-21
本自定义饼状图是参考相关CSDN相关博客完成，并修改了其中的部分错误和添加了相关的父类方法重写，完成饼状图的位置、大小的自适应测量，你可以自己指定半径和大小，也可以指定为适应父控件或填充父控件，只要调用饼状图对象的.addType("标题",颜色,本扇形代表的数量)即可完成扇形的添加显示。
Android 自定义饼状图
weixin_30597269的博客
08-08 118
github 地址：https://github.com/dkest/PieView 简单分析 　　其实根据我们上面的知识已经能自己制作一个饼状图了。不过制作东西最重要的不是制作结果，而是制作思路。 相信我贴上代码大家一看就立刻明白了，非常简单的东西。不过嘛，咱们还是想了解一下制作思路： 先分析饼状图的构成，非常明显，饼状图就是一个又一个的扇形构成的，每个扇形都有不同的颜色，对应的有名字，数...
Android PieChart(饼形图)
彬sir哥的博客
04-23 767
demo代码地址下载：https://download.csdn.net/download/qq_35091074/17162961
Android 自定义控件之饼状图
u012894648的博客
04-16 220
核心代码 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //获取设置总数 if (total == 0) for (int i = 0; i < pieCharts.size(); i++) { total += pieChart...
Android自定义控件实现饼状图
08-26
Android 自定义控件实现饼状图 Android 自定义控件实现饼状图主要是通过自定义控件来实现饼状图的绘制，核心代码在 onDraw 函数中，对静态控件进行绘制。以下是相关知识点的总结： 1. Android 自定义控件：自定义...
安卓(Android)开发之自定义饼状图
09-01
在Android开发中，自定义饼状图是一种常见的数据可视化方式，尤其适用于展示各项比例关系。以下将详细解析如何实现一个自定义的饼状图。 首先，我们要了解饼状图的基本构成。饼状图是由多个扇形组成，每个扇形代表...
手把手教你用Android自定义饼状图
09-01
【Android自定义饼状图实现】在Android开发中，有时候我们并不需要过于复杂的图表库，而是需要一个简单、定制化的饼状图。本教程将教你如何从零开始创建一个自定义的饼状图，适用于那些对图表有特定需求或者希望深入...
Android自定义饼状图、柱状图、双折线图
12-16
一开始是使用第三方的绘图框架Achartengine来绘制，能实现一大部分的图形。可针对公司产品天马行空的想象显然Achartengine已经不能满足现在的项目...这里给大家带来可点击的饼状图、可点击以及可滑动的柱状图、双折线图
Android饼状图
04-12
Android 自定义饼状图，自定View,可运行看结果，运行无误。
Android简单绘制饼状图
08-17
简单饼状图,简单的
android 简单的饼状图实现
06-12
简单的饼状图实现，可用实现饼状图，此是纯净版哦，不带效果，后面还会上传升级版
Android:自定义组件绘制饼状统计图
01-22
本资源为Android-自定义组件绘制饼状统计图的demo。对应博文：http://blog.csdn.net/books1958/article/details/42264599
android-饼状图（PieChart）
qq_36935391的博客
12-12 3935
1. MainActivity package com.example.bingzhuangtu; import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color; import android.os.Bundle; import android.util.DisplayMetrics; import com.github.mikephil.charting.charts.PieChart; impor
Android饼状图的绘制
热门推荐
cen_yuan的专栏
08-14 1万+
Android饼状图的绘制在Github上看到一个不错的Android图标绘制的开源项目MPAndroidChart［https://github.com/PhilJay/MPAndroidChart］，今天在这里介绍一下里面饼状图的使用，很少些博客，写得不好，同行见谅，勿喷。先来看看官网的效果： MPAndroidChart的使用第一步，当然是引用这个库 在AndroidStudio的proje
Android动态绘制饼状图
weixin_33941350的博客
03-14 226
项目里面的需求，当时搜索到MPAndroidChart库，可以实现，但是只是一个需求就引用偌大的一个库，感觉不太爽，打算自己自定义一个。 参考+实践 一、惯例先上效果图 更新图 二、GitHub 代码地址，欢迎指正https://github.com/MNXP/XPPieChart 三、思路 1、空心图（一个大圆中心绘制一个小圆） 2、根据数据算出所占的角度 3、根据动画获取当前...
Android自定义饼状图，支持点击弹出扇形
厚积薄发
06-30 5163
上一篇主要是记录了如何实现简单的折线图，支持点击弹出提示；这篇主要是实现另外一种图表–饼状图。 1 先上效果图2 分析第一看看到这个图，有过画扇形经验的同学会不屑，这个不简单吗？主要就是将所有的值相加，然后用每个值去除于总值，得到对于的一个扇形的角度，逐个画上去就好。这个说法大体是对的，但等到真正实施，还是有些小细节需要注意的。for (int i = 0; i < numbers.size();
Android自定义控件绘制饼状图详解
自定义饼状图控件的实现涉及Android的图形绘制API，包括`Canvas`、`Paint`和`RectF`等类的使用，以及数学知识，如角度计算和比例分配。通过这样的自定义控件，开发者能够创建出更具个性化的UI，直观地展示数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值