如今市面上APP的输入框能够说是千奇百怪，不搞点把戏出来形似代表格式没翻开。还在运用系统自带的输入框的兄弟能够停下脚步，哥带你完成一个简易的带边框输入框。

话不多说，直接上图：

Android:实现带边框的输入框

要完成这个作用，不得不再回顾下自定义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)
          ......
}

以上就是完成带边框的输入框的全部类型，期望对大家有所协助！