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形式配置

android:id="@+id/rating_bar_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:rating_check="3.5"

app:rating_half_star_img="@drawable/ic_half_star"

app:rating_height="20"

app:rating_padding_bottom="2"

app:rating_padding_left="2"

app:rating_padding_right="2"

app:rating_padding_top="2"

app:rating_star_img="@drawable/ic_star"

app:rating_support_half="false"

app:rating_un_star_img="@drawable/ic_un_star"

app:rating_width="20" />

通过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的过程。其实并不复杂，只是在写的过程中，可以学习到很多东西。毕竟自己动手后得到了一些成果。