【Android View】写一个蛛网评分控件
上周项目中要用到一个蛛网评分控件,于是就先上Github搜,搜了半天没搜着(也可能是我搜的关键词不对),那只好自己写一个了,就叫SpiderWebScoreView
先放一张最终效果图:
先整理一下需求:
- 要能支持任意个角以及任意层级
- 不管是多少个角都要能自动左右对称
- 蛛网图形外圈的文字要能自定义(甚至是图片)
然后整理一下一个蛛网评分控件的实现流程:
- 首先要根据角的个数以及层数画一个蜘蛛网
- 然后根据最大分值和所有分值画一个分数图形
- 最后在蜘蛛网的外圈把文案画出来
我们第一步来画蜘蛛网
先整理一下画蜘蛛网需要的知识点:
- 一层一层的多边形要用Path画
- 从中心出发到每个角的线用drawLine
- 根据角度计算圆上的坐标
接下来看一下怎么根据角度计算圆上的坐标,直接上代码
float centerX = 100f; // 已知圆心X坐标为100
float centerY = 100f; // 已知圆心Y坐标为100
float radius = 100f; // 已知半径为100
float angle = 45f; // 已知角度为45°double radians = Math.toRadians(angle); // 计算出弧度
float x = (float) (centerX + Math.sin(radians) * radius); // 计算出X坐标
float y = (float) (centerY - Math.cos(radians) * radius); // 计算出Y坐标
复制代码
既然上述技术问题都解决了,就开始画吧
private int angleCount = 5; // 整个蛛网有几个角
private int hierarchyCount = 5; // 整个蛛网分多少层(例如最大分数是10分,分5层,那么每层就代表2分)
private int lineColor = 0xFF000000; // 蛛网线条的颜色
private float lineWidth = -1; // 蛛网线条的宽度private float centerX; // 中心点X坐标
private float centerY; // 中心点Y坐标
private float radius; // 整个蛛网图的半径
private Paint linePaint;
private Path path;....@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);reset();
}private void reset(){if(angleCount != 0 && hierarchyCount != 0){int viewWidth = getWidth();int viewHeight = getHeight();centerX = viewWidth / 2;centerY = viewHeight / 2;radius = Math.min(viewWidth, viewHeight) / 2;}
}@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);drawAllHierarchy(canvas);drawAllLine(canvas);
}/*** 绘制所有的层* @param canvas Canvas*/
private void drawAllHierarchy(Canvas canvas) {float averageRadius = radius / hierarchyCount;for(int w = 0; w < hierarchyCount; w++){drawHierarchyByRadius(canvas, averageRadius *(w+1));}
}/*** 根据半径绘制一层* @param canvas Canvas* @param currentRadius 当前半径*/
private void drawHierarchyByRadius(Canvas canvas, float currentRadius) {path.reset();float nextAngle;float nextRadians;float nextPointX;float nextPointY;float averageAngle = 360 / angleCount;float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;for (int position = 0; position < angleCount; position++) {nextAngle = offsetAngle + (position * averageAngle);nextRadians = (float) Math.toRadians(nextAngle);nextPointX = (float) (centerX + Math.sin(nextRadians) * currentRadius);nextPointY = (float) (centerY - Math.cos(nextRadians) * currentRadius);if(position == 0){path.moveTo(nextPointX, nextPointY);}else{path.lineTo(nextPointX, nextPointY);}}path.close();canvas.drawPath(path, linePaint);
}/*** 绘制所有的线* @param canvas Canvas*/
private void drawAllLine(Canvas canvas){float nextAngle;float nextRadians;float nextPointX;float nextPointY;float averageAngle = 360 / angleCount;float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;for(int position = 0; position < angleCount; position++){nextAngle = offsetAngle + (position * averageAngle);nextRadians = (float) Math.toRadians(nextAngle);nextPointX = (float) (centerX + Math.sin(nextRadians) * radius);nextPointY = (float) (centerY - Math.cos(nextRadians) * radius);canvas.drawLine(centerX, centerY, nextPointX, nextPointY, linePaint);}
}
复制代码
详解:
- onSizeChanged的时候会根据view的宽高计算圆心坐标和半径
- 先根据层数计算每层的半径
- 接下来再根据角个数计算出每个角的度数
- 有了角度和半径后就可以根据上面的算法算出每个点的坐标了
- 坐标都算出来了就直接用Path连线,然后绘制即可
这里面需要额外注意的就是offsetAngle的计算,offsetAngle用来偏移整个图形,让整个图形左右对称,算法就是对于角个数是奇数的不用偏移,是偶数的偏移平均角度除以2即可
第二步来画分数图形
和画蜘蛛网所用到的知识点一样,只不过半径要根据分值和最大分值来算,如下:
private float maxScore = 10f; // 最大分数
private float[] scores; // 分数列表
private int scoreColor = 0x80F65801; // 分数图形的颜色
private int scoreStrokeColor = 0xFFF65801; // 分数图形描边的颜色
private float scoreStrokeWidth = -1; // 分数图形描边的宽度
private boolean disableScoreStroke; // 禁用分数图形的描边
private Paint scorePaint;
private Paint scoreStrokePaint;.../*** 绘制分数图形* @param canvas Canvas*/
private void drawScore(Canvas canvas){if(scores == null || scores.length <= 0){return;}path.reset();float nextAngle;float nextRadians;float nextPointX;float nextPointY;float currentRadius;float averageAngle = 360 / angleCount;float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;for (int position = 0; position < angleCount; position++) {currentRadius = (scores[position] / maxScore) * radius;nextAngle = offsetAngle + (position * averageAngle);nextRadians = (float) Math.toRadians(nextAngle);nextPointX = (float) (centerX + Math.sin(nextRadians) * currentRadius);nextPointY = (float) (centerY - Math.cos(nextRadians) * currentRadius);if(position == 0){path.moveTo(nextPointX, nextPointY);}else{path.lineTo(nextPointX, nextPointY);}}path.close();canvas.drawPath(path, scorePaint);// 绘制描边if(!disableScoreStroke){if(scoreStrokePaint == null){scoreStrokePaint = new Paint();scoreStrokePaint.setColor(scoreStrokeColor);scoreStrokePaint.setStyle(Paint.Style.STROKE);scoreStrokePaint.setAntiAlias(true);if(scoreStrokeWidth > 0){scoreStrokePaint.setStrokeWidth(scoreStrokeWidth);}}canvas.drawPath(path, scoreStrokePaint);}
}
复制代码
第三步画外面那圈文字
到了这里有些犹难办了,考虑到外面这圈文字变数比较大,不同的APP会有不同的需求,比如有的需求是一行纯文本,有的是两行纯文本但两行的样式不一样,更甚者可能是是文字加图片。
要是直接往Canvas上写文字是绝对满足不了这样的需求的,既然我要做一个开源的控件那就必须要解决这样的问题,要不然别人是用不了的
想到这里脑海里立马就有解决方案了,那就是自定义一个圆形的Layout,就叫CircularLayout,把CircularLayout放在SpiderWebScoreView上面,用的时候直接往CircularLayout里面添加View即可,这样想要什么样式就加什么样的View即可
具体的自定义CircularLayout的细节就不再赘述了,用到的知识点跟SpiderWebScoreView一样
最后放上蛛网评分控件的Github地址 github.com/xiaopansky/… ,欢迎大家访问使用
转载于:https://juejin.im/post/5cb41f89e51d456e3b701877
【Android View】写一个蛛网评分控件相关推荐
- CropImageView android上的一个图片裁剪控件
CropImageView **文前:**本文非常容易让读者看的云里雾里,建议直接看效果图,觉得有用就去看源码吧. CropImageView的原型来自Cropimage_demo,是android上 ...
- 玩转自定义View之大学问特色蛛网评分控件
在github上搜了一堆堆评分控件都没有理想中的样子所以在自己的开源项目上造了了轮子出来效果图如下: 先说明下理想中需求 支持任意大于等于3的评分 支持具有变色效果 支持分数以及图形分平均值描边 支持 ...
- Android之自定义一个环形进度控件
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/53445072 本文出自:[顾林海的博客] ##前言 最近看到一个评分和 ...
- android动手写平滑滚动歌词控件
马上毕业了,前段时间一直忙自己的毕业设计和毕业论文,做的是一个android音乐播放器,今天特意抽出里面的一块功能来凑这篇博客--歌词的显示. 看看QQ音乐,歌词显示略屌,可惜我们的LRC文件并不能做 ...
- 星星评价控件android开发_android自定义星级评分控件,可实现只显示实心星星
话不多说,上图 近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图 但是网上关于星级评分的例子大多这样 也展示虚心星星 通过自定义Viewpackage com.starsba ...
- 怎样用C#写一个工业仪表盘控件
如何使用C#开发一个如上的工业仪表盘控件呢? 1写一个类继承自UserControl,我们给它起名为Dial 2定义他的刻度属性, public int V//当前刻度1,省略VV(刻度2) ...
- android星星评分,Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...
- android tv nugat,GitHub - GongXunYoung/Android-tv-widget: Android tv,盒子,投影仪 控件
Android TV 开发框架 QQ群:522186932 Leanback 框架(类似谷歌的Leanback,更简直,更方便): 键盘框架: 菜单框架: 整体目录结构 *AndroidTvWidet ...
- android ratingbar不可点击,Android评分控件RatingBar使用实例解析
无论游戏,应用,网站,都少不了评分控件.在Android SDK 中提供了 RatingBar控件来实现相应的工作. 标签有几个常用评分相关属性 android:numStars,指定评分五角星数. ...
最新文章
- 到底什么是hash?它起什么作用?
- asp.net 在使用Response.Redirect try{}catch{}块失效
- MyEclipse在保存时总是building workspace,反应很慢
- C语言-运算符优先级及注意事项
- 无RTOS下使用队列出现的问题记录
- android开发应用知识,Android应用开发经常使用知识
- matlab 叠加 area,[转载]matlab学习——area填色图
- java 反射 构造方法_Java反射之构造方法反射
- LeetCode-424:替换后的最长重复字符
- 《指数型组织》学习总结
- 李广难封–有感于团队建设
- 教你如何使用 Python 将 pdf 文档进行 加密 解密——python实用小技能分享
- 数据库开发技术复习题填空题
- Socket学习总结系列(一) -- IM Socket
- Android 打开网页之CustomTabs
- 每日学到 20 - 封装、访问修饰符
- XXX正在运行,点按即可了解详情或停止应用
- 服务器被DDOS或CC攻击了怎么办
- java数据库中间件实现,分布式数据库中间件DDM的实现原理
- ChainLink原理