一、先看一下效果图
半个星星的资源图片是随便找的，别在意这些小东西
事例图
二、为什么要自定义RatingBar
系统的RatingBar功能挺全，但有几个缺陷：
1. 星星与星星之间的间距没办法控制
2. 星星的大小很难控制
3. 系统的样式一般都不符合自己App的UI样式
三、自定义View的一般套路
1. 自定义属性
2. 测量控件的宽高
3. 摆放控件的位置
4. 绘制控件
5. 用户交互（事件处理）
四、分析平时开发用到的RatingBar的特有属性
1. 星星的状态：未选中、选中半个、选中全部，一般都是由UI提供切图
2. 星星选中的数量（可能是半个）
3. 星星的总个数
4. 星星与星星之间的间距
5. 星星的大小
五、自定义RatingBar属性
按上面分析定义出RatingBar的属性
<declare-styleable name="RatingBar">
<!--未选中-->
<attr name="starEmptyRes" format="reference" />
<!--选中半个-->
<attr name="starHalfRes" format="reference" />
<!--选中全部-->
<attr name="starSelectedRes" format="reference" />
<!--星星的总数-->
<attr name="startTotalNumber" format="integer" />
<!--默认选中的数量 -->
<attr name="selectedNumber" format="float" />
<!--星星的间距-->
<attr name="starDistance" format="dimension" />
<!--星星的宽度-->
<attr name="starWidth" format="dimension" />
<!--星星的高度-->
<attr name="starHeight" format="dimension" />
<!--是不是只画整个星星，不画半个-->
<attr name="starIsFull" format="boolean" />
</declare-styleable>
六、创建自定义RatingBar View，并找到自定义属性
public class RatingBar extends View {
// 正常、半个和选中的星星
private Bitmap mStarNormal, mStarHalf, mStarSelected;
//星星的总数
private int mStartTotalNumber = 5;
//选中的星星个数
private float mSelectedNumber;
// 星星之间的间距
private int mStartDistance;
// 是否画满
private Status mStatus = Status.FULL;
// 星星的宽高
private float mStarWidth;
private float mStarHeight;
// 星星选择变化的回调
private OnStarChangeListener mOnStarChangeListener;
// 是不是要画满,默认不画半个的
private boolean isFull;
// 画笔
private Paint mPaint = new Paint();
// 用于判断是绘制半个，还是全部
private enum Status {
FULL, HALF
}
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_starEmptyRes, 0);
if (starNormalId == 0) {
throw new IllegalArgumentException("请设置属性 starNormal");
}
mStarNormal = BitmapFactory.decodeResource(getResources(), starNormalId);
// 选中一半的图片资源
int starHalfId = array.getResourceId(R.styleable.RatingBar_starHalfRes, 0);
if (starHalfId != 0) {
mStarHalf = BitmapFactory.decodeResource(getResources(), starHalfId);
}
// 选中全部的图片资源
int starSelectedId = array.getResourceId(R.styleable.RatingBar_starSelectedRes, 0);
if (starSelectedId == 0) {
throw new IllegalArgumentException("请设置属性 starSelected");
}
mStarSelected = BitmapFactory.decodeResource(getResources(), starSelectedId);
// 如果没设置一半的图片资源，就用全部的代替
if (starHalfId == 0) {
mStarHalf = mStarSelected;
}
mStartTotalNumber = array.getInt(R.styleable.RatingBar_startTotalNumber, mStartTotalNumber);
mSelectedNumber = array.getFloat(R.styleable.RatingBar_selectedNumber, mSelectedNumber);
mStartDistance = (int) array.getDimension(R.styleable.RatingBar_starDistance, 0);
mStarWidth = array.getDimension(R.styleable.RatingBar_starWidth, 0);
mStarHeight = array.getDimension(R.styleable.RatingBar_starHeight, 0);
isFull = array.getBoolean(R.styleable.RatingBar_starIsFull, true);
array.recycle();
// 如有指定宽高，获取最大值 去改变星星的大小（星星是正方形）
int starWidth = (int) Math.max(mStarWidth, mStarHeight);
if (starWidth > 0) {
mStarNormal = resetBitmap(mStarNormal, starWidth);
mStarSelected = resetBitmap(mStarSelected, starWidth);
mStarHalf = resetBitmap(mStarHalf, starWidth);
}
// 计算一半还是全部（小数部分小于等于0.5就只是显示一半）
if (!isFull) {
int num = (int) mSelectedNumber;
if (mSelectedNumber <= (num + 0.5f)) {
mStatus = Status.HALF;
}
}
}
/**
* 如果用户设置了图片的宽高，就重新设置图片
*/
public Bitmap resetBitmap(Bitmap bitMap, int startWidth) {
// 得到新的图片
return Bitmap.createScaledBitmap(bitMap, startWidth, startWidth, true);
}
/**
* 设置选中星星的数量
*/
public void setSelectedNumber(int selectedNumber) {
if (selectedNumber >= 0 && selectedNumber <= mStartTotalNumber) {
this.mSelectedNumber = selectedNumber;
invalidate();
}
}
/**
* 设置星星的总数量
*/
public void setStartTotalNumber(int startTotalNumber) {
if (startTotalNumber > 0) {
this.mStartTotalNumber = startTotalNumber;
invalidate();
}
}
}
七、测量控件的宽高（onMeasure）
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 用正常的一个星星图片去测量高
int height = getPaddingTop() + getPaddingBottom() + mStarNormal.getHeight();
// 宽 = 星星的宽度*总数 + 星星的间距*（总数-1） +padding
int width = getPaddingLeft() + getPaddingRight() + mStarNormal.getWidth() * mStartTotalNumber + mStartDistance * (mStartTotalNumber - 1);
setMeasuredDimension(width, height);
}
七、绘制控件RatingBar（onDraw）
@Override
protected void onDraw(Canvas canvas) {
// 循环绘制
for (int i = 0; i < mStartTotalNumber; i++) {
float left = getPaddingLeft();
// 从第二个星星开始，给它设置星星的间距
if (i > 0) {
left = getPaddingLeft() + i * (mStarNormal.getWidth() + mStartDistance);
}
float top = getPaddingTop();
// 绘制选中的星星
if (i < mSelectedNumber) {
// 比当前选中的数量小
if (i < mSelectedNumber - 1) {
canvas.drawBitmap(mStarSelected, left, top, mPaint);
} else {
// 在这里判断是不是要绘制满的
if (mStatus == Status.FULL) {
canvas.drawBitmap(mStarSelected, left, top, mPaint);
} else {
canvas.drawBitmap(mStarHalf, left, top, mPaint);
}
}
} else {
// 绘制正常的星星
canvas.drawBitmap(mStarNormal, left, top, mPaint);
}
}
}
八、用户交互，也就是复写触摸事件(onTouchEvent)
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
//减少绘制
case MotionEvent.ACTION_MOVE:
// 获取用户触摸的x位置
float x = event.getX();
// 一个星星占的宽度
int startWidth = getWidth() / mStartTotalNumber;
// 计算用户触摸星星的位置
int position = (int) (x / startWidth + 1);
if (position < 0) {
position = 0;
}
if (position > mStartTotalNumber) {
position = mStartTotalNumber;
}
// 计算绘制的星星是不是满的
float result = x - startWidth * (position - 1);
Status status;
// 结果大于一半就是满的
if (result > startWidth * 0.5f) {
// 满的
status = Status.FULL;
} else {
// 一半的
status = Status.HALF;
}
if (isFull) {
status = Status.FULL;
}
//减少绘制
if (mSelectedNumber != position || status != mStatus) {
mSelectedNumber = position;
mStatus = status;
invalidate();
if (mOnStarChangeListener != null) {
position = (int) (mSelectedNumber - 1);
// 选中的数量：满的就回调（1.0这种），一半就（0.5这种）
float selectedNumber = status == Status.FULL ? mSelectedNumber
: (mSelectedNumber - 0.5f);
mOnStarChangeListener.OnStarChanged(selectedNumber,
position < 0 ? 0 : position);
}
}
break;
}
return true;
}
// 回调监听（选中的数量，位置）
public interface OnStarChangeListener {
void OnStarChanged(float selectedNumber, int position);
}
九、实际使用
public class RatingBarActivity extends AppCompatActivity {
private RatingBar mRatingBar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ratingbar);
mRatingBar= (RatingBar) findViewById(R.id.rb);
mRatingBar.setOnStarChangeListener(new RatingBar.OnStarChangeListener() {
@Override
public void OnStarChanged(float selectedNumber, int position) {
// TODO 做相应的业务操作
}
});
}
}
// R.layout.activity_ratingbar 布局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<cn.carhouse.viewdemo.view.RatingBar
android:id="@+id/rb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:selectedNumber="2.5"
app:starDistance="12dp"
app:starEmptyRes="@mipmap/star_normal"
app:starHalfRes="@mipmap/star_half"
app:starIsFull="false"
app:starSelectedRes="@mipmap/star_selected" />
</FrameLayout>
***星星大小控制：starHeight或者starWidth任意一个属性就好。
***默认不画半个星星，要画半个星星：starIsFull="false"。
效果图如上，到此只要改变UI切出来的星星图片，就满足UI做出来的效果和业务的需求了。其它特殊的我没想到，你们也可以去改改就好。如果只是显示，就设置enable属性为false就好。还有其它的，自己稍作调整。代码全部在这里，不收积分，不收钱，乐意就点个赞。
网友评论