Android自定义饼形图

最新推荐文章于 2023-11-08 15:50:24 发布
最新推荐文章于 2023-11-08 15:50:24 发布
阅读量878 收藏 2
点赞数 2
分类专栏： Android 文章标签： Android 自定义视图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu285279904/article/details/60954492
版权

效果图如下：


属性文件如下：

attrs_pie_view.xml

<resources>
    <declare-styleable name="PieView">
        <attr name="color_a" format="color" />
        <attr name="color_b" format="color" />
        <attr name="color_c" format="color" />
        <attr name="color_d" format="color" />
        <attr name="stroke_width" format="dimension" />
        <attr name="text_color" format="color" />
        <attr name="text_size" format="dimension" />
        <attr name="text" format="string" />
        <attr name="percent_arc_a" format="float" />
        <attr name="text_percent_size" format="dimension" />
    </declare-styleable>
</resources>

代码文件如下：

PieView.java

package net.sytm.pieview;

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.text.TextPaint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.LinearInterpolator;


public class PieView extends View {

    //正常颜色
    private int colorA;
    //迟到颜色
    private int colorB;
    //早退颜色
    private int colorC;
    //未打卡颜色
    private int colorD;

    //扫过的角度
    private float arcA;
    private float arcB;
    private float arcC;
    private float arcD;
    //画笔宽度
    private int strokeWidth;
    //文字颜色
    private int textColor;
    //文字大小
    private int textSize;

    //直径
    private int diameter;
    //画笔
    private Paint paint;
    private TextPaint textPaint;

    //扇形区域
    private RectF rectF;
    //零时变量
    private float tmpArcA;
    private float tmpArcB;
    private float tmpArcC;
    private float tmpArcD;
    //文字区域
    private Rect rect;
    //中间百分数
    private String text;
    //文字区域
    private Rect rectPercent;
    //百分号%
    private String textPercent;
    //百分号大小
    private int textPercentSize;
    //提示文字
    private String textTips;

    public PieView(Context context) {
        this(context, null);
    }

