前言
最近项目中有支付功能，用户输入密码时要类似微信支付密码输入框的样式，本想直接copy网上的，但设计姐姐总是对样式挑三拣四，抽空自己自定义了一个，无奈之下抽空自定义了个，并把它贴到GitHub上供网友们参考。
示例
废话不多说，先看效果图。
number-input-video.gif
实现
BorderTextView
首先，实现这种效果我用多个TextView控件组合，为什么是TextView呢，因为我不仅需要文字大小颜色等可以定制，还要文字的背景色，背景框等可以变化。但系统的TextView设置背景过于单一，假如我要带圆角的背景，甚至是圆角可以变化的背景，这就麻烦了。因此我继承TextView自定义了BorderTextView。
BorderTextView控件主要是文字的背景色可变化，有边框和填充两种背景。
边框的粗细、颜色、圆角均可定制。
填充背景时，填充颜色，背景圆角可定制。
除此之外，BorderTextView有明文显示和密文显示两种模式。考虑过设置transformationMethod属性来将TextView显示成"●"，但有时候设置的"●"太小了，而且颜色又单一，因此我重写了TextView的setBackgroundColor方法，在文字的中心化了个实心圈覆盖文字，同时"●"的颜色大小均可变化。
核心代码如下
override fun onDraw(canvas: Canvas) {
mStrokePaint.isAntiAlias = true
mStrokePaint.strokeWidth = strokeWidth.toFloat()
mStrokePaint.color = strokeColor
mStrokePaint.style = if (isFill) Paint.Style.FILL else Paint.Style.STROKE
mStrokePaint.strokeCap = Paint.Cap.ROUND
//解决canvas.drawRoundRect时，四个圆角线较粗问题
if (rectF == null) {
val d = strokeWidth / 2
rectF = RectF(d.toFloat(), d.toFloat(), (measuredWidth - d).toFloat(), (measuredHeight - d).toFloat())
}
if (mBgPaint != null) {
canvas.drawRoundRect(rectF!!, cornerRadius.toFloat(), cornerRadius.toFloat(), mBgPaint!!)
}
canvas.drawRoundRect(rectF!!, cornerRadius.toFloat(), cornerRadius.toFloat(), mStrokePaint)
if (mIsPassWordMode && text.isNotEmpty()) {
mDotPaint.style = Paint.Style.FILL
mDotPaint.color = textColors.defaultColor
val xy = measuredWidth / 2.toFloat()
canvas.drawCircle(xy, xy, textSize / 2, mDotPaint)
}
super.onDraw(canvas)
}
EditText
EditText用于监听用户输入的数字，将其的背景设置成透明，再设置 isCursorVisible = false、inputType = InputType.TYPE_CLASS_NUMBER 属性。同时，用户输入的时候需要拦截输入内容，再将内容显示到BorderTextView上。监听用户键盘的KeyEvent.KEYCODE_DEL事件用户处理输入内容的删除
搞定BorderTextView和EditText后就简单了，用List集合存储TextViews，创建LineaLayout将N个TextView添加过去，调整其位置就ok了。
/**
* 初始化EditText
*/
private fun initEditText() {
mEditText = EditText(context)
mEditText.let {
it.setBackgroundColor(Color.TRANSPARENT)
it.isFocusable = true
it.isCursorVisible = false
it.inputType = InputType.TYPE_CLASS_NUMBER
}
}
/**
* 监听删除键
**/
mEditText.setOnKeyListener { v, keyCode, event ->
if (keyCode == KeyEvent.KEYCODE_DEL && event.action == KeyEvent.ACTION_DOWN) {
if (mInputSb.isNotEmpty()) {
mInputSb.delete(mInputSb.length - 1, mInputSb.length)
mTextViews[mInputSb.length].text = ""
return@setOnKeyListener true
}
}
return@setOnKeyListener false
}
自定义属性
name
说明
format
默认值
niv_text_size_sp
输入框字体大小
integer
16
niv_text_color
输入框字体颜色
color
#333333
niv_text_divider
输入框间隔
dimension
5
niv_text_width
输入框宽度(width=height)
dimension
40
niv_border_width
输入框边框宽度
dimension
2
niv_border_color
输入边框颜色
color
#333333
niv_border_radius
输入框圆角角度
dimension
4
niv_is_fill
是否填充输入框
boolean
false
niv_count
输入框个数(最大为10)
integer
6
niv_is_pw_mode
输入数字是否用点代替
boolean
false
可用方法
method_name
description
return type
setInputCompleteListener(inputCompleteListener: InputCompleteListener)
输入完成时监听
Unit
使用示例
上示例图中xml代码如下
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingTop="20dp"
tools:context="com.neworin.sample.MainActivity">
android:id="@+id/sample_niv1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:niv_count="4"
app:niv_is_fill="false"
app:niv_text_size_sp="18"/>
android:id="@+id/sample_niv2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:niv_border_color="@color/colorPrimaryDark"
app:niv_border_radius="0dp"
app:niv_count="5"
app:niv_text_color="@color/color_red"/>
android:id="@+id/sample_niv3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:niv_border_color="@color/input_layout_bg"
app:niv_border_radius="0dp"
app:niv_count="6"
app:niv_is_fill="true"
app:niv_text_size_sp="20"/>
android:id="@+id/sample_niv4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:niv_count="6"
app:niv_is_pw_mode="true"
app:niv_text_color="@color/colorPrimary"
app:niv_text_size_sp="18"/>
效果图
效果图
