/ 开源项目  

自定义View之数字键盘 (NumberKeyboardView)

在实际开发中,我们通常会遇到自定义键盘输入内容的情况,比如微信中的输入支付密码,验证码等场景,往往这些键盘都比较简单,通常是输入数字和小数点等内容,本篇文章将通过组合已有控件,打造一款通用的数字键盘 ⌨️

仓库地址:https://github.com/plain-dev/NumberKeyboardView

库清单🧾

首先列觉一下本控件所用到的库

  • RecyclerView

    数字键盘本体,承载键盘的按键的显示,响应输入等

  • BaseRecyclerViewAdapterHelper

    一个强大的RecyclerView适配器库,封装常用逻辑,让适配器更加简洁

效果演示 ⌨️

DEMO

实现过程

数字键盘View

一开始想起来做数字键盘的时候,第一个想到的是GridLayout,然后想到了GridView,前者可以很好的实现这种需求,但扩展性不高,后者做这种网格布局是再适合不过了,但现在有了RecyclerView则不需要GridView了,因为RecyclerView通过指定布局管理器,可以实现多种布局效果,这里我们就用到了GridLayoutMananger

这里我们继承RelativeLayout来承载此View,里面则是一个RecyclerView

1
2
3
4
5
6
7
8
9
class NumberKeyboardView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : RelativeLayout(context, attrs, defStyleAttr) {

......

}

布局也非常简单,仅一个RecyclerView

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rvKeyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fbfbfb" />

然后初始化我们的RecyclerView,做一些常规的配置,比如AdapterLayoutManager等,然后UI上Item之间还有线段分割,这里用到了自定义ItemDecoration,这是RecyclerView非常方便的一个特性,可以自定义Item的装饰器。

1
2
3
4
5
6
7
8
9
10
11
12
private fun initRv(context: Context) {
adapter = NumberKeyboardAdapter(keyValueList)
rvKeyboard.layoutManager = GridLayoutManager(context, 3)
val dividerItemDecoration = GridDividerItemDecoration.Builder(context)
.setShowLastLine(false)
.setHorizontalSpan(R.dimen.SIZE_1)
.setVerticalSpan(R.dimen.SIZE_1)
.setColor(Color.parseColor("#ebebeb"))
.build()
rvKeyboard.addItemDecoration(dividerItemDecoration)
rvKeyboard.adapter = adapter
}

适配器这里用到了第三方库BaseRecyclerViewAdapterHelper,结构很清晰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class NumberKeyboardAdapter internal constructor(data: List<Map<String, String>>?) :

BaseQuickAdapter<Map<String, String>, BaseViewHolder>(R.layout.item_number_keyboard, data) {

override fun convert(viewHolder: BaseViewHolder, item: Map<String, String>) {
val tvKey = viewHolder.getView<TextView>(R.id.tvKey)
val rlDel = viewHolder.getView<RelativeLayout>(R.id.rlDel)
val position = viewHolder.layoutPosition
if (position == Constant.KEYBOARD_DEL) {
rlDel.visibility = View.VISIBLE
tvKey.visibility = View.INVISIBLE
} else {
rlDel.visibility = View.INVISIBLE
tvKey.visibility = View.VISIBLE
tvKey.text = item[Constant.MAP_KEY_NAME]
}
}

}

Item的布局如下,一个显示文字,一个是删除键的图片,通过不同数据,来控制两者的显示和隐藏,比较简单粗暴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fbfbfb">

<TextView
android:id="@+id/tvKey"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:gravity="center"
android:textStyle="bold"
android:includeFontPadding="false"
android:textColor="#333333"
android:textSize="26sp" />

<RelativeLayout
android:id="@+id/rlDel"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_centerInParent="true">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/icon_keyboard_del" />

</RelativeLayout>

</RelativeLayout>

