RatingBar实现：为每个填充星星设置不同颜色

当然可行！我刚好做过类似的需求，给你分享几种实用的实现思路，你可以根据项目复杂度选最合适的：

一、快速实现：LinearLayout组合ImageView（适合简单场景） #

这种方法最容易上手，不需要自定义View，直接用系统控件组合就能搞定：

1. 准备资源：提前制作好不同颜色的填充星星（比如红、黄、绿、蓝、紫各一张）和灰色未填充星星的图片（用VectorDrawable适配性更好）
2. 布局搭建：用横向LinearLayout排列对应数量的ImageView（比如5星就放5个）
3. 逻辑控制：根据当前评分，给对应位置的ImageView设置彩色星星，剩下的用灰色星星

布局代码示例 #

<LinearLayout
    android:id="@+id/customRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:spacing="8dp">

    <ImageView
        android:id="@+id/star1"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/star_gray"/>
    <ImageView
        android:id="@+id/star2"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/star_gray"/>
    <ImageView
        android:id="@+id/star3"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/star_gray"/>
    <ImageView
        android:id="@+id/star4"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/star_gray"/>
    <ImageView
        android:id="@+id/star5"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/star_gray"/>
</LinearLayout>

逻辑代码示例（Java） #

// 定义每个位置对应的彩色星星资源
int[] coloredStarDrawables = {
    R.drawable.star_red,
    R.drawable.star_yellow,
    R.drawable.star_green,
    R.drawable.star_blue,
    R.drawable.star_purple
};
int grayStarDrawable = R.drawable.star_gray;

// 假设当前评分为3
int currentRating = 3;

LinearLayout ratingBar = findViewById(R.id.customRatingBar);
for (int i = 0; i < ratingBar.getChildCount(); i++) {
    ImageView star = (ImageView) ratingBar.getChildAt(i);
    if (i < currentRating) {
        // 填充对应颜色的星星
        star.setImageResource(coloredStarDrawables[i]);
    } else {
        // 未选中的灰色星星
        star.setImageResource(grayStarDrawable);
    }
}

二、灵活定制：自定义View（适合需要交互/半星的场景） #

如果需要支持点击评分、半星显示或者更精细的样式控制，自定义View是更好的选择，直接在onDraw里绘制每个颜色不同的星星：

自定义View代码示例（Java） #

public class ColorfulRatingBar extends View {
    private int mCurrentRating = 0;
    private final int mMaxRating = 5;
    private float mStarSize;
    private float mStarSpacing;
    // 每个星星对应的颜色数组
    private final int[] mStarColors = {
        Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE, Color.MAGENTA
    };
    private Paint mFillPaint;
    private Paint mEmptyPaint;

    public ColorfulRatingBar(Context context) {
        super(context);
        init();
    }

    public ColorfulRatingBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // 初始化填充画笔
        mFillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mFillPaint.setStyle(Paint.Style.FILL);

        // 初始化未填充画笔（灰色描边）
        mEmptyPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mEmptyPaint.setStyle(Paint.Style.STROKE);
        mEmptyPaint.setColor(Color.GRAY);
        mEmptyPaint.setStrokeWidth(2);

        // 转换dp为px，设置星星大小和间距
        mStarSize = dpToPx(24);
        mStarSpacing = dpToPx(8);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 计算星星的起始位置，让RatingBar居中显示
        float startX = (getWidth() - (mStarSize * mMaxRating + mStarSpacing * (mMaxRating - 1))) / 2f;
        float startY = getHeight() / 2f;

        for (int i = 0; i < mMaxRating; i++) {
            float starCenterX = startX + i * (mStarSize + mStarSpacing);
            if (i < mCurrentRating) {
                // 绘制对应颜色的填充星星
                mFillPaint.setColor(mStarColors[i]);
                drawStar(canvas, starCenterX, startY, mStarSize, mFillPaint);
            } else {
                // 绘制灰色描边的未填充星星
                drawStar(canvas, starCenterX, startY, mStarSize, mEmptyPaint);
            }
        }
    }

    // 绘制五角星的方法（简化实现，你可以替换为更精准的Path）
    private void drawStar(Canvas canvas, float centerX, float centerY, float size, Paint paint) {
        Path starPath = new Path();
        float outerRadius = size / 2;
        float innerRadius = outerRadius * 0.38f;
        float angleStep = (float) (Math.PI / 5);

        for (int i = 0; i < 10; i++) {
            float radius = (i % 2 == 0) ? outerRadius : innerRadius;
            float x = (float) (centerX + radius * Math.cos(i * angleStep - Math.PI / 2));
            float y = (float) (centerY + radius * Math.sin(i * angleStep - Math.PI / 2));
            if (i == 0) {
                starPath.moveTo(x, y);
            } else {
                starPath.lineTo(x, y);
            }
        }
        starPath.close();
        canvas.drawPath(starPath, paint);
    }

    // dp转px工具方法
    private float dpToPx(float dp) {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp,
            getResources().getDisplayMetrics()
        );
    }

    // 对外提供设置评分的方法
    public void setRating(int rating) {
        if (rating >= 0 && rating <= mMaxRating) {
            mCurrentRating = rating;
            invalidate(); // 触发重绘
        }
    }
}

布局中使用自定义View #

<com.yourpackage.ColorfulRatingBar
    android:id="@+id/colorfulRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="40dp"/>

三、Jetpack Compose场景：简洁实现 #

如果你的项目用了Compose，实现起来会更简洁，直接用Row组合不同颜色的Icon即可：

@Composable
fun ColorfulRatingBar(rating: Int, maxRating: Int = 5) {
    val starColors = listOf(
        Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta
    )
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        repeat(maxRating) { index ->
            Icon(
                imageVector = if (index < rating) Icons.Filled.Star else Icons.Outlined.Star,
                contentDescription = "Star ${index + 1}",
                tint = if (index < rating) starColors[index] else Color.Gray,
                modifier = Modifier.size(24.dp)
            )
        }
    }
}

调用示例 #

ColorfulRatingBar(rating = 3)

补充注意事项 #

• 如果需要支持半星评分，自定义View的方法可以通过计算绘制部分填充的星星来实现
• 建议用VectorDrawable作为星星资源，能更好适配不同分辨率的设备
• 如果需要添加点击评分的交互，自定义View可以重写onTouchEvent方法，或者在LinearLayout的方案中给每个ImageView设置点击事件

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