Android修行手册 - RatingBar全解

举报
芝麻粒儿 发表于 2022/05/29 11:20:11 2022/05/29
【摘要】 👉关于作者众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)欢迎关注公众号【空名先生】获取更多资源和交流! 👉前提这是小空坚持写的Android新手向系列,欢迎...

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)

欢迎关注公众号【空名先生】获取更多资源和交流!

👉前提

这是小空坚持写的Android新手向系列,欢迎品尝。

大佬(×)

新手(√)

👉实践过程

😜初识

RatingBar是基于SeekBar和ProgressBar的扩展,用星型来显示等级评定。

通常应用场景是在用户评价那,如淘宝评价,打车订餐评价等等。

使用RatingBar的默认大小时,用户可以触摸/拖动或使用键来设置评分,它有两种样式(小风格用ratingBarStyleSmall,大风格用ratingBarStyleIndicator),其中大的只适合指示,不适合于用户交互。

😜基本属性

android:isIndicatorRatingBar】是否为指示器,为true时,用户将无法交互操作,默认为false。

android:numStars】显示的星型数量,必须是一个整形值,像“50”,虽然可以设置很大,但一般都是5-10个星星即可。

android:rating】设置默认的评分。

android:stepSize】评分每次增加的值。建议大于0小于等于1之间最合适。

其中内置了三个样式:

style="?attr/ratingBarStyle":默认样式

style="?android:attr/ratingBarStyleSmall":小样式

style="?android:attr/ratingBarStyleIndicator":指示器样式

但是使用起来感觉不好看,如下示例:

RatingBar效果1.gif

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<RatingBar
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:isIndicator="false"
    android:numStars="5"
    android:rating="4"
    android:stepSize="1" />

<RatingBar
    style="?android:attr/ratingBarStyleIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:isIndicator="false"
    android:numStars="5"
    android:rating="3"
    android:stepSize="1" />

<androidx.appcompat.widget.AppCompatRatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

😜点击事件

RatingBar ratingBar = findViewById(R.id.rating);
ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
    @Override
    public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
        Log.e("TAG", "onRatingChanged: 当前点击的评分:" + rating);
    }
});

😜自定义样式

<RatingBar
    android:layout_width="wrap_content"
    android:progressDrawable="@drawable/ratingbar_bg"
    android:layout_height="wrap_content" />

ratingbar_bg.xml

image.png

如上我使用的是三个图片。【@android:id/background】属性为默认的图,【@android:id/progress】为选中后的图,【@android:id/secondaryProgress】为选中了一半的图。

image.png

但这时候又出现问题了,如果只修改宽高属性【layout_width】和【layout_height】为某个固定值,你会发现评分组件效果展示又不对了,总是填充满整个大小。

宽高属性要一直是【wrap_content

但这还没完,在不同的分辨率上可能出现高度的bug:drawable图片被垂直拉伸

所以我们按照上面再改改:

<RatingBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/RatingBar_CustomDrawable" />
<style name="RatingBar_CustomDrawable" parent="@android:style/Widget.Holo.RatingBar.Indicator">
    <item name="android:progressDrawable">@drawable/ratingbar_bg</item>
    <item name="android:minHeight">50dp</item>
    <item name="android:maxHeight">50dp</item>
</style>

固定死高度即可。

👉其他

📢作者:小空和小芝中的小空

📢转载说明-务必注明来源:芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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