章节索引 :

评分条 RatingBar

本节将继续学习一个和进度有关的控件:RatingBar ,在 Android 中 RatingBar 是一个可以支持用户打分的 UI 控件,相比 ProgressBar 而言,RatingBar 不仅仅可以用来展示同时还可以接收用户的输入操作;而相比 SeekBar,RatingBar 则更侧重于与用户的互动性。有了前两节的基础,这一节理解起来也是非常容易的。

1. RatingBar 的特性

从继承关系来看,RatingBar 是派生自 SeekBar 的,所以它拥有 SeekBar 的所有属性和功能(当然也包括 ProgressBar 的功能)。可以理解为 SeekBar 是进度的另一种表现形式,它将进度换成了分数,用户拖动进度条来进行评分操作,我们先来感受一下 RatingBar 的样式:

RatingBar样例

有图有真相,我们会在各大 App 市场、电影票 App、团购 App 等场景中大量的看到 RatingBar 的影子。

用户通过点击不同的星级进行打分,通过 RatingBar 我们可以拿到一个浮点类型的数字,比如:1.0、2.3、5.5 等等,就类似于我们给电影评分,接下来我们看看如何使用。

2 RatingBar 的基本用法

2.1 RatingBar 的属性

RatingBar 的属性都很好理解,以下是几个常用的属性:

  • android:rating:
    设置默认评分值,接收一个浮点数。
  • android:numStars:
    总共有多少颗星级,接收一个整形数。
  • android:isIndicator:
    设置当前 RatingBar 是否只是分数展示,即用户无法更改分值,接收一个 boolean 值。
  • android:stepSize:
    评分增加的步进值,接收一个浮点数。
  • style:
    自定义样式。和 ProgressBar、SeekBar 一样,我们可以自定义 RatingBar 的展示样式,系统为我们提供了两种常用的样式可供选择:
    style="?android:attr/ratingBarStyleSmall"
    style="?android:attr/ratingBarStyleIndicator"
    

2.2 RatingBar 事件监听及 API

RatingBar 需要接收用户的输入,所以需要一个事件监听器:

RatingBar.OnRatingBarChangeListener

接口中只定义了一个函数:

void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser);

参数说明:

  • ratingBar: 分值被修改的 RatingBar 实例
  • rating: 修改之后的分值,一个浮点型
  • fromUser: 是否是由用户主动修改

另外我们在代码中可以动态去修改 Rating 值以及总的星级数,通过如下接口:

setRating(float rating)          // 动态设置当前分值
setNumStars(final int numStars)  // 动态设置总分数

通过以下接口获取当前的分值及总分数:

getNumStars()
getRating()

2.3 RatingBar 的使用示例

接下来我们实现一个完整的 RatingBar 工程,通过打分回调接口及获取分数的 API 完成以下两大功能:

  • 在点击 RatingBar 进行打分之后通过 Toast 展示当前分数
  • 点击 Button 的获取当前分数,并展示到 TextView 之上
    首先我们编写布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:layout_marginTop="200dp"
        android:numStars="5"
        android:rating="2.6"
        android:stepSize="0.1" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ratingBar"
        android:layout_alignLeft="@+id/ratingBar"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="30dp"
        android:text="获取评分" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_alignLeft="@+id/button"
        android:layout_marginTop="20dp"
        android:textSize="20dp"
        android:textStyle="bold" />
</RelativeLayout>

布局文件中我们放置了 3 个控件:RatingBar 用来展示星级、Button 用来展示触发分数获取、TextView用来展示具体的分数值,接下来编写 Java 代码完成逻辑控制:

package com.emercy.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private RatingBar mRatingBar;
    private TextView mTextView;
    private Button mButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRatingBar = findViewById(R.id.ratingBar);
        mTextView = findViewById(R.id.textView);
        mButton = findViewById(R.id.button);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int numStars = mRatingBar.getNumStars();
                float rating = mRatingBar.getRating();
                mTextView.setText("得分: " + rating + "/" + numStars);
            }
        });

        mRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(MainActivity.this, "当前分数变动为:" + rating, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

首先给 Button 设置一个点击事件监听器,在其中通过getNumStars()getRating()获取总的星数和当前星数,并通过 TextView 展示。接着给 RatingBar 。

设置一个评分变动监听器,在评分修改的时候通过 Toast 打印出最新的评分,效果如下:

图片描述

3. 小结

本节是继续前两节—— ProgressBar 、 SeekBar 的又一升级版,它延续了进度条及拖动条的特点,而将场景转移到了评分系统当中,使用起来和 ProgressBar、SeekBar 类似,也非常好理解,在具体场景的时候能够灵活运用就行。

环境搭建,开发相关
Android 系统背景及结构概述 Android 开发环境搭建 Genymotion 的安装与使用 Android 工程解析及使用 Android 程序签名打包
常用 UI 布局
Android 的 UI 根基 View与View Android 线性布局 LinearLayout Android相对布局RelativeLayout Android 表格布局 TableLayout Android 网格布局 GridLayout Android 帧布局 FrameLayout Android绝对布局AbsoluteLayout
基础控件
Android 文本框 TextView Android 文本输入框 EditText 按钮 Button/ImageButton 选择框 RadioButton/Check 开关控件ToggleButton/Switch Android 图片控件 ImageView Android 进度条 ProgressBar Android 拖动条 SeekBar Android 评分条 RatingBar Android 滚动条 ScrollView 轮播滚动视图 ViewFlipper
Adapter 相关控件
Android 适配器 Adapter Android 列表控件 ListView Android 网格视图 GridView Android 下拉选择框 Spinner 自动补全文本框 AutoCompleteText 折叠列表 ExpandableListView
提示类控件
吐司提示:Toast 的使用方法 状态栏通知:Notification 对话框:AlertDialog 悬浮窗:PopupWindow
菜单类控件
菜单:Menu
其他控件
视频页面:ViewPager 侧滑菜单:DrawerLayout
事件处理机制
基于监听的事件处理机制 Handler 消息传递机制 触摸事件分发处理 AsyncTask:异步任务 Android 手势处理
Android 四大组件
活动:Activity 服务:Service 广播接收器:Broadcast Receiver 内容提供者 - Content Provider
数据存储
文件存储 SharedPreferences 存储 数据库:SQLite 的使用
网络编程
HTTP 使用详解 xml 数据解析 JSON 数据解析 网页视图:WebView Socket 网络接口
绘图与动画
图片资源:Drawable 位图:Bitmap
多媒体开发
媒体播放器:MediaPlayer 相机:Camera 音频录制:MediaRecorder
并发编程
多线程