    public PieView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PieView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PieView, defStyle, 0);
        int count = array.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.PieView_color_a:
                    colorA = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.PieView_color_b:
                    colorB = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.PieView_color_c:
                    colorC = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.PieView_color_d:
                    colorD = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.PieView_stroke_width:
                    strokeWidth = array.getDimensionPixelSize(attr,
                            (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.PieView_text_color:
                    textColor = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.PieView_text_size:
                    textSize = array.getDimensionPixelSize(attr,
                            (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.PieView_text:
                    text = array.getString(attr);
                    break;
                case R.styleable.PieView_percent_arc_a:
                    //这个属性是只是为了预览视图
                    tmpArcA = percentToDegree(array.getFloat(attr, 0f));
                    break;
                case R.styleable.PieView_text_percent_size:
                    textPercentSize = array.getDimensionPixelSize(attr,
                            (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
                    break;
            }
        }
        array.recycle();

        paint = new Paint();
        paint.setAntiAlias(true);
        //直径取屏幕的一半
        diameter = getResources().getDisplayMetrics().widthPixels / 2;
        //半径
        int radius = diameter / 2;
        rectF = new RectF(- radius , - radius , radius, radius);
        rectPercent = new Rect();
        textPaint = new TextPaint();
        textPaint.setAntiAlias(true);
        rect = new Rect();
        textPercent = "%";
        textTips = "优秀度";
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthNode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightNode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width;
        int height;
        if (widthNode == MeasureSpec.EXACTLY) {
            width = widthSize;
        }
        else {
            width = diameter * 2;
        }

        if (heightNode == MeasureSpec.EXACTLY) {
            height = heightSize;
        }
        else {
            height = diameter * 2 -  diameter / 2;
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        initCanvas(canvas);
        drawArcA(canvas);
        drawArcB(canvas);
        drawArcC(canvas);
        drawArcD(canvas);
        drawText(canvas);
    }

    /**
     * 初始化画板
     * 移动画板的坐标原点
     * 目的为了后面绘制方便，更符合人类的思维模式
     * @param canvas
     */
    private void initCanvas(Canvas canvas) {
        canvas.translate(getWidth() / 2, getHeight() / 2);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);

        //原点
        if (BuildConfig.DEBUG) {
            canvas.drawCircle(0, 0, 3, paint);
        }

    }

    /**
     * 绘制正常数据
     * @param canvas
     */
    private void drawArcA(Canvas canvas) {
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(colorA);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawArc(rectF, 0, tmpArcA, false, paint);
    }

    /**
     * 绘制迟到数据
     * @param canvas
     */
    private void drawArcB(Canvas canvas) {
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(colorB);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawArc(rectF, arcA, tmpArcB, false, paint);
    }

    /**
     * 绘制早退数据
     * @param canvas
     */
    private void drawArcC(Canvas canvas) {
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(colorC);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawArc(rectF, arcA + arcB, tmpArcC, false, paint);
    }

    /**
     * 绘制未打卡数据
     * @param canvas
     */
    private void drawArcD(Canvas canvas) {
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(colorD);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawArc(rectF, arcA + arcB + arcC, tmpArcD, false, paint);
    }

    /**
     * 绘制文字
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        textPaint.getTextBounds(text, 0, text.length(), rect);
        canvas.drawText(text, 0 - rect.width() / 1.5f, rect.height() / 4 , textPaint);
        //绘制百分号
        textPaint.setTextSize(textPercentSize);
        textPaint.getTextBounds(textPercent, 0, textPercent.length(), rectPercent);
        canvas.drawText(textPercent,  rect.width() / 4 + rectPercent.width(), rect.height() / 10 + rectPercent.height() / 3, textPaint);
        //绘制优秀度
        textPaint.setColor(Color.parseColor("#999999"));
        textPaint.setTextSize(textPercentSize);
        textPaint.getTextBounds(textTips, 0, textTips.length(), rectPercent);
        canvas.drawText(textTips,  - rectPercent.width() / 2, rect.height() + rectPercent.height(), textPaint);
    }


    /**
     * 百分比转换为度数
     * @param percent
     * @return
     */
    private float percentToDegree(float percent) {
        return 360 * percent / 100;
    }

    public void setArcA(float percent) {
        this.arcA = percentToDegree(percent);
    }

    public void setArcB(float percent) {
        this.arcB = percentToDegree(percent);
    }

    public void setArcC(float percent) {
        this.arcC = percentToDegree(percent);
    }

    public void setArcD(float percent) {
        this.arcD = percentToDegree(percent);
    }

    public void setText(String text) {
        this.text = text;
    }

    public void startAnim() {
        ValueAnimator valueAnimatorA = ValueAnimator.ofFloat(0f, arcA);
        valueAnimatorA.setInterpolator(new LinearInterpolator());
        valueAnimatorA.setDuration(1000);
        valueAnimatorA.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tmpArcA = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimatorA.start();

        ValueAnimator valueAnimatorB = ValueAnimator.ofFloat(0f, arcB);
        valueAnimatorB.setInterpolator(new LinearInterpolator());
        valueAnimatorB.setDuration(1000);
        valueAnimatorB.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tmpArcB = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimatorB.start();

        ValueAnimator valueAnimatorC = ValueAnimator.ofFloat(0f, arcC);
        valueAnimatorC.setInterpolator(new LinearInterpolator());
        valueAnimatorC.setDuration(1000);
        valueAnimatorC.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tmpArcC = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimatorC.start();

        ValueAnimator valueAnimatorD = ValueAnimator.ofFloat(0f, arcD);
        valueAnimatorD.setInterpolator(new LinearInterpolator());
        valueAnimatorD.setDuration(1000);
        valueAnimatorD.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tmpArcD = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimatorD.start();

    }
}

使用步骤如下：

布局引用视图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <net.sytm.pieview.PieView
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:id="@+id/pie_view"
        app:color_a="#d2f6f2"
        app:color_b="#fe8081"
        app:color_c="#ffdf6e"
        app:color_d="#afa9ff"
        app:stroke_width="32dp"
        app:text="70"
        app:text_size="64sp"
        app:text_color="#333333"
        app:percent_arc_a="100"
        app:text_percent_size="14sp" />

</LinearLayout>

示例代码： 

package net.sytm.pieview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        PieView pieView = (PieView) findViewById(R.id.pie_view);
        //赋值百分比
        pieView.setArcA(70);
        //赋值百分比
        pieView.setArcB(15);
        //赋值百分比
        pieView.setArcC(10);
        //赋值百分比
        pieView.setArcD(5);
        //中间的百分数
        pieView.setText("70");
        pieView.startAnim();
    }
}

项目源码下载：http://download.csdn.net/detail/hu285279904/9774936

