告别生硬评分条：SimpleRatingBar让Android星级交互体验提升300%-优快云博客

告别生硬评分条：SimpleRatingBar让Android星级交互体验提升300%

【免费下载链接】SimpleRatingBar 项目地址: https://gitcode.com/gh_mirrors/sim/SimpleRatingBar

你是否还在为Android原生RatingBar的呆板效果发愁？用户点击星级时毫无反馈、半星显示需要复杂自定义、动画效果难以实现？SimpleRatingBar开源库彻底解决这些痛点，通过本文你将掌握：

3种内置动画RatingBar的快速集成
15+自定义属性全解析（含半星/步长/触摸反馈）
从零实现专属动画效果的核心原理
性能优化与常见问题解决方案

为什么选择SimpleRatingBar？

Android原生RatingBar存在三大痛点：

痛点	原生RatingBar	SimpleRatingBar
动画效果	无内置动画	缩放/旋转/渐进动画
半星支持	需自定义Drawable	内置半星计算逻辑
交互反馈	单一点击反馈	点击/滑动/长按全支持
自定义程度	有限属性配置	15+可配置属性

原生RatingBar实现半星效果的典型代码（对比用）

// 原生RatingBar实现半星需要创建LayerDrawable
RatingBar ratingBar = findViewById(R.id.rating_bar);
LayerDrawable layerDrawable = (LayerDrawable) ratingBar.getProgressDrawable();
Drawable halfStar = ContextCompat.getDrawable(this, R.drawable.half_star);
layerDrawable.setDrawableByLayerId(android.R.id.progress, halfStar);
// 还需处理onRatingChanged监听的四舍五入问题

核心组件架构解析

SimpleRatingBar采用基类抽象+动画实现的设计模式，核心类结构如下：

mermaid

核心工作流程： mermaid

快速集成指南（3分钟上手）

1. 添加依赖

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.ome450901:SimpleRatingBar:1.5.1'
}

2. 基础使用（XML方式）

<!-- 缩放动画RatingBar -->
<com.willy.ratingbar.ScaleRatingBar
    android:id="@+id/scaleRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srb_numStars="5"
    app:srb_rating="3.5"
    app:srb_stepSize="0.5"
    app:srb_starWidth="40dp"
    app:srb_starHeight="40dp"
    app:srb_starPadding="8dp"
    app:srb_drawableEmpty="@drawable/empty_star"
    app:srb_drawableFilled="@drawable/filled_star"
    app:srb_isIndicator="false"
    app:srb_clearRatingEnabled="true"/>

3. 代码控制与监听

ScaleRatingBar ratingBar = findViewById(R.id.scaleRatingBar);
ratingBar.setOnRatingChangeListener(new BaseRatingBar.OnRatingChangeListener() {
    @Override
    public void onRatingChange(BaseRatingBar ratingBar, float rating, boolean fromUser) {
        Log.d("Rating", "当前评分: " + rating + ", 是否用户操作: " + fromUser);
        // 实时更新UI或提交到服务器
    }
});

// 动态设置属性
ratingBar.setNumStars(6);
ratingBar.setStepSize(0.5f);
ratingBar.setRating(4.5f);
ratingBar.setClearRatingEnabled(true); // 再次点击清除评分

高级自定义指南

15+核心属性全解析（附默认值）

属性名	类型	默认值	说明
srb_numStars	int	5	星星总数
srb_rating	float	0	当前评分
srb_stepSize	float	1.0	步长(0.1-1.0)
srb_minimumStars	float	0	最小评分
srb_starWidth	dimension	0	星星宽度
srb_starHeight	dimension	0	星星高度
srb_starPadding	dimension	20px	星星间距
srb_drawableEmpty	reference	内置空星	空星图片
srb_drawableFilled	reference	内置实星	实星图片
srb_isIndicator	boolean	false	是否只读
srb_scrollable	boolean	true	是否支持滑动
srb_clickable	boolean	true	是否支持点击
srb_clearRatingEnabled	boolean	true	再次点击清除

实现自定义动画效果

只需两步即可创建专属动画RatingBar：

创建动画资源文件（res/anim/custom_anim.xml）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <alpha android:fromAlpha="0.5" android:toAlpha="1.0"/>
    <scale
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

创建自定义RatingBar类：

public class CustomAnimationRatingBar extends AnimationRatingBar {
    private static final long ANIMATION_DELAY = 20;

    public CustomAnimationRatingBar(Context context) {
        super(context);
    }

    @Override
    protected void fillRatingBar(final float rating) {
        if (mRunnable != null) {
            mHandler.removeCallbacksAndMessages(mRunnableToken);
        }

        for (final PartialView partialView : mPartialViews) {
            final int viewId = (int) partialView.getTag();
            final double maxIntRating = Math.ceil(rating);

            if (viewId > maxIntRating) {
                partialView.setEmpty();
                continue;
            }

            mRunnable = new Runnable() {
                @Override
                public void run() {
                    if (viewId == maxIntRating) {
                        partialView.setPartialFilled(rating);
                    } else {
                        partialView.setFilled();
                    }
                    
                    // 应用自定义动画
                    Animation customAnim = AnimationUtils.loadAnimation(
                        getContext(), R.anim.custom_anim);
                    partialView.startAnimation(customAnim);
                }
            };
            postRunnable(mRunnable, ANIMATION_DELAY);
        }
    }
}

性能优化与最佳实践

避免过度绘制

当使用大量RatingBar（如列表项）时，建议：

设置固定的starWidth和starHeight
复用Drawable资源
列表滚动时设置isIndicator=true

// RecyclerView适配器中优化
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    Product product = mProducts.get(position);
    holder.ratingBar.setRating(product.getRating());
    // 滚动时禁用交互提升性能
    holder.ratingBar.setIsIndicator(mIsScrolling);
}

常见问题解决方案

半星显示模糊：确保图片尺寸为偶数像素，推荐48x48/64x64
动画不同步：继承AnimationRatingBar时调用removeCallbacksAndMessages
宽高计算异常：设置android:layout_width="wrap_content"并指定starWidth

从0实现原理揭秘

PartialView是实现半星显示的核心：

mermaid

关键代码解析（半星绘制）：

// PartialView.java核心绘制逻辑
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mFilledRatio <= 0) {
        mEmptyDrawable.draw(canvas);
        return;
    }
    
    // 绘制实星部分
    int saveCount = canvas.save();
    int width = mFilledDrawable.getIntrinsicWidth();
    canvas.clipRect(0, 0, (int)(width * mFilledRatio), getHeight());
    mFilledDrawable.draw(canvas);
    canvas.restoreToCount(saveCount);
    
    // 绘制空星部分（右侧）
    if (mFilledRatio < 1) {
        saveCount = canvas.save();
        canvas.clipRect((int)(width * mFilledRatio), 0, width, getHeight());
        mEmptyDrawable.draw(canvas);
        canvas.restoreToCount(saveCount);
    }
}

总结与扩展

SimpleRatingBar通过组合优于继承的设计思想，实现了高度可定制的评分控件。掌握其原理后，你还可以：

实现脉冲动画RatingBar（参考scale_up.xml）
添加星级改变的声音反馈
结合Jetpack Compose实现声明式调用

项目地址：https://gitcode.com/gh_mirrors/sim/SimpleRatingBar

现在就集成SimpleRatingBar，让你的App评分交互从此与众不同！

读者福利：评论区留言"RatingBar"获取《Android评分控件设计规范》PDF，包含12种常见场景设计指南。

【免费下载链接】SimpleRatingBar 项目地址: https://gitcode.com/gh_mirrors/sim/SimpleRatingBar

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考