Android自定义View实现星星评分效果

 更新时间:2022年11月25日 16:43:20   作者:newki  
这篇文章主要为大家详细介绍了Android如何利用自定义View实现一个星星评分的控件,文中的示例代码讲解详细,感兴趣的小伙伴可以尝试一下

前言

在前面的学习中,我们基本了解了一些 Canvas 的绘制,那么这一章我们一起复习一下图片的绘制几种方式,和事件的简单交互方式。

我们从易到难,作为基础的进阶控件,我们从最简单的交互开始,那就自定义一个星星评分的控件吧。

一个 App 必不可少的评论系统打分的控件,可以展示评分,可以点击评分,可以滑动评分。它的实现总体上可以分为以下的步骤:

  • 强制测量大小为我们指定的大小
  • 先绘制Drawable未评分的图片
  • 在绘制Bitmap已评分的图片
  • 在onTouch中点击和移动的事件中动态计算当前的评分,进而刷新布局
  • 回调的处理与属性的抽取

思路我们已经有了,下面一步一步的来实现吧。

话不多说,Let's go

1、测量与图片的绘制

我们需要绘制几个星星,那么我们必须要设置的几个属性:

当前的评分值,总共有几个星星,每一个星星的间距和大小,选中和未选中的Drawable图片:

    private int mStarDistance = 0;
    private int mStarCount = 5;
    private int mStarSize = 20;    //每一个星星的宽度和高度是一致的
    private float mScoreNum = 0.0F;  //当前的评分值
    private Drawable mStarScoredDrawable;  //已经评分的星星图片
    private Drawable mStarUnscoredDrawable;  //还未评分的星星图片

    private void init(Context context, AttributeSet attrs) {

        mScoreNum = 2.1f;
        mStarSize = context.getResources().getDimensionPixelSize(R.dimen.d_20dp);
        mStarDistance = context.getResources().getDimensionPixelSize(R.dimen.d_5dp);
        mStarScoredDrawable = context.getResources().getDrawable(R.drawable.iv_normal_star_yellow);
        mStarUnscoredDrawable = context.getResources().getDrawable(R.drawable.iv_normal_star_gray);
    }

测量布局的时候,我们就不能根据xml设置的 match_parent 或 wrap_content 来设置宽高,我们需要根据星星的大小与间距来动态的计算,所以不管xml中如何设置,我们都强制性的使用我们自己的测量。

星星的数量 * 星星的宽度再加上中间的间距 * 数量-1,就是我们的控件宽度,控件高度则是星星的高度。

具体的确定测量我们再上一篇已经详细的复习过了,这里直接贴代码:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(mStarSize * mStarCount + mStarDistance * (mStarCount - 1), mStarSize);
    }

这样就可以得到对应的测量宽高 (加一个背景方便看效果):

如何绘制星星?直接绘制Drawable即可,默认的Drawable的绘制为:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for (int i = 0; i < mStarCount; i++) {
            mStarUnscoredDrawable.setBounds((mStarDistance + mStarSize) * i, 0, (mStarDistance + mStarSize) * i + mStarSize, mStarSize);
            mStarUnscoredDrawable.draw(canvas);
        }

    }

如果有5个星星图片,那么就为每一个星星定好位置:

那么已经选中的图片也需要使用这种方法绘制吗?

计算当前的评分,然后计算计算需要绘制多少星星,那么就是这样做:

    int score = (int) Math.ceil(mScoreNum);
    for (int i = 0; i < score; i++) {
        mStarScoredDrawable.setBounds((mStarDistance + mStarSize) * i, 0, (mStarDistance + mStarSize) * i + mStarSize, mStarSize);
        mStarScoredDrawable.draw(canvas);
    }

可是这么做不符合我们的要求啊 ,我们是需要是可以显示评分为2.5之类值,那么我们怎么能绘制半颗星呢?Drawable.draw(canvas) 的方式满足不了,那我们可以使用 BitmapShader 的方式来绘制。

初始化一个 BitmapShader 设置给 Paint 画笔,通过画笔就可以画出对应的形状。

比如此时的场景,我们如果想只画0.5个星星,那么我们就可以

     paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(drawableToBitmap(mStarScoredDrawable), BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));

    @Override
    protected void onDraw(Canvas canvas) {
        for (int i = 0; i < mStarCount; i++) {
            mStarUnscoredDrawable.setBounds((mStarDistance + mStarSize) * i, 0, (mStarDistance + mStarSize) * i + mStarSize, mStarSize);
            mStarUnscoredDrawable.draw(canvas);
        }

         canvas.drawRect(0, 0, mStarSize * mScoreNum, mStarSize, paint);
    }

