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