Android 自定义View之自定义评分选择器RatingBar

DtRatingBar

一个使用在android上的RatingBar。GitHub地址：DtRatingBar
使用依赖：

implementation 'com.yetland.dtratingbar:dtratingbar:1.0.1'

功能

• 图片自定义
• 大小自定义
• 数量自定义
• 可以打开或关闭半星
• 支持横向和纵向的滑动评分

效果图

demo.gif

主要参数

• rating_sum 总数
• rating_check 得分数
• rating_width RatingView的宽度
• rating_height RatingView的高度
• rating_padding_left RatingView的paddingLeft
• rating_padding_right RatingView的paddingRight
• rating_padding_top RatingView的paddingTop
• rating_padding_bottom RatingView的paddingBottom
• rating_star_img 全星的图片
• rating_half_star_img 半星的图片
• rating_un_star_img 没星的图片
• rating_support_half 是否支持半星

使用方法

• 通过xml形式配置

• 通过builder的形式配置

RatingView.Builder builder = new RatingView.Builder()
                .context(this)
                .width(30)
                .height(30)
                .paddingLeft(2)
                .paddingRight(2)
                .paddingBottom(2)
                .paddingTop(2)
                .star(R.mipmap.ic_star2)
                .unStar(R.mipmap.ic_un_star2)
                .halfStar(R.mipmap.ic_half_star2);

或者

RatingView.Builder builder = RatingView.with()
                .context(this)
                .width(30)
                .height(30)
                .paddingLeft(2)
                .paddingRight(2)
                .paddingBottom(2)
                .paddingTop(2)
                .star(R.mipmap.ic_star2)
                .unStar(R.mipmap.ic_un_star2)
                .halfStar(R.mipmap.ic_half_star2);

实现原理

通过自定义view的形式，将每颗星星(RatingView)通过addView的形式，添加到DtRatingView中。其实我们所有的属性都是基于RatingView，而不是DtRatingView，因为DtRatingView只是一个呈现，而RatingView才是本体。对于参数的设置，通过Builder的形式去设置，而这个Builder也是属于RatingView的。

DtRatingView

构造方法中主要实现了参数的初始化。

public DtRatingBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DtRatingBar);

        mRating = typedArray.getFloat(R.styleable.DtRatingBar_rating_check, 0f);
        mStars = typedArray.getInt(R.styleable.DtRatingBar_rating_sum, 5);

        mSupportHalf = typedArray.getBoolean(R.styleable.DtRatingBar_rating_support_half, true);
        mRating = getRatingValue(mRating);

        int childViewWidth = typedArray.getInt(R.styleable.DtRatingBar_rating_width, 12);
        int childViewHeight = typedArray.getInt(R.styleable.DtRatingBar_rating_height, 12);

        int childViewPaddingLeft = typedArray.getInt(R.styleable.DtRatingBar_rating_padding_left, 2);
        int childViewPaddingRight = typedArray.getInt(R.styleable.DtRatingBar_rating_padding_right, 2);
        int childViewPaddingTop = typedArray.getInt(R.styleable.DtRatingBar_rating_padding_top, 0);
        int childViewPaddingBottom = typedArray.getInt(R.styleable.DtRatingBar_rating_padding_bottom, 0);

        int childViewStarImg = typedArray.getResourceId(R.styleable.DtRatingBar_rating_star_img, R.drawable.ic_star);
        int childViewHalfStarImg = typedArray.getResourceId(R.styleable.DtRatingBar_rating_half_star_img, R.drawable.ic_half_star);
        int childViewUnStarImg = typedArray.getResourceId(R.styleable.DtRatingBar_rating_un_star_img, R.drawable.ic_un_star);

        mBuilder = new RatingView.Builder()
                .context(mContext)
                .width(childViewWidth)
                .height(childViewHeight)
                .paddingLeft(childViewPaddingLeft)
                .paddingRight(childViewPaddingRight)
                .paddingBottom(childViewPaddingBottom)
                .paddingTop(childViewPaddingTop)
                .star(childViewStarImg)
                .halfStar(childViewHalfStarImg)
                .unStar(childViewUnStarImg);
        typedArray.recycle();
        setEnabled(false);// 默认不让滑动
        initView();
    }

