Android自定义View第五弹(可滑动的星星评价)

于 2022-02-21 16:40:20 发布
阅读量2k 收藏 2
点赞数 4
分类专栏： # 自定义View 文章标签： android kotlin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32865887/article/details/123049536
版权

个人开发中自定义View系列（有需要的可以点击查看收藏）

  1. Android自定义view第一弹（防小米计步）
  2. Android自定义View第二弹（旋转的体重）
  3. Android自定义View第三弹（反人类尺子）
  4. Android自定义View第四弹（Kotlin流式布局）

距离上一篇自定义view已经过去了一年多了，这次主要给大家介绍的是可滑动的星星评价，虽然Google官方也提供了 RatingBar 但是没办法满足我的需要只能自己定义一个了，废话不多说先上图：
在这里插入图片描述
这个选中以及默认的心型都是UI提供的图片，上代码：

1.自定义view的代码

import android.content.Context
import android.graphics.*
import android.graphics.drawable.Drawable
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.view.ViewConfiguration
import cn.neoclub.uki.R
import kotlin.math.abs
import kotlin.math.ceil
import kotlin.math.roundToInt

/**
 * Author: Mr.Dong
 * Date: 2022/2/15 4:31 下午
 * Description: 点击心心评价
 */
class HeartRatingBar : View {
    private var starDistance = 0 //星星间距
    private var starCount = 5 //星星个数
    private var starSize = 0 //星星高度大小，星星一般正方形，宽度等于高度
    private var starMark = 0 //评分星星
    private var starFillBitmap: Bitmap? = null //亮星星
    private var starEmptyDrawable : Drawable? = null//暗星星
    private var onStarChangeListener : OnStarChangeListener? = null//监听星星变化接口
            
