Android星级评分条设计与实现

于 2024-08-27 13:32:57 发布
阅读量1.2k 收藏 12
点赞数 8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36364707/article/details/141637620
版权

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：星级评分条是Android开发中常用的UI元素，用于收集用户反馈。本示例深入探讨了RatingBar的使用方法，包括XML布局声明、属性详解、编程接口、监听评分变化、自定义样式和示例代码。通过本课程，开发者可以掌握RatingBar的实际应用，提升用户体验。 星级评分条

1. Android星级评分条简介

星级评分条是一个常用的控件，用于收集用户对某个项目的评分。它通常由一系列星星组成，用户可以通过点击星星来选择评分。Android星级评分条（RatingBar）是一个可定制的控件，允许开发人员指定星星数量、当前评分、评分步长以及是否只显示评分而不允许交互。

2. XML布局声明

2.1 根布局属性

RatingBar的根布局是一个LinearLayout，其属性如下：

| 属性 | 说明 | |---|---| | android:layout_width | 布局宽度 | | android:layout_height | 布局高度 | | android:orientation | 布局方向，默认为水平 | | android:background | 背景颜色或图片 | | android:padding | 内边距 | | android:gravity | 子控件对齐方式 |

2.2 星星布局属性

RatingBar中的每个星星是一个ImageView，其属性如下：

| 属性 | 说明 | |---|---| | android:layout_width | 星星宽度 | | android:layout_height | 星星高度 | | android:src | 星星图片 | | android:tint | 星星颜色 | | android:scaleType | 图片缩放方式 | | android:contentDescription | 无障碍描述 |

3. 属性详解

3.1 numStars：星星数量

numStars 属性指定评分条中显示的星星数量。该属性的类型为 int ，默认值为5。 

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="10" />

在上面的示例中，评分条将显示10颗星星。

3.2 rating：当前评分

rating 属性指定评分条的当前评分。该属性的类型为 float ，默认值为0.0。 

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rating="3.5" />

在上面的示例中，评分条将显示3.5颗星星。

3.3 stepSize：评分步长

stepSize 属性指定评分条的评分步长。该属性的类型为 float ，默认值为0.1。 

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stepSize="0.5" />

在上面的示例中，评分条的评分步长为0.5。这意味着用户只能以0.5的增量对评分条进行评分。

3.4 isIndicator：是否只显示评分，不可交互

isIndicator 属性指定评分条是否只显示评分，不可交互。该属性的类型为 boolean ，默认值为 false 。 

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:isIndicator="true" />

在上面的示例中，评分条将只显示评分，用户无法与评分条进行交互。

4. 编程接口

4.1 setRating(float rating)：设置评分

功能描述：

setRating()方法用于设置RatingBar的当前评分。

参数说明：

| 参数 | 类型 | 描述 | |---|---|---| | rating | float | 要设置的评分值 |

代码示例： 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
ratingBar.setRating(3.5f);

逻辑分析：

该代码示例将RatingBar的当前评分设置为3.5。

4.2 getRating()：获取评分

功能描述：

getRating()方法用于获取RatingBar的当前评分。

返回值：

float：当前评分值

代码示例： 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
float rating = ratingBar.getRating();

逻辑分析：

该代码示例获取RatingBar的当前评分并将其存储在rating变量中。

4.3 setNumStars(int numStars)：设置星星数量

功能描述：

setNumStars()方法用于设置RatingBar中星星的数量。

参数说明：

| 参数 | 类型 | 描述 | |---|---|---| | numStars | int | 要设置的星星数量 |

代码示例： 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
ratingBar.setNumStars(5);

逻辑分析：

该代码示例将RatingBar中星星的数量设置为5。

4.4 setStepSize(float stepSize)：设置评分步长

功能描述：

setStepSize()方法用于设置RatingBar的评分步长。步长表示用户每次触摸星星时评分增加或减少的量。

参数说明：

| 参数 | 类型 | 描述 | |---|---|---| | stepSize | float | 要设置的评分步长 |

代码示例： 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
ratingBar.setStepSize(0.5f);

逻辑分析：

该代码示例将RatingBar的评分步长设置为0.5，这意味着用户每次触摸星星时评分将增加或减少0.5。

4.5 setIsIndicator(boolean isIndicator)：设置是否只显示评分

功能描述：

setIsIndicator()方法用于设置RatingBar是否只显示评分，而不能交互。

参数说明：

| 参数 | 类型 | 描述 | |---|---|---| | isIndicator | boolean | true表示只显示评分，false表示可交互 |

代码示例： 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
ratingBar.setIsIndicator(true);

逻辑分析：

该代码示例将RatingBar设置为只显示评分，用户无法与之交互。

5. 监听评分变化

评分条控件提供了评分变化监听器，允许我们监听评分的改变并做出相应的处理。

5.1 OnRatingBarChangeListener：评分变化监听器

