Android 自定義五星評(píng)分控件

先看效果圖:


錄屏.gif

android 現(xiàn)在已經(jīng)自帶RateingBar,當(dāng)然原生會(huì)更好些,這里算是拋磚引玉吧。希望對(duì)學(xué)習(xí)自定義控件的小伙伴有點(diǎn)幫助。
一 自定義屬性
這里需要三個(gè)屬性
...
<?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>
...
默認(rèn)星星圖片和選中后的星星圖片以及星星數(shù)量

二 新建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("屬性設(shè)置=0");//如果沒有設(shè)置圖片拋出一個(gè)運(yùn)行時(shí)異常

    int iconNormalid=typedValue.getResourceId(R.styleable.RatingBar_iconNormal,0);
    if(iconNormalid==0)throw new RuntimeException("屬性設(shè)置=0");
  //通過resource 解析達(dá)到圖片的bitmap
    bitmapSelect=BitmapFactory.decodeResource(context.getResources(),iconSelectId);
    bitmapNormal=BitmapFactory.decodeResource(getResources(),iconNormalid);
    //得到星星數(shù)量屬性
    starNumber=typedValue.getInteger(R.styleable.RatingBar_iconNumber,starNumber);
    typedValue.recycle();

...
上面有個(gè)問題困擾我,一直沒搞懂,如果有了解的可以指點(diǎn)下。問題如下:
我先是把兩個(gè)星星圖片放到了mipmap里面,然后通過上面的代碼拿到bitmap,但是這時(shí)的bitmap.getWidth()返回值是0,這樣就沒法畫出星星。我嘗試了好多方法,最后還是把兩個(gè)圖片放到drawable文件夾下才可以。why?
2.onMeasure

...
int widthSize=bitmapSelect.getWidth()starNumber+getPaddingRight()(starNumber-1);
int heightSize=bitmapSelect.getHeight();
setMeasuredDimension(widthSize,heightSize);
...
如果不加padding,星星就會(huì)連到一起,所以加上paddingRight,高度就是bitmap圖片的高度。
3.onDraw
...
for (int i = 0; i <starNumber ; i++) {
//坐標(biāo)x=圖片的寬度+paddingRight,有幾個(gè)圖片就乘上幾
float x=bitmapNormal.getWidth() * i+getPaddingRight()*i;
if(mCurrentX>i)//mCurrent 代表當(dāng)前黃色星星在哪個(gè)位置上
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 在第幾個(gè)星星的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 數(shù)量
 */
private int starNumber=5;
/**
 * 當(dāng)前手指所在的位置是第幾個(gè)星星的位置
 */
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("屬性設(shè)置=0");

    int iconNormalid=typedValue.getResourceId(R.styleable.RatingBar_iconNormal,0);
    if(iconNormalid==0)throw new RuntimeException("屬性設(shè)置=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++) {
            //坐標(biāo)x=圖片的寬度+paddingRight,有幾個(gè)圖片就乘上幾
            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;
}

}

...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容