最近在某安卓开发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()
private val tagColorList = mutableListOf()
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) {
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) {
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
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())
}
如有问题或不足之处,欢迎批评指正