Android自定义RatingBar实现与优化指南

1. 为什么需要自定义 RatingBar

在Android应用开发中，系统自带的RatingBar组件往往无法满足设计师的视觉要求。默认的RatingBar样式通常与App整体设计风格格格不入，尤其是当我们需要实现以下效果时：

• 使用自定义星星图标替代系统默认的实心/空心星星
• 改变评分条的颜色和大小
• 实现半星评分效果
• 添加动画交互效果
• 调整星星之间的间距

我最近在一个电商App项目中就遇到了这个问题。设计师给了一套精美的金色星星图标，要求实现点击评分和展示商品平均分的功能。系统默认的RatingBar根本无法满足这些需求，这就促使我深入研究自定义RatingBar的实现方案。

2. 自定义RatingBar的基础实现

2.1 创建自定义样式资源

首先在res/drawable目录下创建ratingbar_custom.xml文件：

xml复制<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/background"
          android:drawable="@drawable/star_empty" />
    <item android:id="@+android:id/secondaryProgress"
          android:drawable="@drawable/star_empty" />
    <item android:id="@+android:id/progress"
          android:drawable="@drawable/star_filled" />
</layer-list>

这里我们定义了三种状态：

• background: 未选中的星星（空星）
• secondaryProgress: 部分选中的状态（用于半星效果）
• progress: 完全选中的星星（实星）

2.2 定义样式属性

在res/values/styles.xml中添加自定义样式：

xml复制<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/ratingbar_custom</item>
    <item name="android:minHeight">48dp</item>
    <item name="android:maxHeight">48dp</item>
    <item name="android:stepSize">0.5</item>
</style>

关键参数说明：

• minHeight和maxHeight保持相同值可以固定RatingBar高度
• stepSize设置为0.5允许半星评分

2.3 在布局中使用

在XML布局文件中引用自定义样式：

xml复制<RatingBar
    android:id="@+id/ratingBar"
    style="@style/CustomRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:rating="3.5" />

3. 进阶自定义技巧

3.1 动态调整星星间距

系统RatingBar默认的星星间距较小，我们可以通过自定义样式来调整：

java复制public class SpacingRatingBar extends RatingBar {
    private static final int DEFAULT_SPACING = 10; // 默认间距10dp
    
    public SpacingRatingBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }
    
    private void init(AttributeSet attrs) {
        TypedArray a = getContext().obtainStyledAttributes(
            attrs, R.styleable.SpacingRatingBar);
        int spacing = a.getDimensionPixelSize(
            R.styleable.SpacingRatingBar_spacing, DEFAULT_SPACING);
        a.recycle();
        
        Drawable drawable = getProgressDrawable();
        if (drawable instanceof LayerDrawable) {
            LayerDrawable layerDrawable = (LayerDrawable) drawable;
            for (int i = 0; i < layerDrawable.getNumberOfLayers(); i++) {
                Drawable starDrawable = layerDrawable.getDrawable(i);
                if (starDrawable instanceof ClipDrawable) {
                    InsetDrawable insetDrawable = new InsetDrawable(
                        starDrawable, 0, 0, spacing, 0);
                    layerDrawable.setDrawableByLayerId(
                        layerDrawable.getId(i), insetDrawable);
                }
            }
        }
    }
}

然后在attrs.xml中定义自定义属性：

xml复制<declare-styleable name="SpacingRatingBar">
    <attr name="spacing" format="dimension" />
</declare-styleable>

3.2 实现点击动画效果

为RatingBar添加点击动画可以提升用户体验：

java复制ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
    @Override
    public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
        if (fromUser) {
            // 点击动画
            ratingBar.animate()
                .scaleX(1.2f)
                .scaleY(1.2f)
                .setDuration(100)
                .withEndAction(() -> ratingBar.animate()
                    .scaleX(1f)
                    .scaleY(1f)
                    .setDuration(100)
                    .start())
                .start();
        }
    }
});

3.3 半星评分的精确控制

虽然设置stepSize="0.5"可以启用半星评分，但有时我们需要更精确的控制：

java复制// 设置最小步长为0.1
ratingBar.setStepSize(0.1f);

// 四舍五入到最近的0.5
float roundedRating = Math.round(rating * 2) / 2.0f;
ratingBar.setRating(roundedRating);

