热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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开发者们能有所帮助,如果有疑问大家可以留言交流。


推荐阅读
  • 本文介绍了如何使用PHP向系统日历中添加事件的方法,通过使用PHP技术可以实现自动添加事件的功能,从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点,以及使用web技术实现自动添加事件的优势。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
author-avatar
手机用户2502876173
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有