写点什么

Android 自定义 View 之随机数验证码(仿写鸿洋),那些被大厂优化的程序员们

用户头像
Android架构
关注
发布于: 2021 年 11 月 05 日

注意引入命名空间


xmlns:app="http://schemas.android.com/apk/res-auto"

[](

)2.添加构造方法


新建一个RandomTextView类,继承View,并添加3个构造方法


class RandomTextView : View {


//文本


private var mRandomText: String


//文本颜色


private var mRandomTextColor: Int = 0


//文本字体大小


private var mRandomTextSize: Int = 0


private var paint = Paint()


private var bounds = Rect()


//调用两个参数的构造


constructor(context: Context) : this(context, null)


//xml 默认调用两个参数的构造,再调用三个参数的构造,在三个参数构造里获取自定义属性


constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)


constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {


...


}


...


}


这里要注意的是,所有的构造方法,都指向的是第三个构造方法,前两个构造的继承是this,而不是super


第一个构造比如我们可以是 new 创建的,第二个是 xml 中默认调用的,我们在第三个构造中去获取自定义属性。

[](

)3.在构造里获取自定义样式


constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {


//获取自定义属性


val typedArray = context.theme.obtainStyledAttributes(


attributeSet,


R.styleable.RandomTextView,


defStyle,


0


)


mRandomText = typedArray.getString(R.styleable.RandomTextView_randomText).toString()


mRandomTextColor = typedArray.getColor(R.styleable.RandomTextView_randomTextColor, Color.BLACK)//默认黑色


mRandomTextSize = typedArray.getDimensionPixelSize(


R.styleable.RandomTextView_randomTextSize,


TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16F, resources.displayMetrics ).toInt()


)


//获取完回收


typedArray.recycle()


paint.textSize = mRandomTextSize.toFloat()


//返回文本边界,即包含文本的最小矩形,没有所谓“留白”,返回比 measureText()更精确的 text 宽高,数据保存在 bounds 里


paint.getTextBounds(mRa


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


ndomText, 0, mRandomText.length, bounds)


}


通过obtainStyledAttributes获取自定义属性,返回一个TypedArray,这里用到了我们在attrs.xml文件中声明的样式(R.styleable.RandomTextView),返回的 TypedArray 即包含了这里面的属性。


拿到自定义 view 属性集合,然后赋值,赋值之后就可以用paint去画了。


然后用到了 paint 的getTextBounds方法:


paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds)


简单理解就是,把文字放在一个矩形里,通过矩形的宽高即可知道文字的宽高,所以宽高会保存在bounds里,bounds 是一个矩形Rect,为什么要这么做呢,因为后面我们要计算文字居中的时候会用到。


ok,接下来开始画布局。

[](

)4.重写 onDraw 计算坐标绘制


@SuppressLint("DrawAllocation")


override fun onDraw(canvas: Canvas?) {


super.onDraw(canvas)


/**


  • 自定义 View 时,需要我们自己在 onDraw 中处理 padding,否则是不生效的

  • 自定义 ViewGroup 时,子 view 的 padding 放在 onMeasure 中处理


*/


/**


  • 矩形背景


*/


paint.color = Color.YELLOW


//计算坐标,因为原点是在文字的左下角,左边要是延伸出去就还要往左边去,所以是减,右边和下边是正,所以是加


canvas?.drawRect(


(0 - paddingLeft).toFloat(),


(0 - paddingTop).toFloat(),


(measuredWidth + paddingRight).toFloat(),


(measuredHeight + paddingBottom).toFloat(),


paint


)


/**


  • 文本


*/


paint.color = mRandomTextColor


//注意这里的坐标 xy 不是左上角,而是左下角,所以高度是相加的,在自定义 view 中,坐标轴右下为正


//getWidth 等于 measuredWidth


canvas?.drawText(


mRandomText,


(width / 2 - bounds.width() / 2).toFloat(),


(height / 2 + bounds.height() / 2).toFloat(),


paint


)


}


上面的代码就是在onDraw里面显示绘制了一个 YELLOW 颜色的矩形背景,然后绘制了一个自定义属性颜色的居中的文本。


这里要注意我们计算位置时的坐标,在自定义 view 中,原点是 view 的左上角,而在数学坐标系中,原点(0,0)是在中间的,二者是有区别的。


其次,假如 xml 布局中有padding,或者预判会使用到 padding,在重写onDraw的时候也要把 padding 的数据加上,否则 padding 是不生效的。如果是继承ViewGroup时,子view的 padding 放在onMeasure中处理。


来看此时的效果:



此时是不是有疑惑,xml 里面的宽高明明是wrap_content,为什么会充满父布局呢?


这就涉及到onMeasure的知识点了,往下看。

[](

)5.重写 onMeasure 测量宽高


我们在 xml 设置view宽高有 3 种方式:


  • match_parent

  • wrap_content

  • 具体数据,比如 100dp


onMeasureMeasureSpecmode也有 3 种模式:


  • EXACTLY:一般是设置了明确的值或者是 MATCH_PARENT

  • AT_MOST:表示子布局限制在一个最大值内,一般为 WARP_CONTENT

  • UNSPECIFIED:表示子布局想要多大就多大,很少使用


由于我们 xml 用的是wrap_content,也就是对应AT_MOST,所以效果就是会占满父布局中的可用空间,而父布局是填充屏幕,所以我们自定义的 view 也会占满全屏。


而我们实际想要的效果是 view 包裹自己,而不是铺满全屏,所以我们需要在onMeasure中进行处理


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


super.onMeasure(widthMeasureSpec, heightMeasureSpec)


/**


  • EXACTLY:一般是设置了明确的值或者是 MATCH_PARENT

  • AT_MOST:表示子布局限制在一个最大值内,一般为 WARP_CONTENT

  • UNSPECIFIED:表示子布局想要多大就多大,很少使用


*/


val widthMode = MeasureSpec.getMode(widthMeasureSpec)


val widthSize = MeasureSpec.getSize(widthMeasureSpec)


val heightMode = MeasureSpec.getMode(heightMeasureSpec)


val heightSize = MeasureSpec.getSize(heightMeasureSpec)


var width = 0


var height = 0


//如果指定了宽度,或不限制宽度,用可用宽度即可,如果是 WARP_CONTENT,则用文本宽度,再加上左右 padding


when (widthMode) {


MeasureSpec.UNSPECIFIED,


MeasureSpec.EXACTLY -> {


width = widthSize + paddingLeft + paddingRight


}


MeasureSpec.AT_MOST -> {


width = bounds.width() + paddingLeft + paddingRight


}


}


//如果指定了高度,或不限制高度,用可用高度即可,如果是 WARP_CONTENT,则用文本高度,再加上上下 padding


when (heightMode) {


MeasureSpec.UNSPECIFIED,


MeasureSpec.EXACTLY -> {


height = heightSize + paddingTop + paddingBottom


}


MeasureSpec.AT_MOST -> {


height = bounds.height() + paddingTop + paddingBottom


}


}


//保存测量的宽高


setMeasuredDimension(width, height)


}


上面的代码呢,主要做了两件事:


  • 获取 view 宽高的模式

  • 针对不同的模式,对宽高进行重新测量


最后别忘记调用setMeasuredDimension保存新测量的宽高,否则没用哦。

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Android 自定义View之随机数验证码(仿写鸿洋),那些被大厂优化的程序员们