    private var paint : Paint? = null//绘制星星画笔
    //是否显示整数的星星       
    private var integerMark = false
    //初始化可以被定义为滑动的距离（超过这个距离就是滑动，否则就是点击事件）
    private var scaledTouchSlop:Int=0

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        init(context, attrs)
    }

    /**
     * 初始化UI组件
     *
     * @param context
     * @param attrs
     */
    private fun init(context: Context, attrs: AttributeSet?) {
        //获取滑动的有效距离
        scaledTouchSlop=ViewConfiguration.get(context).scaledTouchSlop
        isClickable = true
        //获取各种属性的值
        val mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HeartRatingBar)
        starDistance = mTypedArray.getDimension(R.styleable.HeartRatingBar_starDistance, 0f).toInt()
        starSize = mTypedArray.getDimension(R.styleable.HeartRatingBar_starSize, 20f).toInt()
        starCount = mTypedArray.getInteger(R.styleable.HeartRatingBar_starCount, 5)
        starEmptyDrawable = mTypedArray.getDrawable(R.styleable.HeartRatingBar_starEmpty)
        starFillBitmap = drawableToBitmap(mTypedArray.getDrawable(R.styleable.HeartRatingBar_starFill))
        mTypedArray.recycle()
        paint = Paint()
        //设置抗锯齿
        paint?.isAntiAlias = true
        //设置渲染器
        paint?.shader = BitmapShader(starFillBitmap!!, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
    }

    /**
     * 设置是否需要整数评分
     * @param integerMark
     */
    fun setIntegerMark(integerMark: Boolean) {
        this.integerMark = integerMark
    }

    /**
     * 设置显示的星星的分数
     *
     * @param mark
     */
    private fun setStarMark(mark: Int) {
        starMark = if (integerMark) {
            //ceil函数 去除小数点后面的 返回 double 类型，返回值大于或等于给定的参数 例Math.ceil(100.675) = 101.0
            ceil(mark.toDouble()).toInt()
        } else {
            (mark * 10).toFloat().roundToInt() * 1 / 10
        }
        if (onStarChangeListener != null) {
            onStarChangeListener?.onStarChange(starMark) //调用监听接口
        }
        invalidate()
    }

    /**
     * 获取显示星星的数目
     *
     * @return starMark
     */
    fun getStarMark(): Int {
        return starMark
    }

    /**
     * 定义星星点击的监听接口
     */
    interface OnStarChangeListener {
        fun onStarChange(mark: Int)
    }

    /**
     * 设置监听
     * @param onStarChangeListener
     */
    fun setOnStarChangeListener(onStarChangeListener: OnStarChangeListener?) {
        this.onStarChangeListener = onStarChangeListener
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        //设置view的宽度和高度 继承view必须重写此方法
        setMeasuredDimension(starSize * starCount + starDistance * (starCount - 1), starSize)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (starFillBitmap == null || starEmptyDrawable == null) {
            return
        }
        //绘制空的星星
        for (i in 0 until starCount) {
            //设置starEmptyDrawable绘制的长方形区域，当调用draw()方法后就可以直接绘制
            starEmptyDrawable?.setBounds(
                (starDistance + starSize) * i,
                0,
                (starDistance + starSize) * i + starSize,
                starSize
            )
            starEmptyDrawable?.draw(canvas)
        }
        if (starMark > 1) {
            //绘制了第一个star
            canvas.drawRect(0f, 0f, starSize.toFloat(), starSize.toFloat(), paint!!)
            if (starMark - starMark == 0) { //第一步必走这里 
                //绘制亮星星
                for (i in 1 until starMark) {
                    //每次位移start的宽度+间距
                    canvas.translate((starDistance + starSize).toFloat(), 0f)
                    canvas.drawRect(0f, 0f, starSize.toFloat(), starSize.toFloat(), paint!!)
                }
            } else { //非整形的star绘制走这里
                for (i in 1 until starMark - 1) {
                    canvas.translate((starDistance + starSize).toFloat(), 0f)
                    canvas.drawRect(0f, 0f, starSize.toFloat(), starSize.toFloat(), paint!!)
                }
                canvas.translate((starDistance + starSize).toFloat(), 0f)
                canvas.drawRect(
                    0f,
                    0f,
                    starSize * (((starMark - starMark) * 10).toFloat().roundToInt() * 1.0f / 10),
                    starSize.toFloat(),
                    paint!!
                )
            }
        } else {
            //startMark=0 啥都没绘制
            canvas.drawRect(0f, 0f, (starSize * starMark).toFloat(), starSize.toFloat(), paint!!)
        }
    }

    //记录一下上次down的x的位置
    private var downX:Int=0

    override fun onTouchEvent(event: MotionEvent): Boolean {
        var x = event.x.toInt()
        if (x < 0) x = 0
        if (x > measuredWidth) x = measuredWidth
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                downX=x
                //对于除数不能为0的限制
                if(starCount==0||(measuredWidth * 1 / starCount)==0){
                    return false
                }
                val count=x * 1 / (measuredWidth * 1 / starCount)
                setStarMark(count+1)
            }
            MotionEvent.ACTION_MOVE -> {
                //当滑动距离的绝对值小于官方定义的有效滑动距离则不走move当做down处理
                if(abs(event.x-downX)<scaledTouchSlop){
                    return false
                }
                if(starCount==0||(measuredWidth * 1 / starCount)==0){
                    return false
                }
                setStarMark(x * 1 / (measuredWidth * 1 / starCount))
            }
            MotionEvent.ACTION_UP -> {}
        }
        invalidate()
        return super.onTouchEvent(event)
    }

    /**
     * drawable转bitmap
     *
     * @param drawable
     * @return
     */
    private fun drawableToBitmap(drawable: Drawable?): Bitmap? {
        if (drawable == null) return null
        val bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        drawable.setBounds(0, 0, starSize, starSize)
        drawable.draw(canvas)
        return bitmap
    }
}

2.自定义View的使用

    <cn.neoclub.uki.message.widget.HeartRatingBar
        android:id="@+id/rb_rating_bar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:starCount="5"
        app:starDistance="7dp"
        app:starEmpty="@drawable/icon_heart_rating_default"
        app:starFill="@drawable/icon_heart_rating_select"
        app:starSize="40dp" />

3.attrs.xml文件中的属性

 <declare-styleable name="HeartRatingBar">
        <attr name="starDistance" format="dimension"/>
        <attr name="starSize" format="dimension"/>
        <attr name="starCount" format="integer"/>
        <attr name="starEmpty" format="reference"/>
        <attr name="starFill" format="reference"/>
    </declare-styleable>

4.送你两张图，怕你运行不起来

1.icon_heart_rating_select.png
在这里插入图片描述
2.icon_heart_rating_default.png
在这里插入图片描述
是不是感觉这边少了个icon,对了就是少一张😄（其实是有图的）

