Android 控件 —— RatingBar 总结 （自定义解决间距问题）

序

昨天看公众号文章 ，有一个留言触动了我的笑点 ，分享一下 。

" 今天和出租师傅聊天，他教育我说 : " 做人要知足常乐，不能攀比，咱比上不足比下有余就行对吧？不能被别人绑架着生活，别人爱咋咋地，自己要按自己的想法活，到了这年龄都得想开。” 我说：“师傅，你心态真好，羡慕你。” 他说：“不行，我以前也不行，执拗，想不开，这不拆迁了吗，分了三套房，才想开 。 "

PS ：说实话，搁我我也能想得开 。

本文主要讲三个点

1. Ratingbat 基本使用

2. 通过 Style 和progressDrawable 定制自己的 RatingBar

RatingBar  

官方 API  RatingBar Developer

截图如下

属性

• isIndicator 此等级栏是否为指示器（用户不能更改）。可以是布尔值，例如“ true”或“ false”。
• numStars 要显示的星级（或评分项目）数。可以是整数值，例如“ 100”。
• rating  默认设置的等级。可能是浮点值，例如“ 1.2”。
• stepSize 评分的步长。可能是浮点值，例如“ 1.2”。

1. 较小的 RatingBat 样式和 较大的样式

  <RatingBar
        android:id="@+id/rating1"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="3"
        android:stepSize="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RatingBar
        android:id="@+id/rating2"
        style="?android:attr/ratingBarStyleIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="3"
        android:stepSize="1"
        app:layout_constraintLeft_toLeftOf="@id/rating1"
        app:layout_constraintTop_toBottomOf="@id/rating1" />

效果图 

2. 自定义星星 Icon 

使用 Style 定制

第一步 在 styles.xml 中

 <!-- 星星 -->
    <style name="my_bar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/ratingbar_drawable</item>
        <item name="android:minHeight">@dimen/dp_15</item>
        <item name="android:maxHeight">@dimen/dp_15</item>
    </style>

第二步 在 drawable 文件夹下创建 xml 文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/icon_star_gray">
    </item>
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/icon_star_gray">
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/icon_yellow_star">
    </item>

</layer-list>

使用在 XML 布局中

<RatingBar
            android:id="@+id/rating3"
            style="@style/my_bar"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:isIndicator="true"
            android:numStars="5"
            android:stepSize="1"
            android:rating="3"
            android:visibility="visible"
            />

效果

PS ： 其实这边也可以直接使用 RatingBar 属性 progressDrawable 

   <RatingBar
            android:id="@+id/rating3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:isIndicator="true"
            android:numStars="5"
            android:stepSize="1"
            android:rating="3"
            android:visibility="visible"
            android:progressDrawable="@drawable/ratingbar_drawable"
            />

这样效果和上述一致 ，但是要考虑到图片拉伸的问题 。

2. 间距问题 

上面无论是 style 还是 progressDrawable 的效果 ，看起来星星之间的间距都有点紧促 。

所以使用自定义 VIew 。

可以参考 https://blog.csdn.net/linglongxin24/article/details/52918701 。