本文实现一个如图所示的控件,包括两部分,左边的饼状图和中间的两个小方块,及右边的两行文字

实现起来比较简单,只是一些绘图API的调用

核心代码在onDraw函数里边,对静态控件进行绘制即可

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

/**

* 饼状图的x坐标

*/

float centreX= getWidth()/5;

/**

* 饼状图的y坐标

*/

float centreY= getHeight()/2;

/**

* 文字的大小

*/

float textSize=getHeight()/7;

float width=(float)getWidth();

float height=(float)getHeight();

/**

* 中间小正方形边长的一半

*/

float halfSmallRec =((float)getHeight())*3/70;

percent =((float) mBigBallNumber)/(mBigBallNumber + mSmallBallNumber);

/**

* 求饼状图的半径

*/

radius= Math.min(getWidth() * 1 / 8, getHeight() * 10 / 35);

/**

* 构建一个正方形,饼状图是这个正方形的内切圆

*/

rectf=new RectF((int)(centreX-radius),(int)(centreY-radius),(int)(centreX+radius),(int)(centreY+radius));

/**

* 设置饼状图画笔的颜色,先绘制大球占的比例

*/

piePaint.setColor(mBigBallColor);

/* The arc is drawn clockwise. An angle of 0 degrees correspond to the

* geometric angle of 0 degrees (3 o'clock on a watch.)*/

/* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)*/

/**

* 绘制大球的扇形图,float startAngle起始角度的0度的位置在3点钟方向

* 因此大球的扇形图要从12点钟开始绘制,所以起始角度为270度

*/

canvas.drawArc(rectf, 270, 360 * percent, true, piePaint);

/**

* 换种颜色,开始绘制小球占的饼状图

*/

piePaint.setColor(mSmallBallColor);

/**

* 起始角度就是12点钟加上360度乘以大球占的比例,12点钟转换为起始角度为270度

*/

canvas.drawArc(rectf, 270 + 360 * percent, 360 - 360 * percent, true, piePaint);

颜色更改为大球的颜色*/

piePaint.setColor(mBigBallColor);

/**

* 绘制上边的小方块,也就是大球的方块

*/

canvas.drawRect(width * 2 / 5 - halfSmallRec, height* 23/ 60 - halfSmallRec, width * 2 / 5 + halfSmallRec, height *23/ 60 + halfSmallRec, piePaint);

/**

* 更改画笔颜色为小球颜色

*/

piePaint.setColor(mSmallBallColor);

/**

* 绘制下边的小方块即小球的小方块

*/

canvas.drawRect(width * 2 / 5 - halfSmallRec, height * 37 / 60 - halfSmallRec, width * 2 / 5 + halfSmallRec, height * 37 / 60 + halfSmallRec, piePaint);

/**

* 开始绘制文字,先设置文字颜色

*/

textPaint.setColor(getResources().getColor(typedValue.resourceId));

/**

* 设置问题大小

*/

textPaint.setTextSize(textSize);

/**

* 大球数量

*/

String strBig = strBigBallName + mBigBallNumber;

/**

* 测量文字宽度

*/

float textBigWidth =textPaint.measureText(strBig);

Paint.FontMetrics fontMetrics=textPaint.getFontMetrics();

/**

* 绘制上边大球数量

*/

canvas.drawText(strBig, width * 9 / 20 + textBigWidth / 2, height *23/ 60 - fontMetrics.top / 3, textPaint);

/**

* 小球数量

*/

String strSmall = strSmallBallName + mSmallBallNumber;

/**

* 测量文字宽度

*/

float textUnderWidth=textPaint.measureText(strSmall);

/**

* 绘制下边的小球数量

*/

canvas.drawText(strSmall,width*9/20+textUnderWidth/2,height*37/60-fontMetrics.top/3,textPaint);

/**

* 更改画笔颜色,开始绘制百分比

*/

textPaint.setColor(getResources().getColor(R.color.half_transparent));

String strBigPercent =" ("+ mPercentBigBall +")";

/**

* 测量大球百分比文字宽度

*/

float bigPercent =textPaint.measureText(strBigPercent);

/**drawText(String text, float x, float y, Paint paint)

* 绘制文字的API,四个参数分别是文字内容,起始绘制x坐标,起始绘制y坐标,画笔

* 以为设置了居中绘制,因此穿进去的xy坐标为文字的中心点

*/

canvas.drawText(strBigPercent, width * 9 / 20+ textBigWidth + bigPercent /2, height*23 / 60-fontMetrics.top*1/3, textPaint);