那么如果是大于一个星星之后的小数点就可以用公式计算

    if (mScoreNum > 1) {
        canvas.drawRect(0, 0, mStarSize, mStarSize, paint);

        if (mScoreNum - (int) (mScoreNum) == 0) {
            //如果评分是3.0之类的整数,那么直接按正常的rect绘制
            for (int i = 1; i < mScoreNum; i++) {
                canvas.translate(mStarDistance + mStarSize, 0);
                canvas.drawRect(0, 0, mStarSize, mStarSize, paint);
            }
        } else {
            //如果是小数例如3.5,先绘制之前的3个,再绘制后面的0.5
            for (int i = 1; i < mScoreNum - 1; i++) {
                canvas.translate(mStarDistance + mStarSize, 0);
                canvas.drawRect(0, 0, mStarSize, mStarSize, paint);
            }
            canvas.translate(mStarDistance + mStarSize, 0);
            canvas.drawRect(0, 0, mStarSize * (Math.round((mScoreNum - (int) (mScoreNum)) * 10) * 1.0f / 10), mStarSize, paint);
        }

    } else {
        canvas.drawRect(0, 0, mStarSize * mScoreNum, mStarSize, paint);
    }

效果:

关于 BitmapShader 的其他用法,可以翻看我之前的自定义圆角圆形View,和自定义圆角容器的文章,里面都有用到过,主要是方便一些图片的裁剪和缩放等。

2、事件的交互与计算

这里并没有涉及到什么事件嵌套,拦截之类的复杂处理,只需要处理自身的 onTouch 即可。而我们需要处理的就是按下的时候和移动的时候评分值的变化。

在onDraw方法中,我们使用 mScoreNum 变量来绘制的已评分的 Bitmap 绘制。所以这里我们只需要在 onTouch 中计算出对应的 mScoreNum 值,让其重绘即可。

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //x轴的宽度做一下最大最小的限制
        int x = (int) event.getX();
        if (x < 0) {
            x = 0;
        }
        if (x > mMeasuredWidth) {
            x = mMeasuredWidth;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE: {
                mScoreNum = x * 1.0f / (mMeasuredWidth * 1.0f / mStarCount);
                invalidate();
                break;
            }
            case MotionEvent.ACTION_UP: {
                break;
            }
        }

        return super.onTouchEvent(event);

    }

计算出一颗星的长度,然后计算当前x轴的长度,就可以计算出当前有几颗星,我们默认处理的是 float 类型。就可以根据计算出的 mScoreNum 值来得到对应的动画效果:

3. 回调处理与自定义属性抽取

到此效果的实现算是结束了,但是我们还有一些收尾工作没做,如何监听进度的回调,如何控制整数与浮点数的显示,是否支持触摸等等。然后对其做一些自定义属性的抽取,就可以在应用中比较广泛的使用了。

自定义属性:

    private int mStarDistance = 5;
    private int mStarCount = 5;
    private int mStarSize = 20;    //每一个星星的宽度和高度是一致的
    private float mScoreNum = 0.0F;  //当前的评分值
    private Drawable mStarScoredDrawable;  //已经评分的星星图片
    private Drawable mStarUnscoredDrawable;  //还未评分的星星图片
    private boolean isOnlyIntegerScore = false;  //默认显示小数类型
    private boolean isCanTouch = true; //默认支持控件的点击
    private OnStarChangeListener onStarChangeListener;

自定义属性的赋值与初始化操作:

    private void init(Context context, AttributeSet attrs) {
        setClickable(true);
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.StarScoreView);
        this.mStarDistance = mTypedArray.getDimensionPixelSize(R.styleable.StarScoreView_starDistance, 0);
        this.mStarSize = mTypedArray.getDimensionPixelSize(R.styleable.StarScoreView_starSize, 20);
        this.mStarCount = mTypedArray.getInteger(R.styleable.StarScoreView_starCount, 5);
        this.mStarUnscoredDrawable = mTypedArray.getDrawable(R.styleable.StarScoreView_starUnscoredDrawable);
        this.mStarScoredDrawable = mTypedArray.getDrawable(R.styleable.StarScoreView_starScoredDrawable);
        this.isOnlyIntegerScore = mTypedArray.getBoolean(R.styleable.StarScoreView_starIsTouchEnable, true);
        this.isOnlyIntegerScore = mTypedArray.getBoolean(R.styleable.StarScoreView_starIsOnlyIntegerScore, false);
        mTypedArray.recycle();

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(new BitmapShader(drawableToBitmap(mStarScoredDrawable), BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
    }

自定义属性的定义xml文件:

    <!--  评分星星控件  -->
    <declare-styleable name="StarScoreView">
        <!--星星间距-->
        <attr name="starDistance" format="dimension" />
        <!--星星大小-->
        <attr name="starSize" format="dimension" />
        <!--星星个数-->
        <attr name="starCount" format="integer" />
        <!--星星已评分图片-->
        <attr name="starScoredDrawable" format="reference" />
        <!--星星未评分图片-->
        <attr name="starUnscoredDrawable" format="reference" />
        <!--是否可以点击-->
        <attr name="starIsTouchEnable" format="boolean" />
        <!--是否显示整数-->
        <attr name="starIsOnlyIntegerScore" format="boolean" />
    </declare-styleable>

在OnTouch的时候就可以判断是否能触摸

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (isCanTouch) {

            //x轴的宽度做一下最大最小的限制
            int x = (int) event.getX();
            if (x < 0) {
                x = 0;
            }
            if (x > mMeasuredWidth) {
                x = mMeasuredWidth;
            }

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE: {
                    setStarMark(x * 1.0f / (getMeasuredWidth() * 1.0f / mStarCount));
                    break;
                }
                case MotionEvent.ACTION_UP: {
                    break;
                }
            }
            
            return super.onTouchEvent(event);

        } else {
            //如果设置不能点击,直接不触发事件
            return false;
        }

    }