OnRatingBarChangeListener 是一个接口，它定义了一个评分变化回调方法 onRatingChanged 。要监听评分变化，我们需要实现此接口并将其设置到评分条控件中。 

// 实现OnRatingBarChangeListener接口
public class MyRatingBarChangeListener implements OnRatingBarChangeListener {

    @Override
    public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
        // 评分变化时的回调方法
    }
}

// 设置监听器
ratingBar.setOnRatingBarChangeListener(new MyRatingBarChangeListener());

5.2 onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser)：评分变化回调

onRatingChanged 方法在评分变化时被调用，它接收三个参数：

  • ratingBar ：触发事件的评分条控件
  • rating ：新的评分值
  • fromUser ：指示评分变化是否是由用户操作引起的

在 onRatingChanged 方法中，我们可以根据评分的变化做出相应的处理，例如：

  • 更新UI以显示新的评分
  • 保存评分到数据库
  • 执行其他与评分相关的操作

代码示例

以下代码示例演示了如何使用 OnRatingBarChangeListener 监听评分变化： 

public class RatingBarChangeListenerExample {

    public static void main(String[] args) {
        // 创建评分条控件
        RatingBar ratingBar = new RatingBar(context);

        // 设置评分变化监听器
        ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                // 显示新的评分
                Toast.makeText(context, "New rating: " + rating, Toast.LENGTH_SHORT).show();
            }
        });

        // 设置评分
        ratingBar.setRating(3.5f);
    }
}

参数说明

| 参数 | 类型 | 描述 | |---|---|---| | ratingBar | RatingBar | 触发事件的评分条控件 | | rating | float | 新的评分值 | | fromUser | boolean | 指示评分变化是否是由用户操作引起的 |

代码逻辑分析

  1. 创建一个 RatingBar 控件。
  2. 设置 OnRatingBarChangeListener 监听器，并在 onRatingChanged 方法中显示新的评分。
  3. 设置评分条控件的评分为3.5。
  4. 当用户更改评分时， onRatingChanged 方法将被调用，并显示新的评分。

表格总结

| 方法 | 参数 | 描述 | |---|---|---| | setOnRatingBarChangeListener | OnRatingBarChangeListener | 设置评分变化监听器 | | onRatingChanged | RatingBar , float , boolean | 评分变化时的回调方法 |

流程图

[Mermaid格式流程图](https://mermaid-js.github.io/mermaid/#/mermaidLiveEditor/eyJjb2RlIjoiZ3JhcGggTFJBQ0sgQ29tcG9uZW50XG5zdWJncmFwaCBjb21wb25lbnQgU0VUX0NBTExCQUNLIEJsb2NrXG5zdWJncmFwaCBibG9jayBTRVQtQ0FMTElTVEFMQ0hBTkdFUiBCbG9ja1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

6.1 使用drawable资源

在使用drawable资源自定义样式时，需要为星星评分条设置 android:progressDrawable 属性，该属性指定一个Drawable对象，用于绘制星星评分条的进度部分。 

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/custom_progress_drawable" />

自定义的Drawable资源可以是一个XML文件，定义星星的形状、颜色和大小。 

<!-- custom_progress_drawable.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/background"
        android:drawable="@drawable/star_background" />
    <item
        android:id="@+id/progress"
        android:drawable="@drawable/star_progress" />
</layer-list>

其中， star_background 和 star_progress 是定义星星形状和颜色的Drawable资源。

6.2 使用shape资源

在使用shape资源自定义样式时，需要为星星评分条设置 android:progressDrawable 属性，该属性指定一个Shape对象，用于绘制星星评分条的进度部分。 

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/custom_progress_shape" />

自定义的Shape资源可以是一个XML文件，定义星星的形状、颜色和大小。 

<!-- custom_progress_shape.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="star">
    <solid android:color="@color/star_progress_color" />
</shape>

6.3 使用自定义视图

在使用自定义视图自定义样式时，需要为星星评分条设置 android:progressDrawable 属性，该属性指定一个自定义的View对象，用于绘制星星评分条的进度部分。 

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:progressDrawable="@layout/custom_progress_view" />

自定义的View可以是一个扩展自 View 类的类，负责绘制星星评分条的进度部分。 

public class CustomProgressView extends View {

    private Paint paint;
    private float rating;

    public CustomProgressView(Context context) {
        super(context);
        paint = new Paint();
        paint.setColor(Color.YELLOW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0, 0, getWidth() * rating, getHeight(), paint);
    }

    public void setRating(float rating) {
        this.rating = rating;
        invalidate();
    }
}

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：星级评分条是Android开发中常用的UI元素，用于收集用户反馈。本示例深入探讨了RatingBar的使用方法，包括XML布局声明、属性详解、编程接口、监听评分变化、自定义样式和示例代码。通过本课程，开发者可以掌握RatingBar的实际应用，提升用户体验。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

亿风行
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值