接下来就是RecyclerView的数据了,我们这里的按键有0-9小数点删除,直接一个List集合就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private fun initKeyValueList() {
if (null == keyValueList) {
keyValueList = ArrayList()
for (i in 1..12) {
val map = HashMap<String, String>()
when {
i < Constant.KEYBOARD_ZERO -> map[Constant.MAP_KEY_NAME] = i.toString()
i == Constant.KEYBOARD_ZERO -> map[Constant.MAP_KEY_NAME] = "."
i == Constant.KEYBOARD_DEL -> map[Constant.MAP_KEY_NAME] = 0.toString()
else -> map[Constant.MAP_KEY_NAME] = ""
}
keyValueList!!.add(map)
}
}
}

这样,键盘部分就差不多了,然后将此View添加到容器中就好了

1
2
val view = LayoutInflater.from(context).inflate(R.layout.layout_number_keyboard, this, false)
addView(view)

数字键盘帮助类

以上我们的键盘就可以正常显示了,但还没有真正的点击操作。这里我们封装一个键盘帮助类KeyboardHelper,在这里实现键盘的操作,并封装一些常用的方法

这里我们将本类设计为单例模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
companion object {

@Volatile
private var instance: KeyboardHelper? = null
get() {
if (field == null) {
field = KeyboardHelper()
}
return field
}

@Synchronized
fun get(): KeyboardHelper {
return instance!!
}
}

我们要想使用自定义的键盘,首先就要屏蔽掉系统键盘,一般常用的方法就是通过反射,这里封装一个方法,暴露给外部使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@SuppressLint("ObsoleteSdkInt")
fun banSystemKeyboard(context: Activity, editText: EditText) {
if (android.os.Build.VERSION.SDK_INT <= 10) {
editText.inputType = InputType.TYPE_NULL
} else {
context.window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN)
try {
val cls = EditText::class.java
val setShowSoftInputOnFocus: Method
setShowSoftInputOnFocus = cls.getMethod("setShowSoftInputOnFocus", Boolean::class.javaPrimitiveType!!)
setShowSoftInputOnFocus.isAccessible = true
setShowSoftInputOnFocus.invoke(editText, false)
} catch (e: Exception) {
e.printStackTrace()
}
}
}

既然是键盘,那它的使用方肯定是输入框EditText,这里我们给外部暴露一个bind方法,绑定两者,并提供一个接口,回调输入的内容给外部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
fun bind(
editText: EditText,
numberKeyboardView: NumberKeyboardView,
listener: OnKeyboardChangeListener
) {
editText.requestFocus()
editText.isSaveEnabled = false
valueList = numberKeyboardView.getKeyValueList()
val adapter = numberKeyboardView.adapter
if (null != adapter && !(null == valueList || valueList!!.isEmpty())) {
processKeyClick(editText, adapter)
observedEditText(editText, listener)
}
}

可以看到,方法里面主要调用了两个方法,processKeyClick是用来处理键盘点击的,observedEditText是用来观察EditText的,如果输入内容发生变化,则会通知外部刷新

首先看processKeyClick,这里就是为adapter设置点击事件监听,BaseRecyclerViewAdapterHelper为我们提供了很好的方法,直接调用即可

1
2
3
4
5
6
7
adapter.onItemClickListener =
BaseQuickAdapter.OnItemClickListener {
_,
_,
position ->
respondKeyClick(editText, position)
}