/**

* 同样的道理绘制小球的百分比

*/

String strSmallPercent =" ("+ mPercentSmallBall +")";

float smallPercent =textPaint.measureText(strSmallPercent);

canvas.drawText(strSmallPercent,width*9/20+textUnderWidth+ smallPercent /2,height*37/60-fontMetrics.top/3,textPaint);

}

Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标。参考:使用FontMetrics对象计算位置坐标

设置文字绘制以中心为起点开始绘制

textPaint.setTextAlign(Paint.Align.CENTER);

x的坐标好计算,y坐标需要按需使用FontMetrics几个属性即可

完整代码如下:

public class PieHalfView extends View {

/**

* 左边饼状图的画笔

*/

private Paint piePaint;

/**

* 右边文字的画笔

*/

private Paint textPaint;

/**

* 饼状图的半径

*/

private float radius;

private RectF rectf;

/**

* 饼状图中第一个扇形占整个圆的比例

*/

private float percent;

/**

* 深浅两种颜色

*/

private int mBigBallColor, mSmallBallColor;

/**

* 大小球的数量

*/

private int mBigBallNumber;

private int mSmallBallNumber;

/**

* 大小球所占的百分比

*/

private String mPercentBigBall;

private String mPercentSmallBall;

/**

* 动态获取属性

*/

private TypedValue typedValue;

/**

* 中间的文字信息

*/

private String strBigBallName;

private String strSmallBallName;

public PieHalfView(Context context) {

super(context);

init(context);

}

public PieHalfView(Context context, AttributeSet attrs) {

super(context, attrs);

init(context);

}

public PieHalfView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context);

}

private void init(Context context) {

/**

* 设置饼状图画笔

*/

piePaint =new Paint();

piePaint.setAntiAlias(true);

piePaint.setStyle(Paint.Style.FILL);

/**

* 设置文字画笔

*/

textPaint=new Paint();

textPaint.setStyle(Paint.Style.STROKE);

textPaint.setAntiAlias(true);

textPaint.setTextAlign(Paint.Align.CENTER);

/**

* 下边设置一些默认的值,如果调用者没有传值进来的话,用这些默认值

*/

mBigBallColor = 0xFF9CCA5D;

mSmallBallColor =0xFF5F7048;

/*TypedValue:Container for a dynamically typed data value. Primarily used with Resources for holding resource values.*/

typedValue=new TypedValue();

context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);

mBigBallNumber =1;

mSmallBallNumber =3;

mPercentBigBall ="40%";

mPercentSmallBall ="60%";

strBigBallName =getResources().getString(R.string.big);

strSmallBallName =getResources().getString(R.string.small);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

/**

* 饼状图的x坐标

*/

float centreX= getWidth()/5;

/**

* 饼状图的y坐标

*/

float centreY= getHeight()/2;

/**

* 文字的大小

*/

float textSize=getHeight()/7;

float width=(float)getWidth();

float height=(float)getHeight();

/**

* 中间小正方形边长的一半

*/

float halfSmallRec =((float)getHeight())*3/70;

percent =((float) mBigBallNumber)/(mBigBallNumber + mSmallBallNumber);

/**

* 求饼状图的半径

*/

radius= Math.min(getWidth() * 1 / 8, getHeight() * 10 / 35);

/**

* 构建一个正方形,饼状图是这个正方形的内切圆

*/

rectf=new RectF((int)(centreX-radius),(int)(centreY-radius),(int)(centreX+radius),(int)(centreY+radius));

/**

* 设置饼状图画笔的颜色,先绘制大球占的比例

*/

piePaint.setColor(mBigBallColor);

/* The arc is drawn clockwise. An angle of 0 degrees correspond to the

* geometric angle of 0 degrees (3 o'clock on a watch.)*/

/* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)*/

/* 绘制大球的扇形图,float startAngle起始角度的0度的位置在3点钟方向

* 因此大球的扇形图要从12点钟开始绘制,所以起始角度为270度*/

canvas.drawArc(rectf, 270, 360 * percent, true, piePaint);

/**

* 换种颜色,开始绘制小球占的饼状图

*/

piePaint.setColor(mSmallBallColor);

/**

* 起始角度就是12点钟加上360度乘以大球占的比例,12点钟转换为起始角度为270度

*/

canvas.drawArc(rectf, 270 + 360 * percent, 360 - 360 * percent, true, piePaint);

/**

* 颜色更改为大球的颜色*/

piePaint.setColor(mBigBallColor);

