Android自定义View--RatingStarView:自定义星星评分/打分控件

一、前言

由于最近项目中需要使用到自定义星星评分和打分控件,而且需要支持根据后台返回的数据动态配置满星星和空星星的颜色,虽然Android中也提供了官方的星星评分控件RatingStar,但其效果不能满足UI和产品需求,而且项目中现用的自定义星星评分控件,是基于本地设置满星星和空星星的Drawable图片资源来实现满星星和空星星的显示效果,不能满足动态根据配置的颜色数据来改变满星星和空星星的颜色效果,基于这种需求场景,才有了今天文章所说的RatingStarView。

本控件主要参考和优化改造于GitHub项目https://github.com/everhad/AndroidRatingStar,原作者博客地址https://www.cnblogs.com/everhad/p/6828627.html,非常感谢原作者的启发。

二、RatingStarView及效果展示

RatingStarView是一款类似于Android官方RatingStar控件的评分和打分控件,支持使用颜色值动态设置控制星星的前景和背景颜色(满星星和空星星),同时支持打分、边界等更多的自定义属性设置,主要支持特性如下:
     1)支持任意小数比例颗星
     2)填充色(前景色,即满星星颜色)、底色(背景色,即空星星颜色)、描边色
     3)指定高度,宽度自适应
     4)拐角弧度、描边宽度、星星间距
     5)肥胖指数(star thickness),越胖越可爱
     6)支持点击评分设置,目前点击评分不支持半颗星

效果如下:

三、实现原理与思路

实现原理和思路可以参考原作者博文链接https://www.cnblogs.com/everhad/p/6828627.html,作者已讲述得很细和很棒,本文不再重述,本文所述控件主要是基于原作者的AndroidRatingStarView,主要优化原作者星星评分控件在填充颜色是半透明时或较浅颜色时,空星星内部中间出现灰色的明显线条的问题,如下图第一行最后面两颗空星星所示:

issue

本人也是在实际项目使用中发现和修复了这个问题,同时也在原作者GitHub上提交了这个Issue,链接https://github.com/everhad/AndroidRatingStar/issues/4

在原作者中,是通过五次Path路径完成五个星星尖角的绘制,然后再绘制星星中间空洞而实现整颗星星的绘制,而且中间可能存在偏移值,如上文所述,在填充颜色是半透明时或较浅颜色时,空星星内部中间出现灰色的明显线条的问题,针对这个问题,本人主要是优化了原作者绘制星星的代码的实现思路,本人通过路径Path,一次完成星星的填充Path绘制,从而解决了这个问题,有兴趣的朋友可以阅读代码了解:

private void drawSolidStar(StarModel star, Canvas canvas, int fillColor) {
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setColor(fillColor);
        paint.setPathEffect(pathEffect);

        VertexF prev = star.getVertex(1);
        Path path = new Path();
        path.moveTo(prev.x, prev.y);

        for (int i = 0; i < 5; i++) {
            VertexF next = prev.next;
            path.lineTo(next.x, next.y);
            path.lineTo(next.next.x, next.next.y);
            path.lineTo(next.next.x, next.next.y);
            prev = next.next;
        }
        canvas.drawPath(path, paint);
    }

 

四、相关链接和参考

所有代码已提交到本人GitHub项目,有兴趣的朋友可以参考本人GitHub项目代码,希望能给大家带有更多的参考价值,大家互相学习和讨论,链接请见https://github.com/oukanggui/WidgetLibrary/tree/master/widget/src/main/java/com/baymax/widget/ratingstar

同时也感谢原作者项目和博文的参考和启发:

原作者Github项目地址https://github.com/everhad/AndroidRatingStar

原作者博客地址https://www.cnblogs.com/everhad/p/6828627.html

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义View是指基于Android原生控件的一种扩展,可以根据自己的需求和设计规范来创建更加个性化和独特的控件。而歌词控件是一种针对音乐播放器或者视频播放器等应用场景中的需求,用于显示音乐或者视频的歌词的控件Android自定义View歌词控件的实现思路如下: 1. 首先需要自定义一个View,并继承自View或者其子类,如TextView。 2. 在自定义View中重写onDraw方法,在其中实现绘制歌词的逻辑。 3. 在onDraw方法中,使用Canvas对象进行绘制,可以使用drawText方法绘制歌词文本,也可以使用drawBitmap方法绘制图片背景等。 4. 可以通过自定义属性,如字体大小、字体颜色、歌词滚动速度等,来对歌词控件进行配置。 5. 如果需要实现歌词的滚动效果,可以使用ValueAnimator或者Scroller来实现歌词的平滑滚动。 6. 如果需要实现点击歌词跳转播放进度的功能,可以通过添加点击事件监听器,在触摸事件中判断点击位置对应的歌词行,并根据歌词的时间戳跳转到指定的播放进度。 总结来说,Android自定义View歌词控件的实现需要重写onDraw方法进行绘制,可以通过Canvas对象进行绘制文本或者图像,通过自定义属性进行配置,使用动画或者滚动实现歌词的平滑滚动,通过监听触摸事件实现点击歌词跳转播放进度的功能。通过以上步骤,我们可以创建一个个性化的歌词控件,满足不同应用场景的需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值