image.png

在网页上看到这种打分效果，想着android里咋实现。
第一想法就是RatingBar了，它背景默认是一排星星，而这里需要数字1到10的，系统的肯定做不到，那么稍微改下就可以吧？
为啥在系统的RatingBar上改？
为了偷懒，不用处理触摸事件.我们只需要在onDraw里画上我们要的就行了

前提知识：

 android:numStars="10"
        android:stepSize="1"
        android:rating="4"

为了省事，numStarts就当做我们的score了，rating就是当前的打分，stepSize我们会默认设置为1，这样每次滑动间隔就是1分了.
还有默认的星星，再最后我们会把它设置为null，这样就只会显示我们自定义的了。

默认的主题,Appcompat包下的，材料主题可能有区别，只是说明下，默认的高度是固定的，最小最大值一样，这个我们需要修改下，要不可能没法把score的item弄成正方形.

    <style name="Widget.RatingBar">
        <item name="indeterminateOnly">false</item>
        <item name="progressDrawable">@drawable/ratingbar_full</item>
        <item name="indeterminateDrawable">@drawable/ratingbar_full</item>
        <item name="minHeight">57dip</item>
        <item name="maxHeight">57dip</item>
        <item name="thumb">@null</item>
        <item name="mirrorForRtl">true</item>
    </style>

step 1

首先我们要根据容器的宽度，计算每个item的宽
每个score之间是有个间隔的，我们定义个固定值，然后算下有几个
假如总的score count是10，那么space的个数就是10-1，我们只需要宽度减去这些space的宽，然后除以score的个数，就知道每个的宽度的，很简单
因为RatingBar有固定的高度的，不符合我们的需求，所以下边根据item的宽，修改了容器的高度.

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        starSize=(measuredWidth-(numStars-1)*spaceWidth)/numStars
        rect.set(0f,0f,starSize,starSize)//我这里每个score的item是个正方形的
        setMeasuredDimension(measuredWidth,starSize.toInt())
        paintText.getTextBounds("10",0,2,textBounds)
    }

step 2

然后就是循环绘制那10个item的背景以及文字了.

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if(width==0||height==0){
            return
        }
        rectTemp.set(rect)
        (0 until  numStars).forEach {
            rectTemp.offsetTo((starSize+spaceWidth)*it,0f)
            val isPre=it<rating
            paintBG.apply {
                color=if(isPre) Color.BLUE else Color.GRAY
            }
            canvas.drawRect(rectTemp,paintBG)

            paintText.apply {
                color=if(isPre) Color.WHITE else Color.BLACK
            }
            canvas.drawText("${it+1}",rectTemp.centerX(),rectTemp.centerY()+textBounds.height()/2,paintText)
        }

    }

step 3

添加的参数
就是4种颜色，以及文字大小，间距大小

    <declare-styleable name="ScoreRatingBar">
        <attr name="ScoreTextNormalColor" format="color"/>
        <attr name="ScoreTextCheckedColor" format="color"/>
        <attr name="ScoreItemNormalColor" format="color"/>
        <attr name="ScoreItemCheckedColor" format="color"/>
        <attr name="ScoreTextSize" format="dimension"/>
        <attr name="ScoreItemSpace" format="dimension"/>
    </declare-styleable>

布局
红框四个属性是必须的
最大高度的值随便弄个大点的就行，实际高度是根据宽度算出来的，保证item是正方形
progressDrawalbe 弄成空，就是隐藏默认的星星
numstarts：可以当做最大分数
rating：当前分数

image.png

源码

import android.content.Context
import android.graphics.*
import android.graphics.drawable.ColorDrawable
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatRatingBar
import com.mitac.app2020.R

class ScoreRatingBar : AppCompatRatingBar {

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

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

    private fun init(context: Context, attrs: AttributeSet?, defStyleAttr: Int) {
        stepSize = 1f
        val a = context.obtainStyledAttributes(attrs, R.styleable.ScoreRatingBar, defStyleAttr, 0)
        scoreTextSize = a.getDimensionPixelSize(R.styleable.ScoreRatingBar_ScoreTextSize, scoreTextSize);
        spaceWidth = a.getDimensionPixelSize(R.styleable.ScoreRatingBar_ScoreItemSpace, spaceWidth)
        textColorNormal =
            a.getColor(R.styleable.ScoreRatingBar_ScoreTextNormalColor, textColorNormal)
        textColorChecked =
            a.getColor(R.styleable.ScoreRatingBar_ScoreTextCheckedColor, textColorChecked)
        itemColorNormal =
            a.getColor(R.styleable.ScoreRatingBar_ScoreItemNormalColor, itemColorNormal)
        itemColorChecked =
            a.getColor(R.styleable.ScoreRatingBar_ScoreItemCheckedColor, itemColorChecked)
        a.recycle()
        paintText.textSize=scoreTextSize.toFloat()
    }

    var scoreTextSize = 30
    val rectTemp = RectF()//临时rect，初始化为第一个score item的位置，后边的进行平移即可
    var spaceWidth = 10;//每个score item之间的间隔距离
    val rect = RectF()//first score item rect
    var starSize = 0f//每个score item的宽度
    val textBounds = Rect()//计算的文字的范围
    val paintBG = Paint().apply {//画背景的
        style = Paint.Style.FILL
    }
    var textColorNormal = Color.BLACK
    var textColorChecked = Color.WHITE
    var itemColorNormal = Color.GRAY
    var itemColorChecked = Color.DKGRAY
    val paintText = Paint().apply {//画文字的
        textAlign = Paint.Align.CENTER
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (width == 0 || height == 0) {
            return
        }
        rectTemp.set(rect)
        (0 until numStars).forEach {
            rectTemp.offsetTo((starSize + spaceWidth) * it, 0f)
            val isPre = it < rating
            paintBG.apply {
                color = if (isPre) itemColorChecked else itemColorNormal
            }
            canvas.drawRect(rectTemp, paintBG)

            paintText.apply {
                color = if (isPre) textColorChecked else textColorNormal
            }
            canvas.drawText(
                "${it + 1}",
                rectTemp.centerX(),
                rectTemp.centerY() + textBounds.height() / 2,
                paintText
            )
        }

    }


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        paintText.getTextBounds("10", 0, 2, textBounds)
        starSize = (measuredWidth - (numStars - 1) * spaceWidth) / numStars.toFloat()
        rect.set(0f, 0f, starSize, starSize)
        setMeasuredDimension(measuredWidth, starSize.toInt())
    }

}

效果图

image.png