实现一个评分改变的回调接口

public interface OnRatingChangeListener {

        /**
         * on rating change
         *
         * @param rating rating
         * @param stars  stars sum
         */
        void onChange(float rating, int stars);
    }

对触摸事件的处理，复写onTouchEvent方法

@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (isEnabled()) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    performClick();
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    break;
                default:
                    break;
            }
            // 布局方向的判断，如果是水平方向的，判断x
            if (getOrientation() == LinearLayout.HORIZONTAL) {
                int width = getWidth();
                float x = event.getX();
                // 对x的大小限制，最大为view的宽度，最小为0
                x = x > width ? width : x;
                x = x < 0 ? 0 : x;

                mRating = x / mChildWidth;
            } else {
                // 垂直方向，判断y
                int height = getHeight();
                float y = event.getY();
                y = y > height ? height : y;
                y = y < 0 ? 0 : y;
                mRating = y / mChildHeight;
            }
            // 得分的转换，因为我们只需要两位数的精确度，而且需要判断是否支持半星
            mRating = getRatingValue(mRating);
            if (mOnRatingChangeListener != null) {
                mOnRatingChangeListener.onChange(mRating, mStars);
            }
            updateView();
            return true;
        } else {
            return false;
        }
    }

对评分精度的转换

private float getRatingValue(float rating) {
        // half
        int half = RATE / 2;
        rating = rating * RATE;
        int xx = (int) (rating % RATE);
        int yy = (int) (rating / RATE);

        if (xx > 0) {
            if (mSupportHalf) {
                // support half
                if (xx <= half) {
                    // <= half ,  plus 0.5
                    rating = (float) (yy + 0.5);
                } else {
                    // > half , plus 1
                    rating = yy + 1;
                }
            } else {
                // if not support half ,plus 1
                rating = yy + 1;
            }
        } else {
            rating = yy;
        }
        return rating;
    }

RatingView

这里我们所设置的大小，包括宽高和padding，都是像素px，而不是dp。因为我们得到的设计稿一般标注都为px。这里的转换，我们需要转两次而不是一次。因为第一次是px转dp，这应该是设计稿对应的dp值，第二次是转换，从dp转px才是我们需要的px值。

• 状态
  一共分成了三种状态：

    private static final int STATE_UN_STAR = 0;// 没星
    private static final int STATE_HALF_STAR = 1;// 半星
    private static final int STATE_STAR = 2;// 一星

• 获得状态

    /**
     * @param position position
     * @param rating   rating
     * @return status
     * {@link #STATE_STAR,#STATE_HALF_STAR,#STATE_UN_STAR}
     */
    private int getState(int position, float rating) {
        position++;
        float dis = rating - position;
        if (dis >= 0) {
            return STATE_STAR;
        } else {
            if (dis >= -0.5) {
                return STATE_HALF_STAR;
            } else {
                return STATE_UN_STAR;
            }
        }
    }

• 根据状态，获取对应的图片

/**
     * get status
     *
     * @param position position
     * @param rating   rating
     * @return image id
     */
    private int getImageRes(int position, float rating) {
        int id = R.drawable.ic_un_star;
        switch (getState(position, rating)) {
            case STATE_UN_STAR:
                id = getUnStarImageId();
                break;
            case STATE_HALF_STAR:
                id = getHalfStarImageId();
                break;
            case STATE_STAR:
                id = getStarImageId();
                break;
            default:
                break;
        }
        return id;
    }

FINAL

至此大概的流程就写完了整个DtRatingView的过程。其实并不复杂，只是在写的过程中，可以学习到很多东西。毕竟自己动手后得到了一些成果。