最近在某安卓开发QQ群看到这样一个需求

RTQV50}OUDR~PKE{V{JLG)J.png

大家推荐用RL或者FL加切图的方式实现
为了提高自己的自定义控件水平(其实是最近比较清闲哈哈),试着做了一下,效果如下

Screenshot_20190109.jpg

Screenshot_20190109-115618.jpg

感觉还行,代码如下

 /**
     * 线条画笔
     */
    private val paint = Paint()
    /**
     * 文字画笔
     */
    private val textPaint = Paint()
    /**
     * 颜色画笔
     */
    private val colorPaint = Paint()
    private val path = Path()
    /**
     * 标签矩形宽度
     */
    private var rectangleWidth = 0f
    /**
     * 标签凸出部分宽度
     */
    private var triangleWidth = 0f
    private var mHeight = 0f
    /**
     * 文字的padding
     */
    private var tagPaddingHorizontal = 10f
    private var tagPaddingVertical = 10f

    private var tagNum = -1
    private var tagSize = 10f
    private var defaultTag = "标签"
    /**
     * 标签文本和颜色列表
     */
    private val tagList = mutableListOf<String>()
    private val tagColorList = mutableListOf<Int>()
    private var selectTagIndex = 0
    private var selectTagColor = Color.BLUE
    private var tagTextColor = Color.BLACK
    private val textRect = Rect()

    init {
        val typeArray = context.obtainStyledAttributes(attrs, R.styleable.TagView)
        tagNum = typeArray.getInteger(R.styleable.TagView_tagNum, -1)
        tagSize = typeArray.getDimension(R.styleable.TagView_tagSize, context.resources.getDimension(R.dimen.dimen_size_10))
        tagPaddingHorizontal = typeArray.getDimension(R.styleable.TagView_tagPaddingHorizontal, context.resources.getDimension(R.dimen.dimen_size_6))
        tagPaddingVertical = typeArray.getDimension(R.styleable.TagView_tagPaddingVertical, context.resources.getDimension(R.dimen.dimen_size_6))
        selectTagIndex = typeArray.getInteger(R.styleable.TagView_selectTagIndex, 0)
        selectTagColor = typeArray.getColor(R.styleable.TagView_selectTagColor, Color.BLUE)
        tagTextColor = typeArray.getColor(R.styleable.TagView_tagTextColor, Color.BLACK)
        defaultTag = typeArray.getString(R.styleable.TagView_defaultTag) ?: "标签"
        typeArray.recycle()
        paint.apply {
            color = Color.parseColor("#e1e1e1")
            style = Paint.Style.STROKE
            strokeWidth = 4f
        }
        textPaint.apply {
            textSize = tagSize
            color = tagTextColor
            textAlign = Paint.Align.CENTER
        }
        colorPaint.color = selectTagColor
        //以三个字的长度为例算出标签文本的宽高
        textPaint.getTextBounds("一一一", 0, 3, textRect)
    }

    fun setTagNum(num: Int) {
        tagNum = num
        invalidate()
    }

    fun setTagList(list: List<String>) {
        tagList.clear()
        tagList.addAll(list)
        if (tagList.size < tagNum) {
            for (i in tagNum - tagList.size until tagList.size) {
                tagList.add(defaultTag)
            }
        }
        invalidate()
    }

    fun setColorList(list: List<Int>) {
        tagColorList.clear()
        tagColorList.addAll(list)
        if (tagColorList.size < tagNum) {
            for (i in tagNum - tagColorList.size until tagColorList.size) {
                tagColorList.add(selectTagColor)
            }
        }
        invalidate()
    }

    fun setSelectTag(index: Int) {
        selectTagIndex = index
        if (selectTagIndex < 0 || selectTagIndex >= tagNum)
            selectTagIndex = 0
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        //标签数量为1的时候单独处理,可以不管
        if (tagNum == 1) {
            path.reset()
            path.moveTo(0f + paddingStart, 0f + paddingTop)
            path.lineTo(0f + paddingStart, (measuredHeight - paddingBottom).toFloat())
            path.lineTo(measuredWidth - paddingEnd - (measuredHeight - paddingTop - paddingBottom) / 2f, (measuredHeight - paddingBottom).toFloat())
            path.lineTo((measuredWidth - paddingEnd).toFloat(), (measuredHeight + paddingTop - paddingBottom) / 2f)
            path.lineTo(measuredWidth - paddingEnd - (measuredHeight - paddingTop - paddingBottom) / 2f, 0f + paddingTop)
            path.close()
            canvas.drawPath(path, if (selectTagIndex == 0) colorPaint else paint)
            textPaint.color = if (selectTagIndex == 0) Color.WHITE else tagTextColor
            canvas.drawText(defaultTag, (measuredWidth + paddingStart - paddingEnd - (measuredHeight - paddingTop - paddingBottom) / 2f) / 2f, (measuredHeight + paddingTop - paddingBottom + textRect.bottom - textRect.top) / 2f, textPaint)
        } else
            for (i in 0 until tagNum) {
                path.reset()
                if (i == 0) path.moveTo(0f + paddingStart, 0f + paddingTop)
                else path.moveTo((i - 1) * triangleWidth + i * rectangleWidth + paddingStart, 0f + paddingTop)
                //第一个标签的左边是直线,其他都是折线
                if (i == 0) path.rLineTo(0f, mHeight)
                else {
                    path.rLineTo(mHeight / 2f, mHeight / 2f)
                    path.rLineTo(-mHeight / 2f, mHeight / 2f)
                }
                //第一个标签比其他标签的底边少一个凸起的宽度
                if (i == 0) path.rLineTo(rectangleWidth, 0f)
                else path.rLineTo(triangleWidth + rectangleWidth, 0f)
                //最后一个标签的右边是直线,其他都是折线
                if (i == tagNum - 1) {
                    path.rLineTo(0f, -mHeight)
                } else {
                    path.rLineTo(mHeight / 2f, -mHeight / 2f)
                    path.rLineTo(-mHeight / 2f, -mHeight / 2f)
                }
                path.close()
                canvas.drawPath(path, if (selectTagIndex == i) colorPaint.apply { color = tagColorList[i] } else paint)
                textPaint.color = if (selectTagIndex == i) Color.WHITE else tagTextColor
                //文字画在标签矩形范围中心
                canvas.drawText(tagList[i], paddingStart + (2 * i + 1) * rectangleWidth / 2f + i * triangleWidth, mHeight + paddingTop - tagPaddingVertical, textPaint)
            }
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        mHeight = textRect.bottom - textRect.top + tagPaddingVertical * 2f
        rectangleWidth = textRect.width() + tagPaddingHorizontal * 2
        triangleWidth = mHeight / 2f
        val width = MeasureSpec.getSize(widthMeasureSpec)
        var num = ((width - paddingStart - paddingEnd) / (rectangleWidth + triangleWidth)).toInt()
        if ((width - paddingStart - paddingEnd) % (rectangleWidth + triangleWidth) >= rectangleWidth) {
            num++
        }
        //如果未设置标签数量,按系统分配的宽度算出标签数量
        if (tagNum == -1)
            tagNum = num
        if (tagNum == 1) {
            setMeasuredDimension((rectangleWidth + triangleWidth + paddingStart + paddingEnd).toInt(), (mHeight + paddingTop + paddingBottom).toInt())
        } else {
            setMeasuredDimension((rectangleWidth * tagNum + triangleWidth * (tagNum - 1) + paddingStart + paddingEnd).toInt(), (mHeight + paddingTop + paddingBottom).toInt())
        }
    }

xml

  <TagView
            android:id="@+id/tag_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:tagNum="1"
            android:padding="@dimen/dimen_size_10"/>

        <EditText
            android:id="@+id/et"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tag_view"
            android:inputType="number"/>

        <Button
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确定"
            android:layout_below="@+id/et"/>

act

        tagView.apply {
            setTagNum(5)
            setTagList(mutableListOf("未签到", "已签到", "未充电", "充电中", "已充电"))
            setColorList(mutableListOf(Color.GREEN, Color.BLUE, Color.YELLOW, Color.RED, Color.BLACK))
        }
        btn.setOnClickListener {
            if (et.text.toString().isNotEmpty())
                tagView.setSelectTag(mBinding.et.text.toString().toInt())
        }

如有问题或不足之处,欢迎批评指正