自定义RatingBar

来源：互联网发布：淘宝拉夏贝尔代购编辑：程序博客网时间：2024/05/22 01:48

RatingBar是基于SeekBar和ProgressBar的扩展，用星型来显示等级评定。使用RatingBar的默认大小时，用户可以触摸/拖动或使用键来设置评分，它有两种样式(小风格用ratingBarStyleSmall，大风格用ratingBarStyleIndicator)，其中大的只适合指示，不适合于用户交互。使用过RatingBar的人都知道谷歌提供的这个控件有点过于古板了，自己定义的图片只能半个或者一个显示，并不能达到如4.1个的效果（可能是本人研究不够深入），下面是我自己定义的RatingBar，可以自己定义属性，设置星星图片，间距等。如下图

这里写图片描述

至于其他的功能嘛，是尽量跟着原生的RatingBar来写的，下面是自定义的代码：

public class HaisRatingBar extends View {    /**     * 正常的     */    private static final int NORMAL = 0;    /**     * 小型的     */    private static final int SAMLL = 1;    /**     * 背景图片     */    private Bitmap backgroundImg;    /**     * 显示点亮的星星     */    private Bitmap starLightImg;    /**     * 星星总数     */    private int starNums = 6;    /**     * 选中的数量     */    private float rating = 0;    /**     * 每个星星间隔距离     * 单位：px     */    private int space;    /**     * 是否只是指示器     */    private boolean mIndicator;    /**     * 类型（即大图还是小图）     */    private int type;    /**     * 背景图片宽度     */    private int bgWidth;    /**     * 背景图片高度     */    private int bgHeight;    /**     * 绘制 X方向的开始位置     */    private int drawStartX;    public interface OnRatingBarChangeListener {        void onRatingChanged(HaisRatingBar ratingBar, float rating, boolean fromUser);    }    private OnRatingBarChangeListener mOnRatingBarChangeListener;    public HaisRatingBar(Context context) {        this(context, null);    }    public HaisRatingBar(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public HaisRatingBar(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HaisRatingBar, defStyleAttr, 0);        final boolean indicator = a.getBoolean(R.styleable.HaisRatingBar_indicator, false);        final float rating = a.getFloat(R.styleable.HaisRatingBar_rating, 0);        final int type = a.getInt(R.styleable.HaisRatingBar_type, NORMAL);        final int statNums = a.getInt(R.styleable.HaisRatingBar_numStars, 5);        final int space = a.getInt(R.styleable.HaisRatingBar_starSpace, 3);        final int background = a.getResourceId(R.styleable.HaisRatingBar_starBackground, 0);        final int startLight = a.getResourceId(R.styleable.HaisRatingBar_starLight, 0);        a.recycle();        //初始化数据        setIndicator(indicator);        setRating(rating);        setType(type);        setStarNums(statNums);        setSpace(dpToPx(context, space));        Resources res = getResources();        if (background != 0 && startLight != 0) {//为了防止出现不良效果，背景和指示星星需要一起设置才起作用.否则使用默认            this.backgroundImg = BitmapFactory.decodeResource(res, background);            this.starLightImg = BitmapFactory.decodeResource(res, startLight);        } else {            init(res);        }        bgWidth = backgroundImg.getWidth();        bgHeight = backgroundImg.getHeight();    }    private void init(Resources res) {        //设置资源图片        if (type == SAMLL) {            backgroundImg = BitmapFactory.decodeResource(res, R.drawable.star_samll_darkl);            starLightImg = BitmapFactory.decodeResource(res, R.drawable.star_small_light);        } else {            backgroundImg = BitmapFactory.decodeResource(res, R.drawable.star_normal_dark);            starLightImg = BitmapFactory.decodeResource(res, R.drawable.star_normal_light);        }    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if (backgroundImg != null) {            final int width = (bgWidth + space) * starNums;            final int height = bgHeight;            int w = resolveSizeAndState(width, widthMeasureSpec, 0);            int h = resolveSizeAndState(height, heightMeasureSpec, 0);            setMeasuredDimension(w, h);        }    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        for (int i = 0; i < starNums; i++) {            float remainNums = rating - i;            //每个星星开始绘制的位置            drawStartX = (bgWidth + space) * i;            if ((i + 1) < rating) {//当前画的星星是否在被选中的范围内,在则画亮的星星                canvas.drawBitmap(starLightImg, drawStartX, 0, null);            } else {                if (remainNums > 0 && remainNums <= 1) {//画完后剩余半个不足一个的                    //目标图片的宽和高                    int ratingWidth = starLightImg.getWidth();                    int ratingHeight = starLightImg.getHeight();                    //需要画的宽度                    int tw = (int) (ratingWidth * remainNums);                    //需要补充的背景                    int bgw = ratingWidth - tw;                    if (tw > 0) {//绘制选中的部分                        Bitmap b = Bitmap.createBitmap(starLightImg, 0, 0, tw, ratingHeight);                        canvas.drawBitmap(b, drawStartX, 0, null);                    }                    if (bgw > 0) {//绘制背景                        Bitmap b = Bitmap.createBitmap(backgroundImg, tw, 0, bgw, ratingHeight);                        canvas.drawBitmap(b, drawStartX + tw, 0, null);                    }                } else {//如果还有需要画的背景继续画                    canvas.drawBitmap(backgroundImg, drawStartX, 0, null);                }            }        }    }    @Override    public boolean onTouchEvent(MotionEvent event) {//对手势做出监听        if (isIndicator())//如果是指示器，则不对点击做出响应            return false;        //获取手势动作        int action = event.getAction();        switch (action) {            case MotionEvent.ACTION_DOWN:                break;            case MotionEvent.ACTION_UP:            case MotionEvent.ACTION_MOVE:                //获取当前触点的位置                int positon = (int) getRelativePosition(event.getX());                //得到当前的星星数量                int start = positon + 1;                //改变显示                if (start != rating) {                    setRating(start, true);                }                break;            default:                break;        }        return true;    }    private float getRelativePosition(float x) {        float position = x / (bgWidth + space);        position = Math.max(position, 0);        return Math.min(position, starNums - 1);    }    void setRating(float rating, boolean fromUser) {        if (rating > starNums) {            this.rating = starNums;        }        this.rating = rating;        invalidate();        dispatchRatingChange(fromUser);    }    /**     * @param listener     */    public void setOnRatingBarChangeListener(OnRatingBarChangeListener listener) {        mOnRatingBarChangeListener = listener;    }    /**     * @return     */    public OnRatingBarChangeListener getOnRatingBarChangeListener() {        return mOnRatingBarChangeListener;    }    void dispatchRatingChange(boolean fromUser) {        if (mOnRatingBarChangeListener != null) {            mOnRatingBarChangeListener.onRatingChanged(this, getRating(), fromUser);        }    }    public void setStarNums(int startNums) {        this.starNums = startNums;    }    public float getRating() {        return rating;    }    public void setRating(float rating) {        setRating(rating, false);    }    public boolean isIndicator() {        return mIndicator;    }    public void setIndicator(boolean mIndicator) {        this.mIndicator = mIndicator;    }    public void setType(int type) {        this.type = type;    }    public void setSpace(int space) {        this.space = space;    }    /**     * dp-->px     *     * @param context     * @param dp     * @return     */    private int dpToPx(Context context, int dp) {        return (int) (context.getResources().getDisplayMetrics().density * dp + 0.5f);    }}

自定义属性aatr.xml，可以根据需要添加

<resources>    <declare-styleable name="HaisRatingBar">        <attr name="indicator" format="boolean" />        <attr name="rating" format="float" />        <attr name="numStars" format="integer" />        <attr name="starSpace" format="integer" />        <attr name="type" format="enum">            <enum name="normal" value="0" />            <enum name="small" value="1" />        </attr>        <attr name="starBackground" format="reference" />        <attr name="starLight" format="reference" />    </declare-styleable></resources>

是不是感觉很简单呢？下面在activity中直接引用即可。

public class MainActivity extends Activity {    private HaisRatingBar rating1;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        rating1 = (HaisRatingBar) findViewById(R.id.rating_main_01);        rating1.setRating(3.6f);    }}

简单的记录一下，为了以后学习方便，还有很多不足，希望聪明的你帮我指出。代码上传了还没显示出来，迟点把代码链接补上！

0 0