5hand
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你用Android自定义饼状图
09-01
最近在项目中需要用到简单的饼形图统计，我们就没必要去找什么开源的，可以尝试自己画一下。现在将实现的过程分享给大家，有需要的朋友们可以参考借鉴，下面来一起看看吧。
安卓图形之MPAndroidChart3.0详解二——饼状图
qq_43332570的博客
11-27 2272
1 前言 饼图和折线图的相关设置和属性差别不大，相同点是：都是通过设置legend(图例)、description(标题)、填充数据等来达到我们想要的效果。但和折线图有差别的就是在饼图中没有yAxis和xAxis，其他大致相同。 2 基本使用 2.1 基础用法 下面这个demo仅仅只是描述了PieChart的基本只用，就只是填充了数据，基本没有设置其他样式 效果图： >：可以看到，默认的...
Android开发中自定义饼图以及百分比展示
最新发布
qq_36451275的博客
11-08 336
Android开发中自定义饼图以及百分比展示
Android饼状图的绘制
热门推荐
cen_yuan的专栏
08-14 1万+
Android饼状图的绘制在Github上看到一个不错的Android图标绘制的开源项目MPAndroidChart［https://github.com/PhilJay/MPAndroidChart］，今天在这里介绍一下里面饼状图的使用，很少些博客，写得不好，同行见谅，勿喷。先来看看官网的效果： MPAndroidChart的使用第一步，当然是引用这个库 在AndroidStudio的proje
android-饼状图（PieChart）
qq_36935391的博客
12-12 3870
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 自定义饼形图
03-09
Android 自定义饼形图
android 饼形图代码扇形图统计
03-19
android 饼形图 扇形图统计 简单实现自定义viwe 动画绘制扇形图形 android 饼形图 扇形图统计 简单实现自定义viwe 动画绘制扇形图形
android自定义view－特殊饼形图(环形图)
09-07
一个特殊的饼形图
Android图表库MPAndroidChart(七)—饼状图可以再简单一点
weixin_34376562的博客
11-18 1237
Android图表库MPAndroidChart(七)—饼状图可以再简单一点 接上文，今天实现的是用的很多的，作用在统计上的饼状图，我们看下今天的效果 这个效果，我们实现，和之前一样的套路，我先来说下这个的应用场景，假设，我是一名小学老师，现在教务处让我设置一个图表，说明下我带的班级期末考试有多少人优秀，多少人及...
Android:自定义组件绘制饼状统计图
01-22
本资源为Android-自定义组件绘制饼状统计图的demo。对应博文：http://blog.csdn.net/books1958/article/details/42264599
Android饼状图
04-12
Android 自定义饼状图，自定View,可运行看结果，运行无误。
Android自定义饼状图
10-21
本自定义饼状图是参考相关CSDN相关博客完成，并修改了其中的部分错误和添加了相关的父类方法重写，完成饼状图的位置、大小的自适应测量，你可以自己指定半径和大小，也可以指定为适应父控件或填充父控件，只要调用饼状图对象的.addType("标题",颜色,本扇形代表的数量)即可完成扇形的添加显示。
android饼形图demo
01-22
利用achartengine绘制饼形图，自己写了一个函数，向函数中传入linearlayout（代表饼形图要放置的位置）和一个double数组(饼形图中显示的参数)即可，代码简单。
Android自定义View实现饼图
qq_41008818的博客
12-28 392
Android自定义View实现饼图
android自定义View: 饼状图绘制(四)
高级开发者进阶ing... QaQ
09-30 1556
本系列自定义View全部采用ktmac4.1.31.5.0。
android 最简单的饼状图
北京流年
03-20 6024
录制的gif图有点渣，但是实际效果还是可以的。 因为项目需要绘制饼状图，就很简单的饼状图带一个选中的效果，本来也想使用MPAndroidChart这个库的，但是觉得就实现一个效果引用整个库，对于一个有态度的程序员来说，内心是拒绝的(我不是装逼的人)，所以自己自定义了一个，写的不好仅供参考。 要做这么一个效果，我们应该分几步来写， 1.先做一个静态的饼状图 2.然后加上属性动画，有一个绘...
Android PieChart(饼形图)，你的技术真的到天花板了吗
m0_69439527的博客
04-12 2094
前言 现在几乎每个it公司都在开发移动产品，我最早知道Android还是在13年成都某学院上大学的时候，从新闻上知道有这么一家公司，创始人安迪·鲁宾很有名，但安卓到底是做什么的，我并没有关注。 到2014年毕业的时候，Android已经发展到了4.4 版本，百度了一下Android，知道了（应用）开发采用的是Java语言。我当时学过 C，C++,对java有些了解，从成都辗转来到北京，找到的工作正是开发一款Android应用（生活服务类）。这时我有了一个HTC的安卓最新版手 机。 现在做Android移动开
如何在Android studio中使用饼形图
05-26
要在Android Studio中使用饼形图，可以使用Android提供的图表库MPAndroidChart。以下是使用MPAndroidChart创建饼状图的简单步骤： 1. 在项目的build.gradle文件中添加以下依赖项： ``` dependencies { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值