而 setStarMark 则是设置入口的方法,内部判断是否支持小数点和设置对于的监听,并调用重绘。

   public void setStarMark(float mark) {
        if (isOnlyIntegerScore) {
            mScoreNum = (int) Math.ceil(mark);
        } else {
            mScoreNum = Math.round(mark * 10) * 1.0f / 10;
        }
        if (this.onStarChangeListener != null) {
            this.onStarChangeListener.onStarChange(mScoreNum);  //调用监听接口
        }
        invalidate();
    }

一个简单的图片绘制和事件触摸的控件就完成啦,使用起来也是超级方便。

    <com.guadou.kt_demo.demo.demo18_customview.star.StarScoreView
        android:id="@+id/star_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/d_40dp"
        android:background="#f1f1f1"
        app:starCount="5"
        app:starDistance="@dimen/d_5dp"
        app:starIsOnlyIntegerScore="false"
        app:starIsTouchEnable="true"
        app:starScoredDrawable="@drawable/iv_normal_star_yellow"
        app:starSize="@dimen/d_35dp"
        app:starUnscoredDrawable="@drawable/iv_normal_star_gray" />

Activity中可以设置评分和设置监听:

    override fun init() {

        val starView = findViewById<StarScoreView>(R.id.star_view)

        starView.setOnStarChangeListener {
            YYLogUtils.w("当前选中的Star:$it")
        }

        findViewById<View>(R.id.set_progress).click {
            starView.setStarMark(3.5f)
        }
    }

效果:

后记

整个流程走下来是不是很简单呢,此控件不止用于星星类型的评分,任何图片资源都可以使用,现在我们思路打开扩展一下,相似的场景和效果我们可以实现一些图片进度,触摸进度条,圆环的SeekBar,等等类似的控制都是相似的思路。

到此这篇关于Android自定义View实现星星评分效果的文章就介绍到这了,更多相关Android自定义View星星评分内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android组件banner实现左右滑屏效果

    Android组件banner实现左右滑屏效果

    这篇文章主要为大家详细介绍了Android组件banner实现左右滑屏效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • android倒计时控件示例

    android倒计时控件示例

    这篇文章主要为大家详细介绍了android倒计时控件示例,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Android显示系统SurfaceFlinger分析

    Android显示系统SurfaceFlinger分析

    本文详细讲解了Android显示系统SurfaceFlinger,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • Android开发人脸识别统计人脸数

    Android开发人脸识别统计人脸数

    这篇文章主要介绍了Android开发人脸识别统计人脸数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • TextView实现跑马灯效果 就这么简单!

    TextView实现跑马灯效果 就这么简单!

    TextView实现跑马灯效果,就这么简单轻松实现,这篇文章介绍了TextView制作跑马灯效果的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 利用Jetpack Compose实现主题切换功能

    利用Jetpack Compose实现主题切换功能

    这篇文章主要介绍了如何利用Android中的Jetpack Compose实现主题切换功能,文中的示例代码讲解详细,对我们学习有一定帮助,需要的可以参考一下
    2022-01-01
  • Android中ProgressDialog的dismiss()与cancel()方法的区别

    Android中ProgressDialog的dismiss()与cancel()方法的区别

    本文主要介绍了Android中ProgressDialog的dismiss()与cancel()方法的区别,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Android控件之GridView用法实例分析

    Android控件之GridView用法实例分析

    这篇文章主要介绍了Android控件之GridView用法,通过绘制九宫格的实例形式分析了GridView可滚动网格的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Android Activity的启动过程源码解析

    Android Activity的启动过程源码解析

    这篇文章主要介绍了Android Activity的启动过程源码解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Android手动检查并申请权限方法

    Android手动检查并申请权限方法

    今天小编就为大家分享一篇Android手动检查并申请权限方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07

最新评论