小翘_上海
关注
专栏目录
Android 自定义View：实现View的滑动效果
MR_D_j的专栏
04-24 8089
讲解了View的触摸事件，已经实现View滑动的7种方式
安卓评价星星，真正好用
10-22
真真好用的评价星星，不会有黑色的底线，不是原声的大丑怪。 备用，曾经被坑过 一颗星，半颗星，都可以。替换简单
Android 星星评价
haozidao的专栏
06-03 2550
//下载地址 https://github.com/techery/ProperRatingBar ProperRatingBar Inspired by stock android RatingBar. Simpler, has features that original lacks. What is this about Whatever
python学习记录5
weixin_51353862的博客
10-19 261
练习星星 * ** ** *
android星星评分,2.3.9 RatingBar(星级评分条)
weixin_32933155的博客
05-27 767
本节引言：上一节的SeekBar是不是很轻松咧，本节我们学的这个RatingBar(星级评分条)也非常简单，相信在某宝，买过东西的对这个应该不陌生，收到卖家的包裹，里面很多时候会有个小纸片，五星好评返还多少元这样，而评分的时候就可以用到我们这个星级评分条了~先来瞅瞅官方文档官方文档：RatingBar我们可以看到，这玩意和SeekBar的类结构是一样的，也是ProgressBar的子类：也就是说他...
Android星星评分控件
01-11
Android星星评分控件SimpleRatingBar的使用（可点击和滑动星星）
Android自定义星星可滑动评分控件
08-27
Android自定义星星可滑动评分控件 Android自定义星星可滑动评分控件是指在Android应用程序中实现的星星评分控件，可以滑动评分，具有一定的参考价值。本控件通过线性布局结合ImageView实现，具有展示分数、滑动评分...
Android自定义折线图，可左右滑动，可点击
01-10
在Android开发中，有时我们需要创建具有特定功能的图表来展示数据，例如自定义的折线图。本知识点将深入探讨如何在Android应用中实现一个可左右滑动且可点击的自定义折线图。 首先，要创建这样一个自定义折线图，你...
android 自定义View于弹出软键盘之上
01-16
软键盘弹出之后，计算软键盘的高度，将自定义的View设置于软键盘之上。代码重点计算了如何让软键盘显示与隐藏，并且，还解决了如何点击软键盘与自定义View 之外的区域，让软键盘隐藏而不会与其他控件的点击事件冲突...
Android自定义Ratingbar星星实现评分
04-13
最近写项目用到了Ratingbar，由于Android自带的Ratingbar可以改变星星的颜色，但是无法设置间距，所以我们自定义了Ratingbar，上传到这和大家分享，交流学习
android 可滑动的星级评价
07-17
实现可滑动的星级评价,可设置0-10分，自行设置星星图片，是否可点击与滑动，设置星星间距等
Android RatingBar星星评分控件实例代码
08-30
本文通过实例代码给大家介绍了Android RatingBar星星评分控件，非常不错，具有参考借鉴价值，需要的朋友参考下吧
Android UI控件RatingBar实现自定义星星评分效果
08-31
主要为大家详细介绍了Android UI控件RatingBar实现自定义星星评分效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 评价星星自定义 高度 样式
pxcz110112的博客
09-25 818
Android自带的RatingBar不能直接自定义宽高，不然可能无法显示完全   首先，准备两张图片，一张未选中的一张选中的   然后，在res/drawable下创建xml文件ratingbar.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;layer-list xmlns:android="http://schemas....
Android自定义星星可滑动评分控件 ---亲测好用
weixin_43299230的博客
11-06 226
https://www.jb51.net/article/137250.htm
Android RatingBar 实现评星功能
qq_27494201的博客
07-16 1489
效果图： activity_main.xml： <RatingBar android:id="@+id/rgb_ping" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" ...
Android中星星评分控件SimpleRatingBar的使用
kaolagirl的博客
08-02 1241
android自带的RatingBar控件在设置大小上是很难控制的【RatingBar控件的介绍】 下面的话就来说说如何使用SimpleRatingBar开源库去实现星级效果【GitHub查看】 一.SimpleRatingBar的属性和方法 描述 属性/方法 设置显示总星数 app:srb_numberOfStars/setNumberOfStars(int) 设置选中星数 app:srb_rating / 设置评级setRating(float) 设置步长 app:srb
Android自定义View：打造可滑动的折线图控件
通过这个自定义View，开发者可以创建一个自定义的、可滑动的折线图组件，用于展示动态变化的数据或状态。这个控件的灵活性使得它能适应各种应用场景，同时也为用户提供了直观的数据交互体验。对于想要提升自己在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值