Android RatingBar的基本使用和自定义样式

举报
再见孙悟空_ 发表于 2022/01/12 23:42:24 2022/01/12
【摘要】 今天项目中又用到了RatingBar,于是翻出来之前踩坑的一篇笔记,快速解决问题,顺便把笔记内容整理在此,方便以后查阅。   当项目中遇到【评分】需求的时候,一般情况下都会使用RatingBar用于UI展示,而且很多时候都不会使用原生样式。原因有两个: Android和iOS样式的统一系统原生样式的版本兼容性问题 所以适...

今天项目中又用到了RatingBar,于是翻出来之前踩坑的一篇笔记,快速解决问题,顺便把笔记内容整理在此,方便以后查阅。

 

当项目中遇到【评分】需求的时候,一般情况下都会使用RatingBar用于UI展示,而且很多时候都不会使用原生样式。原因有两个:

  • Android和iOS样式的统一
  • 系统原生样式的版本兼容性问题

所以适当的自定义RatingBar样式就显得很有必要了。

RatingBar基本使用

RatingBar的基本使用比较简单,这里只记录一下几个常用的属性:

  • isIndicator 是否是指示器,如果设置为true,则不可以通过点击来改变进度;如果设置为false,则可点击
  • numStars 一共有几个星星,默认是5个。
  • rating 表示进度

RatingBar 样式展示

之前项目中一共碰到过四种RatingBar样式,各自效果图整理如下:

自定义RatingBar样式

说明:

  • 第一个:原生普通样式(随着主题不同,样式会变)
  • 第二个:原生普通样式-小icon
  • 第三个:自定义RatingBar 颜色
  • 第四个:自定义RatingBar Drawable

RatingBar 各样式实现

原生样式

原生样式其实没什么好说的,使用系统提供的style 即可


  
  1. <!--第一个:原生主题样式 -->
  2. <RatingBar
  3. style="?android:attr/ratingBarStyleIndicator"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. android:rating="3"/>
  7. <!--第二个:原生主题样式:小-->
  8. <RatingBar
  9. style="?android:attr/ratingBarStyleSmall"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:rating="3"/>

自定义颜色

这种方式也很简单,只需要要定义一个样式即可,两步完成。

第一步,定义样式,指定背景色 和 进度色


  
  1. <!--自定义RatingBar Color-->
  2. <style name="RatingBar_CustomColor" parent="@android:style/Widget.Holo.RatingBar.Indicator">
  3. <!--Background Color-->
  4. <item name="colorControlNormal">#D7D7D7</item>
  5. <!--Progress Color-->
  6. <item name="colorControlActivated">#F49800</item>
  7. </style>

第二步,XML中使用该主题


  
  1. <!--自定义 Color-->
  2. <RatingBar
  3. android:id="@+id/go_rating"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. android:isIndicator="true"
  7. style="?android:attr/ratingBarStyleSmall"
  8. android:theme="@style/RatingBar_CustomColor"
  9. android:rating="3"/>

自定义Drawable

这种方式相对于前面几种,算是稍微麻烦一点的方式了,而且还存在图片拉伸的坑(图片底部被垂直拉伸成一条直线,跟哭了似的-_-!,就不贴图了)。先说具体实现方法,再说坑。

第一步,定义层叠布局layerlist

自定义过ProgressBar的同学,相信对下面的background,secondProgress,progress属性都不会陌生。


  
  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2. <item android:id="@android:id/background"
  3. android:drawable="@drawable/star"/>
  4. <item android:id="@android:id/secondaryProgress"
  5. android:drawable="@drawable/star"/>
  6. <item android:id="@android:id/progress"
  7. android:drawable="@drawable/star_solid"/>
  8. </layer-list>

第二步,自定义样式,指定ProgressDrawable

注意这里指定minHeight和maxHeight,根据项目中的UI需求而定,定死高度的其中一个作用就是防止drawable图片被垂直拉伸。


  
  1. <!--自定义RatingBar Drawable-->
  2. <style name="RatingBar_CustomDrawable" parent="@android:style/Widget.Holo.RatingBar.Indicator">
  3. <item name="android:progressDrawable">@drawable/custom_rating_bar</item>
  4. <item name="android:minHeight">15dp</item>
  5. <item name="android:maxHeight">15dp</item>
  6. </style>

第三步,在xml中使用刚才定义好的样式


  
  1. <!--自定义Drawable样式-->
  2. <RatingBar
  3. android:id="@+id/room_ratingbar"
  4. style="@style/RatingBar_CustomDrawable"
  5. android:layout_width="wrap_content"
  6. android:layout_height="wrap_content"
  7. android:rating="3"/>

最后说下图片垂直拉伸的解决方案:

  1. 设置minHeight和maxHeight,写死像素值。
  2. 让UI帮忙切一张底部留有空隙的star图标,比如有1px的空隙
  3. 使用略大于当前控件空间的icon,比如整个UI切图是按照drawable-xxhdpi来切的,那么使用高一级的drawable目录下比如drawable-xxxhdpi的icon,这样在运行的时候,icon会进行相应比例的缩放。

图片拉伸问题,还可以参考以下链接:
http://shikezhi.com/html/2015/android_0920/375199.html
http://blog.csdn.net/QMLN31821007/article/details/41121891


欢迎各位小伙伴加入我的qq群:开发一群:454430053 开发二群:537532956   这里已经有很多小伙伴在等你了,快来加入我们吧

文章来源: wukong.blog.csdn.net,作者:再见孙悟空_,版权归原作者所有,如需转载,请联系作者。

原文链接:wukong.blog.csdn.net/article/details/105380149

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200