先看效果图:
android 现在已经自带RateingBar,当然原生会更好些，这里算是抛砖引玉吧。希望对学习自定义控件的小伙伴有点帮助。
一 自定义属性
这里需要三个属性
...
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RatingBar">
<attr name="iconNormal" format="reference"/>
<attr name="iconSelect" format="reference"/>
<attr name="iconNumber" format="integer"/>
</declare-styleable>
</resources>
...
默认星星图片和选中后的星星图片以及星星数量
二 新建RatingBar类
1,get 属性
...
TypedArray typedValue=context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
//首先拿到图片属性的resourceId
int iconSelectId= typedValue.getResourceId(R.styleable.RatingBar_iconSelect,0);
if(iconSelectId==0) throw new RuntimeException("属性设置=0");//如果没有设置图片抛出一个运行时异常
int iconNormalid=typedValue.getResourceId(R.styleable.RatingBar_iconNormal,0);
if(iconNormalid==0)throw new RuntimeException("属性设置=0");
//通过resource 解析达到图片的bitmap
bitmapSelect=BitmapFactory.decodeResource(context.getResources(),iconSelectId);
bitmapNormal=BitmapFactory.decodeResource(getResources(),iconNormalid);
//得到星星数量属性
starNumber=typedValue.getInteger(R.styleable.RatingBar_iconNumber,starNumber);
typedValue.recycle();
...
上面有个问题困扰我，一直没搞懂，如果有了解的可以指点下。问题如下：
我先是把两个星星图片放到了mipmap里面，然后通过上面的代码拿到bitmap，但是这时的bitmap.getWidth()返回值是0，这样就没法画出星星。我尝试了好多方法，最后还是把两个图片放到drawable文件夹下才可以。why?
2.onMeasure
...
int widthSize=bitmapSelect.getWidth()starNumber+getPaddingRight()(starNumber-1);
int heightSize=bitmapSelect.getHeight();
setMeasuredDimension(widthSize,heightSize);
...
如果不加padding，星星就会连到一起，所以加上paddingRight，高度就是bitmap图片的高度。
3.onDraw
...
for (int i = 0; i <starNumber ; i++) {
//坐标x=图片的宽度+paddingRight，有几个图片就乘上几
float x=bitmapNormal.getWidth() * i+getPaddingRight()*i;
if(mCurrentX>i)//mCurrent 代表当前黄色星星在哪个位置上
canvas.drawBitmap(bitmapSelect, x, 0, null);
else
canvas.drawBitmap(bitmapNormal, x, 0, null);
}
..
4 onTouch
...
case DOWN
case MOVE
float x=getx()/(bitmap.width()+getPaddingRight());//finger down 在第几个星星的x位置
if(x==mCurrentx)return true;
mCurrentx=x;
invalidate();
三 使用
...
<com.ui.main.RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
app:iconNormal="@drawable/starnormal"
app:iconNumber="5"
app:iconSelect="@drawable/starselected" />
...
...
四 源码
...
public class RatingBar extends View {
final String TAG="RatingBarTAG";
/**
* 需要解析的图片
*/
private Bitmap bitmapNormal,bitmapSelect;
/**
* star 数量
*/
private int starNumber=5;
/**
* 当前手指所在的位置是第几个星星的位置
*/
private float mCurrentX=0f;
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 typedValue=context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
int iconSelectId= typedValue.getResourceId(R.styleable.RatingBar_iconSelect,0);
if(iconSelectId==0) throw new RuntimeException("属性设置=0");
int iconNormalid=typedValue.getResourceId(R.styleable.RatingBar_iconNormal,0);
if(iconNormalid==0)throw new RuntimeException("属性设置=0");
bitmapSelect=BitmapFactory.decodeResource(context.getResources(),iconSelectId);
bitmapNormal=BitmapFactory.decodeResource(getResources(),iconNormalid);
starNumber=typedValue.getInteger(R.styleable.RatingBar_iconNumber,starNumber);
typedValue.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize=bitmapSelect.getWidth()*starNumber+getPaddingRight()*(starNumber-1);
int heightSize=bitmapSelect.getHeight();
setMeasuredDimension(widthSize,heightSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i <starNumber ; i++) {
//坐标x=图片的宽度+paddingRight，有几个图片就乘上几
float x=bitmapNormal.getWidth() * i+getPaddingRight()*i;
if(mCurrentX>i)
canvas.drawBitmap(bitmapSelect, x, 0, null);
else
canvas.drawBitmap(bitmapNormal, x, 0, null);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
float x= event.getX()/(bitmapSelect.getWidth()+getPaddingRight());
if(x==mCurrentX){
return true;
}
mCurrentX=x;
invalidate();
break;
}
return true;
}
}
...
