RatingBar无法缩放到想要的大小怎么办？

遨游在代码海洋的鱼
739 阅读2分钟

RatingBar无法缩放到想要的大小怎么办？

前言

在实际android开发中，用户评价页面有滑动点亮星星⭐的组件，之前没有做过这种，于是上网搜有没有Android自带的滑动评分组件，发现真的有，叫RatingBar，在了解属性后就直接用了，发现依然存在个大问题。。。

RatingBar介绍

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

使用RatingBar的默认大小时，用户可以触摸/拖动或使用键来设置评分。

属性

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

android:numStars显示星星⭐的数量，必须是整形。

android:rating设置默认的评分。

android:stepSize评分每次增加的值。

样式

其中内置了三个样式：

<!--      小样式      -->
<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stepSize="1.0"
    android:numStars="5"
    android:rating="1.0"
    style="@style/Widget.AppCompat.RatingBar.Small"/>
<!--      默认样式      -->
<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stepSize="1.0"
    android:numStars="5"
    android:rating="1.0"
    style="@style/Widget.AppCompat.RatingBar"/>
<!--      指示器样式      -->
<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stepSize="1.0"
    android:numStars="5"
    android:rating="1.0"
    style="@style/Widget.AppCompat.RatingBar.Indicator"/>

效果图

1679645766974.jpg

可以发现 给的三个样式大的太大 小的又太小 于是尝试修改组件的长宽 但发现星星不会跟长宽的修改而缩放 反而会产生显示不全的问题 我哭了💔😟

网上也有自定义style的方法 我也尝试着跟着步骤操作过 但没有成功 出来个四不像 最后无奈上网寻找开源库使用。如果有自定义style成功的宝子 可以私信我 教教我🙏❤

引入MaterialRatingBar开源库

GitHub地址： GitHub - zhanghai/MaterialRatingBar: Material Design RatingBar with better appearance

什么是MaterialRatingBar？

image.png

大致意思是：

  • 在 Android 3.0以上保持一致的外观。
  • 扩展RatingBar框架。
  • 获取 2dp 星形边框背景。
  • 跨平台更正自定义着色。
  • 当layout_width设置为match_parent时能够正确呈现。
  • 当layout_height设置为 16dp、36dp 和 48dp 以外的值时，能够正确缩放。
  • 能够正确显示诸如 4.3 之类的评级，由于框架的错误实现，该评级将被填充为 4.5。
  • 避免框架的下沉半星视觉故障。
  • 用作RatingBar框架的直接替代品。

特点

  • 解决了原生RatingBar无法缩放的问题
  • 提供了很多样式选择，可操作性强👍
image.png

使用方式

1. 导入依赖

implementation 'me.zhanghai.android.materialratingbar:library:1.4.0'

2. 用例XML

<me.zhanghai.android.materialratingbar.MaterialRatingBar
    android:id="@+id/comment_score"
    style="@style/Widget.MaterialRatingBar.RatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minHeight="27dp"
    android:numStars="5"
    android:stepSize="1"
    app:mrb_fillBackgroundStars="true"
    app:mrb_progressBackgroundTint="@color/star_off"
    app:mrb_progressTint="@color/star_on" />

3. 属性

  • app:mrb_fillBackgroundStars -- 来控制是否填充背景星星，默认为false。
  • app:mrb_progressBackgroundTint -- 控制星星的背景颜色。
  • app:mrb_progressTint -- 控制星星颜色。

4. 使用方法

和RatingBar一样

//滑动监听
binding.commentScore.setOnRatingBarChangeListener { _, rating, _ ->
    commentViewModel.score = rating.toInt()
    commentViewModel.onCheckType()
}
//滑动分数
binding.commentScore.rating

总结

以上就是我在解决评价页面滑动点亮星星时所遇到的问题和解决办法。虽然使用MaterialRatingBar开源库解决了问题，但对其实现原理还不是很清楚，这也是我未来需要学习的地方，文章若出现错误，欢迎各位批评指正，文章乃原创，转载请注明出处谢谢❤。

avatar
文章
阅读
粉丝