接下来就是对每一个键的处理,代码虽然长,但很好理解,主要就是拼接字符串、首位0和小数点的判断,如果光标不在末尾,则用到了插入删除方法,进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
private fun respondKeyClick(et: EditText, pos: Int) {
if (pos < 11 && pos != 9) { // click number 0 - 9
var amount = et.text.toString().trim { it <= ' ' }
amount += valueList!![pos][Constant.MAP_KEY_NAME]
val index = et.selectionStart
// cannot enter zero in the first place
if (pos == 10 && index == 0) {
return
}
if (index == amount.length - 1) {
et.setText(amount)
val ea = et.text
et.setSelection(ea.length)
} else {
val editable = et.text
editable.insert(index, valueList!![pos][Constant.MAP_KEY_NAME])
}
} else {
if (pos == 9) { // click dot
var amount = et.text.toString().trim { it <= ' ' }
if (TextUtils.isEmpty(amount)) {
return
}
val index = et.selectionStart
if (index == amount.length && !amount.contains(".")) {
amount += valueList!![pos][Constant.MAP_KEY_NAME]!!
et.setText(amount)
val ea = et.text
et.setSelection(ea.length)
} else if (index > 0 && !amount.contains(".")) {
val editable = et.text
editable.insert(index, valueList!![pos][Constant.MAP_KEY_NAME])
}
}
if (pos == 11) { // click delete
var amount = et.text.toString().trim { it <= ' ' }
if (amount.isNotEmpty()) {
val index = et.selectionStart
if (index == amount.length) {
amount = amount.substring(0, amount.length - 1)
et.setText(amount)
val ea = et.text
et.setSelection(ea.length)
} else {
if (index != 0) {
val editable = et.text
editable.delete(index - 1, index)
}
}
}
}
}
}

然后就是对输入内容的回调,这里用到了TextWatcher类,通过它就可以观察EditText输入框内容的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
private fun observedEditText(editText: EditText, listener: OnKeyboardChangeListener) {
if (null == watcher) {
watcher = object : TextWatcher {

override fun beforeTextChanged(
s: CharSequence,
start: Int,
count: Int,
after: Int
) {
//Empty
}

override fun onTextChanged(
s: CharSequence,
start: Int,
before: Int,
count: Int
) {
//Empty
}

override fun afterTextChanged(s: Editable) {
val inputVal = editText.text.toString()
val effectiveVal = perfectDecimal(inputVal, 3, 2)
if (effectiveVal != inputVal) {
editText.setText(effectiveVal)
val pos = editText.text.length
editText.setSelection(pos)
}
callBackInputResult(listener, effectiveVal)
}

}
}
editText.addTextChangedListener(watcher)
}

这里我们对输入的内容做一下限制,小数点前最多输入3位,小数点后最多输入2位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
private fun perfectDecimal(inputVal: String, maxBeforeDot: Int, maxDecimal: Int): String {
var inputVal = inputVal
if (inputVal.isEmpty()) return ""
if (inputVal[0] == '.') inputVal = "0$inputVal"
val max = inputVal.length
val rFinal = StringBuilder()
var after = false
var i = 0
var up = 0
var decimal = 0
var t: Char
while (i < max) {
t = inputVal[i]
if (t != '.' && !after) {
up++
if (up > maxBeforeDot) return rFinal.toString()
} else if (t == '.') {
after = true
} else {
decimal++
if (decimal > maxDecimal) return rFinal.toString()
}
rFinal.append(t)
i++
}
return rFinal.toString()
}

这样我们只需回调合法的输入内容就可以了,然后对回调的内容也做一下限制,如果两次输入内容一致,就不回调了,通过lastCallbackResult来记录一下

1
2
3
4
5
6
7
8
private fun callBackInputResult(listener: OnKeyboardChangeListener?, str: String) {
if (null != listener) {
if (str != lastCallbackResult) {
lastCallbackResult = str
listener.onTextChange(str)
}
}
}

使用方法

通过上面的封装,我们的数字键盘就算完工了,而且使用起来也很方便

使用数字键盘View

1
2
3
4
5
<top.i97.numberkeyboard.view.NumberKeyboardView
android:id="@+id/numberKeyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fbfbfb" />

通过KeyboardHelper帮助类,完成系统键盘的屏蔽以及EditTextNumberKeyboardView的绑定

1
2
3
4
5
6
helper.banSystemKeyboard(activity, editText)
helper.bind(editText, numberKeyboard, object : OnKeyboardChangeListener {
override fun onTextChange(text: String) {
inputContent = text
}
})

总结

通过上面的流程,可以感受到,开发一个简单的数字键盘还是很轻松的,借助自带的RecyclerView就可以轻松完成 ❤️

项目已提交Github,欢迎点我进入仓库查看

最后感谢大家的观看

done