4. 常见问题与解决方案

4.1 图片模糊问题

当使用自定义星星图片时，可能会遇到图片模糊的情况。这是因为系统会拉伸图片以适应RatingBar的高度。解决方案：

1. 确保提供的图片足够大（至少是显示尺寸的2倍）
2. 在drawable资源中使用vector矢量图
3. 为不同屏幕密度提供多套位图资源

4.2 触摸区域不准确

有时点击星星的边缘区域无法正确触发评分变化。可以通过以下方式优化：

java复制// 在自定义RatingBar中重写onTouchEvent
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        float x = event.getX();
        float starWidth = getWidth() / getNumStars();
        int starIndex = (int) (x / starWidth);
        float newRating = starIndex + 1;
        if (newRating != getRating()) {
            setRating(newRating);
            return true;
        }
    }
    return super.onTouchEvent(event);
}

4.3 性能优化建议

当在ListView或RecyclerView中使用多个自定义RatingBar时，需要注意：

1. 避免在getView()或onBindViewHolder()中频繁创建Drawable
2. 使用ViewHolder模式缓存RatingBar实例
3. 考虑使用setIsIndicator(true)禁用不可交互的RatingBar的触摸事件

5. 高级应用场景

5.1 不同大小的星星

实现类似Apple App Store的评分效果，星星大小随评分变化：

java复制public class VariableSizeRatingBar extends RatingBar {
    private float[] starScales = {0.8f, 0.9f, 1.0f, 1.1f, 1.2f};
    
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        int stars = getNumStars();
        float rating = getRating();
        
        canvas.save();
        for (int i = 0; i < stars; i++) {
            float scale = starScales[i % starScales.length];
            canvas.save();
            canvas.scale(scale, scale);
            
            // 计算缩放后的绘制位置
            float offset = (1 - scale) * getHeight() / 2;
            canvas.translate(offset, offset);
            
            // 绘制星星
            Drawable star = i < rating ? getFilledStar() : getEmptyStar();
            star.setBounds(0, 0, getHeight(), getHeight());
            star.draw(canvas);
            
            canvas.restore();
            canvas.translate(getHeight(), 0);
        }
        canvas.restore();
    }
}

5.2 多颜色评分条

实现类似电影评分的多颜色评分效果（如豆瓣的绿-黄-红渐变）：

java复制public class GradientRatingBar extends RatingBar {
    private Paint gradientPaint;
    private RectF gradientRect;
    
    public GradientRatingBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        gradientPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        gradientRect = new RectF();
        
        // 创建渐变色
        int[] colors = {Color.GREEN, Color.YELLOW, Color.RED};
        float[] positions = {0f, 0.5f, 1f};
        LinearGradient gradient = new LinearGradient(
            0, 0, getWidth(), 0, colors, positions, Shader.TileMode.CLAMP);
        gradientPaint.setShader(gradient);
    }
    
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        // 先绘制背景
        super.onDraw(canvas);
        
        // 再绘制渐变覆盖层
        gradientRect.set(0, 0, getWidth() * getRating() / getNumStars(), getHeight());
        canvas.drawRect(gradientRect, gradientPaint);
    }
}

5.3 与数据绑定框架结合

在使用MVVM架构时，可以将RatingBar与ViewModel绑定：

kotlin复制// 在ViewModel中
val productRating = MutableLiveData<Float>()

// 在Activity/Fragment中
viewModel.productRating.observe(this) { rating ->
    binding.ratingBar.rating = rating
}

binding.ratingBar.setOnRatingBarChangeListener { _, rating, _ ->
    viewModel.productRating.value = rating
}

对于更复杂的需求，可以创建自定义BindingAdapter：

kotlin复制@BindingAdapter("app:rating", "app:onRatingChanged", requireAll = false)
fun RatingBar.bindRating(
    rating: Float?,
    listener: RatingBar.OnRatingBarChangeListener?
) {
    this.rating = rating ?: 0f
    if (listener != null) {
        setOnRatingBarChangeListener(listener)
    }
}

6. 测试与验证

6.1 单元测试自定义RatingBar

编写单元测试验证自定义RatingBar的行为：

