Android 自定义星评空间示例代码

Android 自定义星评空间示例代码攻略

本文将详细讲解自定义星评空间示例代码的实现过程。星评空间可以用于用户评分等场景，采用自定义控件实现，较为灵活。具体步骤如下：

1.设计界面和布局

首先，需要在Android Studio中新建一个布局文件，设计星级评分控件的UI界面。依据需求，可以添加TextView、ImageView等视图。其中，TextView用于显示评分分数，ImageView用于显示星的样式。

以下是示例代码：

<!-- 自定义星级评分控件布局 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center_vertical">

    <!-- 评分分数文本 -->
    <TextView
        android:id="@+id/rating_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0.0"
        android:textColor="#FF9800"
        android:textSize="23sp"
        android:layout_marginRight="10dp"/>

    <!-- 星级图标 -->
    <LinearLayout
        android:id="@+id/rating_bar_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/rating_bar_1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_star_border_black_24dp"/>

        <ImageView
            android:id="@+id/rating_bar_2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_star_border_black_24dp"/>

        <ImageView
            android:id="@+id/rating_bar_3"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_star_border_black_24dp"/>

        <ImageView
            android:id="@+id/rating_bar_4"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_star_border_black_24dp"/>

        <ImageView
            android:id="@+id/rating_bar_5"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_star_border_black_24dp"/>
    </LinearLayout>

</RelativeLayout>

2.自定义星级评分控件

其次，需要在Java代码中定义一个继承于LinearLayout的新控件，即自定义星级评分控件。该控件主要用于更新UI状态、处理控件的点击事件等。在该控件中，需要添加如下3个方法，分别是设置星级评分、获取星级评分和修改评分文本：

/**
 * 设置星级评分
 * @param rating 评分值，取值范围0~5
 */
public void setRating(float rating) {
    if (rating < 0 || rating > 5) {
        return;
    }
    this.mRating = rating;
    updateRatingUI();
}

/**
 * 获取星级评分
 * @return 评分值，取值范围0~5
 */
public float getRating() {
    return mRating;
}

/**
 * 修改评分文本
 * @param rating 评分值，取值范围0~5
 */
private void updateRatingText(float rating) {
    String ratingText = String.format("%.1f", rating);
    mRatingText.setText(ratingText);
}

其中，setRating()方法用于设置星级评分，传入评分值后，可以更新UI状态，即将评分值转换成星级图标。getRating()方法用于获取当前的评分值，updateRatingText()方法用于修改评分文本，显示星级数字分数。

3.更新UI状态

在自定义星级评分控件中，需要添加一个方法updateRatingUI()，该方法用于根据评分值更新UI状态。具体步骤如下：

(1)首先，获取星级图标的ImageView控件；

(2)其次，根据评分值更新ImageView的图片资源，将评分值左侧的星图标变为实心的，右侧的星图标保持为空心。

以下是updateRatingUI()方法的示例代码：

/**
 * 更新星级图标，并修改评分文本
 */
private void updateRatingUI() {
    int ratingInt = (int) Math.floor(mRating);
    float ratingFloat = (float) (mRating - ratingInt);
    int index = 1;
    for (; index <= ratingInt; index++) {
        ImageView ratingBar = (ImageView) mRatingBarLayout.getChildAt(index - 1);
        ratingBar.setImageResource(R.drawable.ic_star_black_24dp);
    }
    if (ratingFloat > 0 && ratingFloat <= 0.5) {
        ImageView ratingBar = (ImageView) mRatingBarLayout.getChildAt(index - 1);
        ratingBar.setImageResource(R.drawable.ic_star_half_black_24dp);
        index++;
    }
    for (; index <= 5; index++) {
        ImageView ratingBar = (ImageView) mRatingBarLayout.getChildAt(index - 1);
        ratingBar.setImageResource(R.drawable.ic_star_border_black_24dp);
    }
    updateRatingText(mRating);
}

4.示例：点击星级图标设置评分值

最后，可以对自定义星级评分控件进行测试，实现点击星级图标设置评分值的功能。具体步骤如下：

(1)在自定义星级评分控件中，添加一个方法initRatingBar()，用于设置星级图标的点击事件；

(2)在initRatingBar()方法中，添加点击事件，将点击的星级图标设置对应的评分值。

以下是initRatingBar()方法的示例代码：

/**
 * 初始化星级图标控件，添加点击事件
 */
private void initRatingBar() {
    int count = mRatingBarLayout.getChildCount();
    for (int i = 0; i < count; i++) {
        ImageView ratingBar = (ImageView) mRatingBarLayout.getChildAt(i);
        final int position = i + 1;
        ratingBar.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                setRating(position);
            }
        });
    }
}

这样，当用户点击星级图标时，就可以将对应的评分值设置到自定义星级评分控件中。

示例说明

(1)假如你需要在某个地方实现一个星级评分控件，可以直接调用自定义星级评分控件，即调用setRating()方法，设置为评分值即可。

示例代码：

CustomRatingBar mCustomRatingBar = (CustomRatingBar) findViewById(R.id.custom_rating_bar);
mCustomRatingBar.setRating(3.5f);

(2)由于该自定义星级评分控件采用LinearLayout和ImageView实现，可以根据需求进行自由的拓展和修改。例如，可以在父布局中添加边框样式、调整图标大小等。