/**

* 绘制上边的小方块,也就是大球的方块

*/

canvas.drawRect(width * 2 / 5 - halfSmallRec, height* 23/ 60 - halfSmallRec, width * 2 / 5 + halfSmallRec, height *23/ 60 + halfSmallRec, piePaint);

/**

* 更改画笔颜色为小球颜色

*/

piePaint.setColor(mSmallBallColor);

/**

* 绘制下边的小方块即小球的小方块

*/

canvas.drawRect(width * 2 / 5 - halfSmallRec, height * 37 / 60 - halfSmallRec, width * 2 / 5 + halfSmallRec, height * 37 / 60 + halfSmallRec, piePaint);

/**

* 开始绘制文字,先设置文字颜色

*/

textPaint.setColor(getResources().getColor(typedValue.resourceId));

/**

* 设置问题大小

*/

textPaint.setTextSize(textSize);

/**

* 大球数量

*/

String strBig = strBigBallName + mBigBallNumber;

/**

* 测量文字宽度

*/

float textBigWidth =textPaint.measureText(strBig);

Paint.FontMetrics fontMetrics=textPaint.getFontMetrics();

/**

* 绘制上边大球数量

*/

canvas.drawText(strBig, width * 9 / 20 + textBigWidth / 2, height *23/ 60 - fontMetrics.top / 3, textPaint);

/**

* 小球数量

*/

String strSmall = strSmallBallName + mSmallBallNumber;

/**

* 测量文字宽度

*/

float textUnderWidth=textPaint.measureText(strSmall);

/**

* 绘制下边的小球数量

*/

canvas.drawText(strSmall,width*9/20+textUnderWidth/2,height*37/60-fontMetrics.top/3,textPaint);

/**

* 更改画笔颜色,开始绘制百分比

*/

textPaint.setColor(getResources().getColor(R.color.half_transparent));

String strBigPercent =" ("+ mPercentBigBall +")";

/**

* 测量大球百分比文字宽度*/

float bigPercent =textPaint.measureText(strBigPercent);

/** drawText(String text, float x, float y, Paint paint)

* 绘制文字的API,四个参数分别是文字内容,起始绘制x坐标,起始绘制y坐标,画笔

* 以为设置了居中绘制,因此穿进去的xy坐标为文字的中心点

*/

canvas.drawText(strBigPercent, width * 9 / 20+ textBigWidth + bigPercent /2, height*23 / 60-fontMetrics.top*1/3, textPaint);

/*

* 同样的道理绘制小球的百分比

*/

String strSmallPercent =" ("+ mPercentSmallBall +")";

float smallPercent =textPaint.measureText(strSmallPercent);

canvas.drawText(strSmallPercent,width*9/20+textUnderWidth+ smallPercent /2,height*37/60-fontMetrics.top/3,textPaint);

}

public void setPercent(float percent1){

this.percent =percent1;

invalidate();

}

public void setColor(int mBigBallColor,int mSmallBallColor){

this.mBigBallColor =mBigBallColor;

this.mSmallBallColor =mSmallBallColor;

invalidate();

}

