效果图:
自定义TextView 的构造函数写法有两种:
第一种比较推荐写法:
class CustomTextView @JvmOverloads constructor(context: Context, attributeSet: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attributeSet, defStyleAttr) {
第二种写法:
class CustomTextView : View {
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes)
接下来就是创建 Paint和初始化一些配置
private var paintText: Paint = Paint()//创建Paint
paintText.isAntiAlias = true //设置抗锯齿
paintText.color = Color.BLUE //设置颜色
paintText.textSize = 40F //设置字体大小
在 onMeasure 中测量文字的宽高
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
//测量文字的宽高
paintText.getTextBounds(textStr, 0, textStr.length, rectText)
rectBorder.left = 0 //文字边框的左边坐标
FrectBorder.top = 0 //文字边框的上坐标
FrectBorder.bottom = rectText.height().toFloat() +30 //文字边框的下坐标
rectBorder.right = rectText.width().toFloat() +30 //文字边框的右坐标
测量结束以后开始绘制
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawText(textStr, 0F + 10, rectText.height().toFloat()+ 10, paintText) //绘制文字
canvas?.drawRoundRect(rectBorder, 15F, 15F, paintTextRect) //绘制文字的边框
canvas?.drawCircle(600.0F, 600F, 100F, paintCircle) //绘制圆形
}
以上操作总结如下:
首先继承View自定义view
需要重写 onMeasure 和 onDraw 两个方法,onMeasure是测量,onDraw是绘制
绘制实心图形(矩形、圆形等)默认 Paint 的style 属性是
FILL : 实心的图形
STROKE :空心描边的图形,需要设置 strokeWidth 属性是边框的宽度 color :边框的颜色
FILL_AND_STROKE : 实心描边
如何确定文字的绘制位置:
如果不指定的话,文字默认绘制在空间的左上角位置
获取到文字的显示宽高 getTextBounds 后,可以根据 width()和 height()得到文字显示的宽高,
然后再根据边框间隙多少设置文字显示的位置和边框的显示位置