Android实现一个简易的带边输入框
作者：似曾相识2022
如今市面上APP的输入框可以说是千奇百怪,不搞点花样出来貌似代表格局没打开,还在使用系统自带的输入框的兄弟可以停下脚步,哥带你实现一个简易的带边框输入框,感兴趣的同学可以自己动手试一下
话不多说，直接上图：
要实现这个效果，不得不再回顾下自定义View的流程，感兴趣的童鞋可以自行网上搜索，这里只提及该效果涉及到的内容。总体实现大致流程：
- 继承AppCompatEditText
- 配置可定义的资源属性
- onDraw() 方法的重写
首先还得分析：效果图中最多只能输入6个数字，需要计算出每个文字的宽高和间隙，再分别绘制文字背景和文字本身。从中我们需要提取背景颜色、高度、边距等私有属性，通过新建attrs.xml文件进行配置：
<declare-styleable name="RoundRectEditText">
<attr name="count" format="integer"/>
<attr name="itemPading" format="dimension"/>
<attr name="strokeHight" format="dimension"/>
<attr name="strokeColor" format="color"/>/>
</declare-styleable>这样在初始化的时候即可给你默认值：
val typedArray =context.obtainStyledAttributes(it, R.styleable.RoundRectEditText) count = typedArray.getInt(R.styleable.RoundRectEditText_count, count) itemPading = typedArray.getDimension(R.styleable.RoundRectEditText_itemPading,0f) strokeHight = typedArray.getDimension(R.styleable.RoundRectEditText_strokeHight,0f) strokeColor = typedArray.getColor(R.styleable.RoundRectEditText_strokeColor,strokeColor) typedArray.recycle()
接下来便是重头戏，如何绘制文字和背景色。思路其实很简单，通过for循环去遍历绘制每一个数字。关键点还在于去计算每个文字的位置及宽高，只要得到了位置和宽高，绘制背景和绘制文字易如反掌。
获取每个文字宽度：
strokeWith =(width.toFloat() - paddingLeft.toFloat() - paddingRight.toFloat() - (count - 1) * itemPading) / count
文字居中需要计算出对应Y值：
val fontMetrics = paint.fontMetrics val textHeight = fontMetrics.bottom - fontMetrics.top val distance = textHeight / 2 - fontMetrics.bottom val baseline = height / 2f + distance
文字的X值则根据当前index和文字宽度以及各边距得出：
private fun getIndexOfX(index: Int): Float {
return paddingLeft.toFloat() + index * (itemPading + strokeWith) + 0.5f * strokeWith
}得到了位置，宽高接下来的步骤再简单不过了。使用drawText 绘制文字，使用drawRoundRect 绘制背景。这里有一个细节一定要注意，绘制背景一定要在绘制文字之前，否则背景会把文字给覆盖。
另外，还需要注意一点。如果onDraw方法中不注释掉超类方法，底部会多出一段输入的数字。其实很好理解，这是AppCompatEditText 自身绘制的数字，所以我们把它注释即可，包括光标也是一样。如果想要光标则需要自己在onDraw方法中绘制即可。
//隐藏自带光标
super.setCursorVisible(false)
override fun onDraw(canvas: Canvas) {
//不注释掉会显示在最底部
// super.onDraw(canvas)
......
}以上便是实现带边框的输入框的全部类型，希望对大家有所帮助！
到此这篇关于Android实现一个简易的带边输入框的文章就介绍到这了,更多相关Android实现输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！