public void setOverRunner(String bigPecent, String smallPercent, int big, int small,

int bigColor, int smallColor){

this.mPercentBigBall = bigPecent;

this.mPercentSmallBall = smallPercent;

this.mBigBallNumber = big;

this.mSmallBallNumber = small;

this.mBigBallColor = bigColor;

this.mSmallBallColor = smallColor;

invalidate();

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

安卓饼状图设置软件_Android自定义控件实现饼状图相关推荐

  1. 安卓饼状图设置软件_安卓(Android)开发之自定义饼状图

    先来看看效果图 先分析饼状图的构成,非常明显,饼状图就是一个又一个的扇形构成的,每个扇形都有不同的颜色,对应的有名字,数据和百分比. 经以上信息可以得出饼状图的最基本数据应包括:名字 数据值 百分比 ...

  2. 安卓饼状图设置软件_话单及银行卡交易智能分析软件

    一.产品概况: 思迈奥SMILE数据智能分析软件是由我司自主设计与研发的一款结合在公安和检察院的侦查业务经验而定制研发的数据智能分析系统,包含于话单.电子银行账单.及其它数据(个人出行数据.社会资源数 ...

  3. 安卓饼状图设置软件_饼图生成器app下载|饼图生成器安卓版下载_v1.1.0_9ht安卓下载...

    饼图生成器是一款非常好用的饼图生成软件,只需要输入各项名称.数值等就可以一键生成,还可以自定义修改颜色,需要的朋友赶紧下载吧! 饼图生成器介绍 饼图生成器,供您创建各式各样的图表.支持自由布局与-您只 ...

  4. android程序启动动画,Android设置软件启动动画(以及初次安装的几张引导图)

    Android设置软件启动动画(以及初次安装的几张引导图) 设置软件启动动画 1 创建一个启动Activity 这里叫做QiDongActivity 它的XML中设置一个matchparent的背景图 ...

  5. 方大九钢携手图扑软件:数字孪生“高精尖”智慧钢厂

    钢铁行业是多工具.长流程的流程工业,在传统生产过程中,生产设备内部的各种化学反应.物理变化和重要参数等都从外部无法看出,只有通过大数据.全连接.全协同打通数据孤岛,才能加快整个行业的转型升级步伐.正因 ...

  6. “高精尖”智慧钢厂轻松打造!图扑软件数字孪生yyds

    钢铁行业是多工具.长流程的流程工业,在传统生产过程中,生产设备内部的各种化学反应.物理变化和重要参数等都从外部无法看出,只有通过大数据.全连接.全协同打通数据孤岛,才能加快整个行业的转型升级步伐.正因 ...

  7. 图扑软件数字孪生污水处理厂

    随着人工智能.大数据.云计算.物联网和5G等新技术不断融入水务行业的各个环节,智慧水务已逐渐成为传统水务领域转型升级的重要方向. 图扑软件依托自主研发的 HT for Web 产品,并结合视频融合.B ...

  8. 思维导图哪个软件比较好?MindNow一用便知

    思维导图哪个软件比较好?思维导图是一种表达发散性思维的有效图形思维工具,简单却很有效,可以应用图文并重的技巧,把各级主题的关系用隶属与相关的层级图表现出来,目前市面上的思维导图工具也很多,下面几款可以 ...

  9. 思维导图哪个软件比较好?不妨试试这几款应用

    大家知道思维导图是什么吗?它是一种能够帮助别人理清楚思维的模式,以简洁明了的形式,构思出你想要的内容.那么你平时是怎样进行思维导图的制作的呢?其实很简单只需要借助一些软件就可以了.不过现如今,市面上的 ...

  10. 做思维导图的软件有哪些?MindNow思维导图好用

    做思维导图的软件有哪些?思维导图是一个可以整理逻辑思维,并激发灵感的有效工具,我们以思维导图的方式,围绕一个中心主题向四周散发想法,这与我们大脑思考的方式非常相似,所以更容易被大脑理解,表达想法的时候 ...

最新文章

  1. 不错的jquery插件
  2. java和python哪个编程好找工作_学编程选Python还是Java?就业发展哪个好??
  3. vue调用手机相机相册_今天才发现,点一下小米手机相册,能将照片一键制作成电影...
  4. BugkuCTF-WEB题秋名山车
  5. 设计模式 -- 结构模式
  6. 计算机证据的获取,计算机证据获取技术的研究与应用.pdf
  7. ajax嵌套ajax的坏处,promise解决ajax的多重嵌套
  8. vue3.0实现地图功能
  9. Linux音频驱动-ASOC之Machine
  10. java内部编译器错误,可能的Java编译器错误!程序不能与某些编译器一起编译
  11. weblogic安装(win10)
  12. 如何通过简书引流(简书引流之标题的重要性)万能的小胡
  13. C/C++ 开发利器 CLion安装与配置
  14. 汇编中的call和ret指令
  15. if条件句和switch条件句
  16. 用Keil写一个8路流水灯,两侧各一个LED同时亮起,之后依次向中间聚拢,然后在展开,接着,在8个灯闪三次,为一次循环...
  17. Eclipse中XML文件以表格形式显示
  18. 海思I2C工具i2c_read使用地址的规则
  19. XSLT函数集合:数值函数、字符串函、节点集函数和布尔函数
  20. 3dmax蒙皮不选中小人

热门文章

  1. 20190613 一个SQL问题
  2. day14 匿名函数
  3. android ImageView加圆角
  4. 数据结构算法基础定义
  5. nodejs,webpack安装以及初步运用
  6. 第9月第6天 push pop动画 生成器模式(BUILDER)
  7. Java——泛型(最易懂的方式讲解泛型)
  8. ASP.NET WEB API简介
  9. 【转】C#通过WMI设置NTFS目录共享和目录安全
  10. MySQL锁 、行锁、表锁、间隙锁、临键锁、共享锁、排它锁、意向锁