构建功能全面的可点击可滑动的RatingBar，简化用户交互

2023-10-09 14:32:39

简介：

自定义可点击可滑动的RatingBar，是一款专为Android应用设计的增强型评分控件，它提供以下功能：

可点击和可滑动：用户可以通过点击或滑动来选择评分，提升用户交互体验。
间距设置：可以设置滑块之间的间距，以适应不同的视觉需求。
图标自定义：支持设置选中和未选中的图标，并可以选择图标的数量。
选中图标类型：可以设置选中图标的类型，包括整星、半星或任意星。

2. 功能实现步骤：

2.1 创建自定义RatingBar：

首先，创建一个继承自View的自定义RatingBar类，并实现必要的属性和方法。

public class CustomRatingBar extends View {

    // 必要的属性
    private int numStars;  // 星星的数量
    private float starSpacing;  // 星星之间的间距
    private float starSize;  // 星星的大小
    private float rating;  // 当前评分

    // 方法
    @Override
    protected void onDraw(Canvas canvas) {
        // 绘制星星
    }

    // 其他方法 ...
}

2.2 设置属性和方法：

为自定义RatingBar设置相应的属性和方法，包括设置星星数量、间距、大小、选中图标、未选中图标等。

// 设置星星数量
public void setNumStars(int numStars) {
    this.numStars = numStars;
    invalidate();  // 重绘视图
}

// 设置星星间距
public void setStarSpacing(float starSpacing) {
    this.starSpacing = starSpacing;
    invalidate();  // 重绘视图
}

// 设置星星大小
public void setStarSize(float starSize) {
    this.starSize = starSize;
    invalidate();  // 重绘视图
}

// 设置评分
public void setRating(float rating) {
    this.rating = rating;
    invalidate();  // 重绘视图
}

// 获取评分
public float getRating() {
    return rating;
}

2.3 绘制星星：

在自定义RatingBar的onDraw()方法中，根据当前评分、星星数量、间距、大小等属性，绘制选中和未选中的星星。

@Override
protected void onDraw(Canvas canvas) {
    // 计算星星的位置和大小
    float starWidth = (starSize + starSpacing) * numStars;
    float starHeight = starSize;
    float startX = (getWidth() - starWidth) / 2;
    float startY = (getHeight() - starHeight) / 2;

    // 绘制未选中的星星
    for (int i = 0; i < numStars; i++) {
        // 计算未选中星星的边界
        float left = startX + (starSize + starSpacing) * i;
        float top = startY;
        float right = left + starSize;
        float bottom = top + starHeight;

        // 绘制未选中星星
        canvas.drawRect(left, top, right, bottom, unselectedStarPaint);
    }

    // 绘制选中的星星
    for (int i = 0; i < (int) rating; i++) {
        // 计算选中星星的边界
        float left = startX + (starSize + starSpacing) * i;
        float top = startY;
        float right = left + starSize;
        float bottom = top + starHeight;

        // 绘制选中星星
        canvas.drawRect(left, top, right, bottom, selectedStarPaint);
    }
}

2.4 添加点击和滑动事件：

最后，为自定义RatingBar添加点击和滑动事件处理，以便用户可以通过点击或滑动来选择评分。

// 添加点击事件
@Override
public boolean onTouchEvent(MotionEvent event) {
    // 获取触摸事件的坐标
    float x = event.getX();
    float y = event.getY();

    // 计算用户点击的位置对应的星星
    int starIndex = (int) ((x - startX) / (starSize + starSpacing));

    // 设置评分
    setRating(starIndex + 1);

    return super.onTouchEvent(event);
}

// 添加滑动事件
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    // 获取滑动事件的坐标
    float x = event.getX();
    float y = event.getY();

    // 计算用户滑动的方向
    if (Math.abs(x - startX) > Math.abs(y - startY)) {
        return true;  // 水平滑动
    } else {
        return false;  // 垂直滑动
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 获取滑动事件的坐标
    float x = event.getX();
    float y = event.getY();

    // 计算用户滑动的方向
    if (Math.abs(x - startX) > Math.abs(y - startY)) {
        // 水平滑动
        // 计算用户滑动的星星
        int starIndex = (int) ((x - startX) / (starSize + starSpacing));

        // 设置评分
        setRating(starIndex + 1);

        return true;
    } else {
        // 垂直滑动
        return false;
    }
}