当前位置:  首页  >  PHP资讯  >  业界资讯

Android仿支付宝上芝麻信用分雷达图

最近支付宝刚刚升级,然后看了一眼里面的芝麻信用分雷达图觉得很不错,所以就自己动手实践了下,这篇文章主要介绍了Android如何自定义控件,模仿支付宝上芝麻信用分雷达图的效果,有需要的朋友们可以参考借鉴。

一、首先看下支付宝上芝麻信用分的效果图:

二、思路

     1、确定雷达图中心点坐标

     2、绘制多边形及连接线

     3、根据维度值绘制覆盖区域

     4、绘制分数

     5、绘制每个维度的标题文字和图标

三、实现

获取布局的中心坐标

onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根据View的长宽,计算出雷达图的半径(这里取布局宽高最小值的四分之一,可以自定义),获取整个布局的中心坐标。

 public class CreditScoreView extends View { //数据个数 private int dataCount = 5; //每个角的弧度 private float radian = (float) (Math.PI * 2 / dataCount); //雷达图半径 private float radius; //中心X坐标 private int centerX; //中心Y坐标 private int centerY; //各维度标题 private String[] titles = {"履约能力", "信用历史", "人脉关系", "行为偏好", "身份特质"}; //各维度图标 private int[] icOns= {R.mipmap.ic_performance, R.mipmap.ic_history, R.mipmap.ic_contacts, R.mipmap.ic_predilection, R.mipmap.ic_identity}; //各维度分值 private float[] data = {170, 180, 160, 170, 180}; //数据最大值 private float maxValue = 190; //雷达图与标题的间距 private int radarMargin = DensityUtils.dp2px(getContext(), 15); //雷达区画笔 private Paint mainPaint; //数据区画笔 private Paint valuePaint; //分数画笔 private Paint scorePaint; //标题画笔 private Paint titlePaint; //图标画笔 private Paint iconPaint; //分数大小 private int scoreSize = DensityUtils.dp2px(getContext(), 28); //标题文字大小 private int titleSize = DensityUtils.dp2px(getContext(), 13); ... @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { //雷达图半径 radius = Math.min(h, w) / 2 * 0.5f; //中心坐标 centerX = w / 2; centerY = h / 2; postInvalidate(); super.onSizeChanged(w, h, oldw, oldh); } ... }

绘制多边形和连接线

主要看下getPoint方法,此方法封装了获取雷达图上各个点坐标的计算逻辑。

 /** * 绘制多边形 * * @param canvas 画布 */ private void drawPolygon(Canvas canvas) { Path path = new Path(); for (int i = 0; i  

getPoint方法,参数radarMarginpercent在此步骤赋予默认值。

 /** * 获取雷达图上各个点的坐标 * * @param position 坐标位置(右上角为0,顺时针递增) * @return 坐标 */ private Point getPoint(int position) { return getPoint(position, 0, 1); } /** * 获取雷达图上各个点的坐标(包括维度标题与图标的坐标) * * @param position 坐标位置 * @param radarMargin 雷达图与维度标题的间距 * @param percent 覆盖区的的百分比 * @return 坐标 */ private Point getPoint(int position, int radarMargin, float percent) { int x = 0; int y = 0; if (position == 0) { x = (int) (centerX + (radius + radarMargin) * Math.sin(radian) * percent); y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent); } else if (position == 1) { x = (int) (centerX + (radius + radarMargin) * Math.sin(radian / 2) * percent); y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent); } else if (position == 2) { x = (int) (centerX - (radius + radarMargin) * Math.sin(radian / 2) * percent); y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent); } else if (position == 3) { x = (int) (centerX - (radius + radarMargin) * Math.sin(radian) * percent); y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent); } else if (position == 4) { x = centerX; y = (int) (centerY - (radius + radarMargin) * percent); } return new Point(x, y); }


多边形和连接线

绘制覆盖区域

 /** * 绘制覆盖区域 * * @param canvas 画布 */ private void drawRegion(Canvas canvas) { Path path = new Path(); for (int i = 0; i  


覆盖区域

绘制分数

 /** * 绘制分数 * * @param canvas 画布 */ private void drawScore(Canvas canvas) { int score = 0; //计算总分 for (int i = 0; i  


分数

绘制标题

 /** * 绘制标题 * * @param canvas 画布 */ private void drawTitle(Canvas canvas) { for (int i = 0; i  


标题

绘制图标

 /** * 绘制图标 * * @param canvas 画布 */ private void drawIcon(Canvas canvas) { for (int i = 0; i  


图标

总结

好了,到这里主要的绘制工作就完成了,有些图标实在找不到,就用相似的代替了。希望这篇文章的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4