先看效果图:
评分.gif
在我们画这个控件之前，我们想想一下怎么实现这个，显示对星星的处理，我们是自己绘制还是使用图片？其实都是可以的，但是我们为了更加快速的完成这个，我们选择了使用图片来完成。先自定义属性，在这个例子中我定义如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RatingBar">
<!--未选中引用-->
<attr name="starNormal" format="reference" />
<!--选中引用-->
<attr name="starFocus" format="reference" />
<!--最大的分数-->
<attr name="gradeNumber" format="integer" />
<!--当前的分数-->
<attr name="currentGrade" format="integer" />
<!--星星之间的间距-->
<attr name="statPadding" format="dimension" />
</declare-styleable>
</resources>
我们在初始化的时候获取相关数据:
private Bitmap mStarFocusBitmap, mStarNormalBitmap;
private int mGradeNumber;//最大分数
private int mCurrentGrade;//当前分数 1开始的 最少为1分
private int mStarPadding;//间距
public RatingBar(Context context) {
this(context, null);
}
public RatingBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
int starNormalId = array.getResourceId(R.styleable.RatingBar_starNormal, 0);
if (starNormalId == 0) {
throw new RuntimeException("请设置属性 starNormal ");
}
mStarNormalBitmap = BitmapFactory.decodeResource(getResources(), starNormalId);
int starFocusId = array.getResourceId(R.styleable.RatingBar_starFocus, 0);
if (starFocusId == 0) {
throw new RuntimeException("请设置属性 starFocus ");
}
mStarFocusBitmap = BitmapFactory.decodeResource(getResources(), starFocusId);
mGradeNumber = array.getInt(R.styleable.RatingBar_gradeNumber, 0);
mStarPadding = array.getDimensionPixelOffset(R.styleable.RatingBar_statPadding, DisplayUtil.dip2px(context, 5));
mCurrentGrade = array.getInt(R.styleable.RatingBar_currentGrade, 1);
array.recycle();
}
}
接下来我们设置宽高，本例中就直接写了，在实际开发中如有需要在修改
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 高度 一张图片的高度
int height = mStarFocusBitmap.getHeight() + getPaddingTop() + getPaddingBottom();
int width = mStarFocusBitmap.getWidth() * mGradeNumber
+ getPaddingLeft() + getPaddingRight()
+ mStarPadding * (mGradeNumber - 1);
setMeasuredDimension(width, height);
}
接下来调用onDraw函数绘制:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < mGradeNumber; i++) {
if (i < mCurrentGrade) {
canvas.drawBitmap(mStarFocusBitmap,
getPaddingLeft() + i * mStarFocusBitmap.getWidth() + i * mStarPadding, getPaddingTop(), null);
} else {
canvas.drawBitmap(mStarNormalBitmap,
getPaddingLeft() + i * mStarFocusBitmap.getWidth() + i * mStarPadding, getPaddingTop(), null);
}
}
}
我们进行测试:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.zzw.customview.view.RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:currentGrade="2"
app:gradeNumber="5"
app:statPadding="10dp"
app:starFocus="@mipmap/star_selected"
app:starNormal="@mipmap/star_normal"
/>
</RelativeLayout>
效果图如下：
这时候只是一个静态的，点击的时候并没有变化，我们接下来进行onTouchEvent监听，然后进行改变值重绘:
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
//计算下标
int pos = (int) (x / (mStarFocusBitmap.getWidth() + mStarPadding));
if (pos < 0) pos = 0;
if (pos >= mGradeNumber) pos = mGradeNumber - 1;
mCurrentGrade = pos + 1;
invalidate();
break;
}
return true;
}
我们为什么要加1呢？因为我们mCurrentGrade表示的是评分的分数，所以用下标加1，这个时候我们效果就达到了，但是我们不要忘记优化。
因为我们返回了true,所以在滑动的时候一直接受到move的事件，就一直进行调用了invalidate重绘 ，我们上次也说过invalidate会做很多事情，所以我们就要减少重绘的此时，我们应该加上判断：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
//计算下标
int pos = (int) (x / (mStarFocusBitmap.getWidth() + mStarPadding));
if (pos < 0) pos = 0;
if (pos >= mGradeNumber) pos = mGradeNumber - 1;
if (pos != mCurrentGrade - 1) {//分数-1 等于 坐标pos
mCurrentGrade = pos + 1;
invalidate();
}
break;
}
return true;
}
这样的画就优雅了很多，当然也不要忘记bitmap的回收，我们将暴露出函数来给使用者在activity的onDestory生命周期调用。
/**
* 回收
*/
public void recycle() {
if (mStarFocusBitmap != null)
mStarFocusBitmap.recycle();
if (mStarNormalBitmap != null)
mStarNormalBitmap.recycle();
mStarFocusBitmap=null;
mStarNormalBitmap=null;
}
在activity里面调用:
@Override
protected void onDestroy() {
super.onDestroy();
mRatingBar.recycle();
}
这样的话对于强迫症患者心里就舒坦多了。当然，我也是一个强迫症换患者。但是有时候我们也不能一定要追求极致，比如在获取位置的时候，我有一个想法，就是根据星星的范围精确的获取当前的位置,比如下面这样:
当时我就写了一个小算法：
/**
* 计算位置
*
* @param x
* @return
*/
private int comPos(float x) {
int startX = getPaddingLeft();
if (x < startX) {
return 0;
}
if (x > getWidth() - getPaddingRight()) {
return mGradeNumber;
}
int pos = 0;
for (int i = 0; i < mGradeNumber; i++) {
int endX;
if (i == 0 || i == mGradeNumber - 1) {//第0个位置的后面的x
endX = startX + mStarFocusBitmap.getWidth() + mStarPadding / 2;
} else {
endX = startX + mStarFocusBitmap.getWidth() + mStarPadding;
}
if (x < endX) {
pos = i;
break;
}
startX = endX;
}
return pos;
}
这样的画就能够准确的拿到星星的位置，但是这样的弊端就是一个for循环，将会耗费更多的时间，所以最后还是改为了一个模糊的计算位置的方式。所以有时候也不能太强迫自己，不要钻牛角尖。
这篇文章结束了，希望对大家有所帮助!