kotlin复制@Test
fun testRatingChange() {
    // 准备
    val ratingBar = SpacingRatingBar(ApplicationProvider.getApplicationContext())
    ratingBar.numStars = 5
    ratingBar.rating = 0f
    
    // 执行
    ratingBar.rating = 3.5f
    
    // 验证
    assertEquals(3.5f, ratingBar.rating)
}

@Test
fun testHalfStarRounding() {
    val ratingBar = SpacingRatingBar(ApplicationProvider.getApplicationContext())
    ratingBar.stepSize = 0.5f
    
    // 测试四舍五入
    ratingBar.rating = 3.2f
    assertEquals(3.0f, ratingBar.rating)
    
    ratingBar.rating = 3.6f
    assertEquals(4.0f, ratingBar.rating)
}

6.2 UI自动化测试

使用Espresso进行UI交互测试：

kotlin复制@Test
fun testRatingBarInteraction() {
    // 找到RatingBar
    val ratingBar = onView(withId(R.id.ratingBar))
    
    // 验证初始状态
    ratingBar.check(matches(RatingBarMatcher.withRating(0f)))
    
    // 模拟点击第三个星星
    ratingBar.perform(clickAtPosition(2))
    
    // 验证评分变为3
    ratingBar.check(matches(RatingBarMatcher.withRating(3f)))
}

private fun clickAtPosition(position: Int): ViewAction {
    return object : ViewAction {
        override fun getDescription() = "Click at position $position"
        
        override fun getConstraints() = isAssignableFrom(RatingBar::class.java)
        
        override fun perform(uiController: UiController, view: View) {
            val ratingBar = view as RatingBar
            val starWidth = ratingBar.width / ratingBar.numStars
            val x = starWidth * position + starWidth / 2
            val y = ratingBar.height / 2
            val coordinates = floatArrayOf(x.toFloat(), y.toFloat())
            val matrix = Matrix()
            ratingBar.imageMatrix.invert(matrix)
            matrix.mapPoints(coordinates)
            MotionEvent.obtain(0, 0, MotionEvent.ACTION_DOWN, coordinates[0], coordinates[1], 0).also {
                ratingBar.dispatchTouchEvent(it)
                it.recycle()
            }
        }
    }
}

6.3 性能测试

使用Android Profiler检测自定义RatingBar的性能：

1. 检查布局层次是否过深
2. 监控绘制和测量时间
3. 检查内存占用，特别是使用大量自定义图片时
4. 滚动测试，确保在列表中使用时不会导致卡顿

7. 兼容性考虑

7.1 不同Android版本适配

自定义RatingBar在不同Android版本上可能会有不同的表现：

• API 21+：可以使用矢量图作为星星资源
• API 16-20：需要使用PNG位图
• API 15及以下：需要额外处理一些属性兼容性问题

建议的兼容方案：

xml复制<!-- 在res/values-v21/styles.xml中 -->
<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/ratingbar_custom_vector</item>
</style>

<!-- 在res/values/styles.xml中 -->
<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/ratingbar_custom_png</item>
</style>

7.2 深色模式支持

为自定义RatingBar添加深色模式支持：

1. 在res/values-night/colors.xml中定义深色模式下的颜色
2. 使用?attr/colorPrimary等主题属性代替硬编码颜色
3. 为星星图片提供深色版本

xml复制<!-- 在drawable/ratingbar_custom.xml中 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/background">
        <bitmap android:src="@drawable/star_empty"
                android:tint="?attr/starColor" />
    </item>
    <item android:id="@+android:id/progress">
        <bitmap android:src="@drawable/star_filled"
                android:tint="?attr/starFilledColor" />
    </item>
</layer-list>

然后在主题中定义这些属性：

xml复制<!-- 在res/values/attrs.xml中 -->
<attr name="starColor" format="color" />
<attr name="starFilledColor" format="color" />

<!-- 在res/values/themes.xml中 -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="starColor">@color/star_default</item>
    <item name="starFilledColor">@color/star_filled_default</item>
</style>

<!-- 在res/values-night/themes.xml中 -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="starColor">@color/star_dark</item>
    <item name="starFilledColor">@color/star_filled_dark</item>
</style>

8. 替代方案评估

虽然自定义RatingBar可以满足大多数需求，但在某些场景下，可以考虑其他实现方案：

8.1 使用多个ImageView实现

对于简单的评分展示（不需要交互），可以用多个ImageView组合：

