Android自定义View,评分星星控件(RatingBar)

一、先看一下效果图

半个星星的资源图片是随便找的,别在意这些小东西


事例图
系统方法去实现(UI配合, 三步搞定,建议使用系统,星星间隙用透明度去控制):
    <!--1. 配置文件-->
    <RatingBar
            android:id="@+id/rb_appraise"
            style="@style/App_RatingBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isIndicator="true"
            android:minWidth="12dp"
            android:minHeight="12dp"
            android:numStars="5"
            android:rating="0.0"
            android:stepSize="0.1" />
            
    <!--2. 主题样式-->  
    <style name="App_RatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/app_rating_stars</item>
        <item name="android:gravity">center</item>
    </style>
    
    <!--3. drawable样式-->    
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--drawable 用UI给的切图-->

    <!--默认样式-->
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/ic_app_comm_star_nor" />
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/ic_app_comm_star_nor" />
    <!--进度样式-->
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/ic_app_comm_star_sel" />
    </layer-list>
二、为什么要自定义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就好。还有其它的,自己稍作调整。
  • 只供学习,如果效果不好,还是叫UI切图用系统的去实现。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容