自定义RatingBar

于 2019-06-28 16:04:03 发布
阅读量350 收藏 2
点赞数
分类专栏： 积累 文章标签： RatingBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40970620/article/details/94011112
版权

在这里插入图片描述
效果图是这样的，下面贴上代码

package com.example.airinstallation.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.example.airinstallation.R;

public class AirRatingBar extends View {
    private static final String TAG = "AirRatingBar";
    /**
     * 默认，半个，全部选中
     */
    private Bitmap mRatingNormal, mRatingHalf, mRatingSelected;
    /**
     * 总数
     */
    private int mRatingTotalNum = 5;
    /**
     * 选中的数量
     */
    private float mRatingSelectedNumber;
    /**
     * 是否画全部
     */
    private Status status = Status.FULL;
    /**
     * 是否画全部
     * true 画全部
     * false 画半个
     */
    private boolean isFull;
    /**
     * 状态变化监听
     */
    private OnStarChangeListener mOnStarChangeListener;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 间距
     */
    private int mRatingDistance;
    /**
     * 宽和高
     */
    private float mRatingWidth;
    private float mRatingHeight;

    public AirRatingBar(Context context) {
        this(context, null);
    }

    public AirRatingBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AirRatingBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
        initTypeArray(context, attrs);
    }

    /**
     * 画笔
     */
    private void initPaint() {
        mPaint = new Paint();
    }

    /**
     * 属性
     *
     * @param context
     * @param attrs
     */
    private void initTypeArray(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.AirRatingBar);

        // 未选中的图片资源
        int starNormalId = array.getResourceId(R.styleable.AirRatingBar_ratingDefault, 0);
        if (starNormalId == 0) {
            throw new IllegalArgumentException("请设置属性 starNormal");
        }
        mRatingNormal = getBitmap(context, starNormalId);
        Log.e(TAG, "AirRatingBar: " + starNormalId);
        Log.e(TAG, "AirRatingBar: " + mRatingNormal);
        // 选中一半的图片资源
        int starHalfId = array.getResourceId(R.styleable.AirRatingBar_ratingHalf, 0);
        if (starHalfId != 0) {
            mRatingHalf = getBitmap(context, starHalfId);
        }
        Log.e(TAG, "AirRatingBar: " + starHalfId);

        // 选中全部的图片资源
        int starSelectedId = array.getResourceId(R.styleable.AirRatingBar_ratingSelect, 0);
        if (starSelectedId == 0) {
            throw new IllegalArgumentException("请设置属性 starSelected");
        }
        mRatingSelected = getBitmap(context, starSelectedId);
        Log.e(TAG, "AirRatingBar: " + starSelectedId);
        Log.e(TAG, "AirRatingBar: " + mRatingSelected);
        // 如果没设置一半的图片资源，就用全部的代替
        if (starHalfId == 0) {
            mRatingHalf = mRatingSelected;
        }

        mRatingTotalNum = array.getInt(R.styleable.AirRatingBar_ratingTotalNum, mRatingTotalNum);
        mRatingSelectedNumber = array.getFloat(R.styleable.AirRatingBar_ratingDefaultSelectNum, mRatingSelectedNumber);
        mRatingDistance = (int) array.getDimension(R.styleable.AirRatingBar_ratingDistance, 0);
        mRatingWidth = array.getDimension(R.styleable.AirRatingBar_ratingWidth, 0);
        mRatingHeight = array.getDimension(R.styleable.AirRatingBar_ratingHeight, 0);
        isFull = array.getBoolean(R.styleable.AirRatingBar_ratingIsFull, true);
        array.recycle();

        // 如有指定宽高，获取最大值 去改变星星的大小（星星是正方形）
        int starWidth = (int) Math.max(mRatingWidth, mRatingHeight);
        if (starWidth > 0) {
            mRatingNormal = resetBitmap(mRatingNormal, starWidth);
            mRatingSelected = resetBitmap(mRatingSelected, starWidth);
            mRatingHalf = resetBitmap(mRatingHalf, starWidth);
        }

        // 计算一半还是全部（小数部分小于等于0.5就只是显示一半）
        if (!isFull) {
            int num = (int) mRatingSelectedNumber;
            if (mRatingSelectedNumber <= (num + 0.5f)) {
                status = Status.HALF;
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 循环绘制
        for (int i = 0; i < mRatingTotalNum; i++) {
            float left = getPaddingLeft();
            // 从第二个星星开始，给它设置星星的间距
            if (i > 0) {
                left = getPaddingLeft() + i * (mRatingNormal.getWidth() + mRatingDistance);
            }
            float top = getPaddingTop();
            // 绘制选中的星星
            if (i < mRatingSelectedNumber) {
                // 比当前选中的数量小
                if (i < mRatingSelectedNumber - 1) {
                    canvas.drawBitmap(mRatingSelected, left, top, mPaint);
                } else {
                    // 在这里判断是不是要绘制满的
                    if (status == Status.FULL) {
                        canvas.drawBitmap(mRatingSelected, left, top, mPaint);
                    } else {
                        canvas.drawBitmap(mRatingHalf, left, top, mPaint);
                    }
                }
            } else {
                // 绘制正常的星星
                canvas.drawBitmap(mRatingNormal, left, top, mPaint);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //减少绘制
        if (event.getAction() == MotionEvent.ACTION_MOVE) {
            // 获取用户触摸的x位置
            float x = event.getX();
            // 一个星星占的宽度
            int startWidth = getWidth() / mRatingTotalNum;
            // 计算用户触摸星星的位置
            int position = (int) (x / startWidth + 1);
            if (position < 0) {
                position = 0;
            }
            if (position > mRatingTotalNum) {
                position = mRatingTotalNum;
            }
            // 计算绘制的星星是不是满的
            float result = x - startWidth * (position - 1);
            Status statu;
            // 结果大于一半就是满的
            if (result > startWidth * 0.5f) {
                // 满的
                statu = Status.FULL;
            } else {
                // 一半的
                statu = Status.HALF;
            }
            if (isFull) {
                statu = Status.FULL;
            }
            //减少绘制
            if (mRatingSelectedNumber != position || statu != status) {
                mRatingSelectedNumber = position;
                status = statu;
                invalidate();
                if (mOnStarChangeListener != null) {
                    position = (int) (mRatingSelectedNumber - 1);
                    // 选中的数量：满的就回调（1.0这种），一半就（0.5这种）
                    float selectedNumber = status == Status.FULL ? mRatingSelectedNumber
                            : (mRatingSelectedNumber - 0.5f);
                    mOnStarChangeListener.OnStarChanged(selectedNumber,
                            position < 0 ? 0 : position);
                }
            }
        } else if (event.getAction() == MotionEvent.ACTION_DOWN) {
            // 获取用户触摸的x位置
            float x = event.getX();
            // 一个星星占的宽度
            int startWidth = getWidth() / mRatingTotalNum;
            // 计算用户触摸星星的位置
            int position = (int) (x / startWidth + 1);
            if (position < 0) {
                position = 0;
            }
            if (position > mRatingTotalNum) {
                position = mRatingTotalNum;
            }
            // 计算绘制的星星是不是满的
            float result = x - startWidth * (position - 1);
            Status statu;
            // 结果大于一半就是满的
            if (result > startWidth * 0.5f) {
                // 满的
                statu = Status.FULL;
            } else {
                // 一半的
                statu = Status.HALF;
            }
            if (isFull) {
                statu = Status.FULL;
            }
            //减少绘制
            if (mRatingSelectedNumber != position || statu != status) {
                mRatingSelectedNumber = position;
                status = statu;
                invalidate();
                if (mOnStarChangeListener != null) {
                    position = (int) (mRatingSelectedNumber - 1);
                    // 选中的数量：满的就回调（1.0这种），一半就（0.5这种）
                    float selectedNumber = status == Status.FULL ? mRatingSelectedNumber
                            : (mRatingSelectedNumber - 0.5f);
                    mOnStarChangeListener.OnStarChanged(selectedNumber,
                            position < 0 ? 0 : position);
                }
            }
        }
        return true;
    }

    /**
     * 如果用户设置了图片的宽高，就重新设置图片
     */
    public Bitmap resetBitmap(Bitmap bitMap, int startWidth) {
        // 得到新的图片
        return Bitmap.createScaledBitmap(bitMap, startWidth, startWidth, true);
    }

    /**
     * 设置选中星星的数量
     */
    public void setSelectedNumber(int selectedNumber) {
        if (selectedNumber >= 0 && selectedNumber <= mRatingTotalNum) {
            this.mRatingSelectedNumber = selectedNumber;
            invalidate();
        }
    }

    /**
     * 设置星星的总数量
     */
    public void setStartTotalNumber(int startTotalNumber) {
        if (startTotalNumber > 0) {
            this.mRatingTotalNum = startTotalNumber;
            invalidate();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 用正常的一个星星图片去测量高
        int height = getPaddingTop() + getPaddingBottom() + mRatingNormal.getHeight();
        // 宽 = 星星的宽度*总数 + 星星的间距*（总数-1） +padding
        int width = getPaddingLeft() + getPaddingRight() + mRatingNormal.getWidth() * mRatingTotalNum + mRatingDistance * (mRatingTotalNum - 1);
        setMeasuredDimension(width, height);
    }

    /**
     * 获得bitmap
     *
     * @param context
     * @param vectorDrawableId
     * @return
     */
    private Bitmap getBitmap(Context context, int vectorDrawableId) {
        Bitmap bitmap;
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
            Drawable vectorDrawable = context.getDrawable(vectorDrawableId);
            bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
                    vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
            vectorDrawable.draw(canvas);
        } else {
            bitmap = BitmapFactory.decodeResource(context.getResources(), vectorDrawableId);
        }
        return bitmap;
    }


    /**
     * 全部 or 半个
     */
    private enum Status {
        FULL, HALF
    }

    public void setOnStarChangeListener(OnStarChangeListener onStarChangeListener) {
        mOnStarChangeListener = onStarChangeListener;
    }

    public interface OnStarChangeListener {
        void OnStarChanged(float selectedNumber, int position);
    }
}

属性文件，新建一个命名为attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="AirRatingBar">
        <!--未选中-->
        <attr name="ratingDefault" format="reference" />
        <!--选中半个-->
        <attr name="ratingHalf" format="reference" />
        <!--选中-->
        <attr name="ratingSelect" format="reference" />
        <!--总数-->
        <attr name="ratingTotalNum" format="integer" />
        <!--默认选中的数量 -->
        <attr name="ratingDefaultSelectNum" format="float" />
        <!--间距-->
        <attr name="ratingDistance" format="dimension" />
        <!--宽度-->
        <attr name="ratingWidth" format="dimension" />
        <!--高度-->
        <attr name="ratingHeight" format="dimension" />
        <!--整个 or 半个-->
        <attr name="ratingIsFull" format="boolean" />
    </declare-styleable>
</resources>

在布局里引用就可以了，下面举例我自己的，注意包名要改成自己项目的

            <com.example.airinstallation.view.AirRatingBar
                android:id="@+id/rb_assessment"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                app:ratingDefault="@drawable/svg_star_c126"
                app:ratingDefaultSelectNum="0"
                app:ratingDistance="4dp"
                app:ratingIsFull="true"
                android:layout_marginTop="20dp"
                app:ratingSelect="@drawable/svg_star_c201"
                app:ratingTotalNum="5" />

实现根据选择的星星的数量显示不同文字

mRatingBar.setOnStarChangeListener((selectedNumber, position) -> {
            if (1.0== selectedNumber) {
                mTvLevel.setText("非常不满意");
            } else if (2.0 == selectedNumber) {
                mTvLevel.setText("不满意");
            } else if (3.0 == selectedNumber) {
                mTvLevel.setText("一般");
            } else if (4.0 == selectedNumber) {
                mTvLevel.setText("满意");
            } else if (5.0 == selectedNumber) {
                mTvLevel.setText("非常满意");
            }
        });
Android自定义Ratingbar星星实现评分
04-13
本篇文章将详细探讨如何根据实际需求自定义RatingBar，实现星星之间的间距调整，以及分享一个自定义RatingBar的实例——MyRatring。 首先，我们要理解Android RatingBar的基本用法。RatingBar是基于ProgressBar的...
Android 中文 API (40) —— RatingBar
weixin_33831673的博客
11-18 543
  前言 　　本章内容是 android.widget.RatingBar，译为"评分条"，版本为Android 2.2 r1，翻译来自"madgoat"和"wallace2010"，欢迎大家访问他们的博客：http://madgoat.cn/、http://blog.youkuaiyun.com/springiscoming2008，再次感谢"madgoat"和"wallace2010" ！期待你加入A...
自定义ratingBar
07-26
然而，系统默认的RatingBar样式可能无法满足所有设计需求，因此我们需要自定义RatingBar以达到特定的视觉效果。本篇将详细介绍如何在Android中自定义一个用星形来显示等级评定的RatingBar。 一、自定义RatingBar的...
android自定义RatingBar
05-20
1. **自定义RatingBar的基本步骤** - 创建一个新的XML布局文件，定义自定义RatingBar的外观。这可以通过在res/drawable目录下创建一个shape drawable来实现，设置星星的形状、颜色等属性。 - 在Java代码或XML布局...
自定义Ratingbar（五星评价）
yyj941204的博客
11-02 2549
与Android系统RatingBar对比： 1.更方便指定每个星星的图标、大小及各个星星的间距 2.支持监听选中状态的变化
ratingbar 自定义星星效果
02-19
ratingbar 自定义星星效果 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+android:id/background" android:drawable="@drawable/xixi0" /> <item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/xixi0" /> <item android:id="@+android:id/progress" android:drawable="@drawable/xixi1" /> </layer-list>
自定义评分条RatingBar
weixin_39166019的博客
03-13 220
package com.ioc.cn.custom; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas...
自定义RatingBar评分控件
weixin_30512043的博客
08-21 153
1.介绍 实现类似美团外卖评分供能，系统提供了RatingBar，今天来自定义一波，当做自定义view的一个学习，效果如下，能够滑动或者点击变化星星数量 2.自定义属性 在values目录下的attrs.xml创建所需要的属性 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-stylea...
RatingBar的自定义效果
dianluanbi7490的博客
04-03 152
首先看看效果： 有时候android系统提供给我们的ratingbar效果并不达到我们的要求，这个时候就可以自定义自己喜欢的ratingbar。 从上面的效果可以看出，自定义这样的组件，需要两张图片： 。一张用来未选择的效果，一张用来显示的效果。那还要中间那种一半是未选择一半时选择的呢？其实当你写好这样的组件后，系统就会自动帮你自动解析生成那种效果。 整个项目布局： ...
Android 控件之RatingBar评分条(五星)自定义样式
hao_qi
12-14 7011
RatingBar的自定义效果 有时候android系统提供给我们的ratingbar效果并不达到我们的要求，这个时候就可以自定义自己喜欢的ratingbar。 从上面的效果可以看出，自定义这样的组件，需要两张图片： 。一张用来未选择的效果，一张用来显示的效果。那还要中间那种一半是未选择一半时选择的呢？其实当你写好这样的组件后，系统就会自动帮你自动解析生成那种效果。 大概
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值