xml复制<LinearLayout
    android:id="@+id/ratingContainer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    
    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/star_filled" />
    
    <!-- 更多星星... -->
</LinearLayout>

优点：

• 实现简单
• 完全控制每个星星的状态
• 性能较好

缺点：

• 交互逻辑需要自己实现
• 动态调整评分较麻烦

8.2 使用第三方库

一些流行的第三方评分控件库：

1. MaterialRatingBar

   • 完全兼容Material Design规范
   • 支持自定义图标和颜色
   • 良好的动画支持

2. SimpleRatingView

   • 轻量级实现
   • 支持多种形状（不只是星星）
   • 流畅的动画效果

3. RangeRatingBar

   • 支持范围评分
   • 可自定义评分步长
   • 良好的触摸反馈

选择第三方库的考虑因素：

• 库的维护状态和更新频率
• 最小SDK版本要求
• 方法数和大小对APK的影响
• 自定义灵活度

8.3 使用Lottie动画

对于需要复杂动画效果的评分控件，可以使用Lottie：

xml复制<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_fileName="star_rating.json"
    app:lottie_loop="false"
    app:lottie_speed="1.5" />

优点：

• 实现复杂的矢量动画
• 设计师可以直接导出After Effects动画
• 流畅的性能表现

缺点：

• 资源文件可能较大
• 交互逻辑需要额外处理
• 对低端设备可能不够友好

9. 性能优化实战

9.1 减少过度绘制

自定义RatingBar可能会导致过度绘制问题，可以通过以下方式优化：

1. 在自定义View的构造方法中设置：

java复制setLayerType(LAYER_TYPE_HARDWARE, null);

2. 确保onDraw()方法中没有不必要的绘制操作
3. 使用canvas.clipRect()限制绘制区域

9.2 内存优化

当使用大量位图作为星星资源时：

1. 使用BitmapFactory.Options.inSampleSize适当缩小大图
2. 使用Bitmap.recycle()及时释放不再需要的位图
3. 考虑使用统一的BitmapCache管理星星图片

java复制public class BitmapCache {
    private static final LruCache<String, Bitmap> cache = 
        new LruCache<String, Bitmap>((int) (Runtime.getRuntime().maxMemory() / 8)) {
            @Override
            protected int sizeOf(String key, Bitmap value) {
                return value.getByteCount();
            }
        };
    
    public static Bitmap getBitmap(Context context, @DrawableRes int resId) {
        String key = String.valueOf(resId);
        Bitmap bitmap = cache.get(key);
        if (bitmap == null || bitmap.isRecycled()) {
            bitmap = BitmapFactory.decodeResource(context.getResources(), resId);
            cache.put(key, bitmap);
        }
        return bitmap;
    }
}

9.3 布局优化

当在列表中使用多个自定义RatingBar时：

1. 使用merge标签减少布局层次
2. 在自定义View中直接绘制，避免嵌套ViewGroup
3. 考虑使用ViewStub延迟加载非可见项

xml复制<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <com.example.CustomRatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5" />
</merge>

10. 设计协作建议

10.1 与设计师的沟通要点

1. 确认评分交互细节：

   • 是否允许半星评分
   • 点击后是否需要即时提交
   • 是否需要显示当前评分值

2. 资源文件规范：

   • 提供不同密度的图片资源（mdpi, hdpi, xhdpi等）
   • 矢量图优先，位图需提供多套分辨率
   • 明确各种状态（选中、未选中、半选）的视觉表现

3. 动画规范：

   • 提供动画时长、缓动函数等参数
   • 明确触发动画的交互场景

10.2 设计资源处理流程

1. 使用Android Studio的Vector Asset Studio导入SVG
2. 使用Image Asset Studio生成不同密度的位图
3. 对图片进行无损压缩（如使用TinyPNG）
4. 为深色模式提供替代资源

10.3 设计走查清单

在实现完成后，检查以下设计细节：

• [ ] 星星间距是否符合设计稿
• [ ] 各种状态的颜色是否正确
• [ ] 动画效果是否流畅
• [ ] 深色模式下的显示是否正确
• [ ] 不同屏幕密度下的显示是否清晰
• [ ] 触摸反馈是否符合预期
• [ ] 无障碍功能是否完善（如内容描述）