如何实现Material Design风格的带边框Android RatingBar？附现有代码

嘿，要做出带边框的RatingBar，系统默认样式肯定满足不了需求，咱们得自定义星星的Drawable才行！下面是一步步的实现方法：

1. 制作带边框的星星Drawable #

首先我们需要两个矢量图（Vector Drawable）：一个是空心带边框的未选中星星，一个是填充+边框的选中星星。

未选中星星（drawable/star_border.xml） #

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/transparent"
        android:strokeColor="@color/colorAccent"
        android:strokeWidth="2"
        android:pathData="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-0.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</vector>

选中星星（drawable/star_filled.xml） #

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@color/colorAccent"
        android:strokeColor="@color/colorAccent"
        android:strokeWidth="2"
        android:pathData="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-0.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</vector>

2. 创建状态选择器（Selector） #

用Selector关联选中/未选中的状态，让RatingBar自动根据状态切换星星样式：

drawable/rating_star_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/star_filled" android:state_pressed="true"/>
    <item android:drawable="@drawable/star_filled" android:state_selected="true"/>
    <item android:drawable="@drawable/star_filled" android:state_checked="true"/>
    <item android:drawable="@drawable/star_border"/>
</selector>

3. 构建RatingBar的LayerDrawable #

RatingBar的进度由三层组成（背景、半进度、进度），我们把自定义的Selector绑定到这三层：

drawable/custom_rating_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 未选中的背景层 -->
    <item android:id="@android:id/background" android:drawable="@drawable/rating_star_selector"/>
    <!-- 半选中层（你的stepSize是1，不需要的话可以删掉） -->
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/rating_star_selector"/>
    <!-- 选中的进度层 -->
    <item android:id="@android:id/progress" android:drawable="@drawable/rating_star_selector"/>
</layer-list>

4. 修改RatingBar样式 #

更新styles.xml里的RatingBar样式，指定自定义的progressDrawable，同时修正父样式为AppCompat的Widget：

<style name="RatingBar" parent="Widget.AppCompat.RatingBar">
    <item name="android:progressDrawable">@drawable/custom_rating_bar</item>
    <item name="android:numStars">5</item>
    <item name="android:stepSize">1</item>
    <item name="android:rating">2</item>
    <!-- 可选：调整星星大小，避免过大 -->
    <item name="android:scaleX">0.8</item>
    <item name="android:scaleY">0.8</item>
</style>

5. 简化RatingBar的XML代码 #

现在布局里的RatingBar可以简化成这样：

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RatingBar"/>

额外提示 #

• 如果你想让边框和填充色不同，只需要修改两个vector里的strokeColor和fillColor即可，比如边框用灰色、填充用黄色。
• 之前的颜色滤镜代码可以删掉了，自定义Drawable已经能完美控制样式啦。

内容的提问来源于stack exchange，提问作者Mikhail