Android:实现带边框的输入框

如今市面上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)

          ......

}

以上便是实现带边框的输入框的全部类型，希望对大家有所帮助！