实现效果
总的来说就是对输入框显示进行重绘
img.png
1.监听用户输入
TextField是Jetpack compose中获取用户输入内容的常用输入框。
在此我们只需要获取输入法输入内容就行，不需要外观，因此使用BasicTextField即可。
验证码码一般都是纯数字组成，通过KeyboardOptions 的keyboardType来限制输入内容为数字（类似于EditText 的inputType）
但是还需要隐藏输入回显的文本，因此使用Modifier.drawWithContent { }重新覆盖绘制，就能去掉了。
var content by remember { mutableStateOf("") }
BasicTextField(
value = content,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),//设置仅输入数字
onValueChange = {
content = it//保存用户输入的内容
},
modifier = Modifier
.drawWithContent { }//清除绘制内容
.matchParentSize()//填充至父布局大小
)
还需要响应点击调起输入法的效果，因此可以利用Box将BasicTextField覆盖在我们的重绘的控件上。用户点击的时候实际点击在BasicTextField上便能自动调起输入法。
Box {
//重新绘制的验证码输入框
BasicTextField(...
}
2.绘制验证码内容
接下来就是根据输入内容content进行重新绘制
验证码输入框的UI就是横着的一排矩形，使用一个Row完成，然后适当在中间加一些间距。
为了使得矩形框的样式更加灵活，可以将矩形框绘制通过Composable参数向上暴露。
Row(horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically) {
repeat(digits) {//根据矩形框数量绘制
if (it != 0) {
//在中间添加间距
Spacer(modifier = Modifier.width(horizontalMargin))
}
//获取当前框的文本
val text = content.getOrNull(it)?.toString() ?: ""
//是否正在输入的框
val focused = it == content.length
//绘制文本
itemScope(text, focused)
}
}
然后完成单个矩形框的绘制，使用Text将验证码文本绘制出来就行，由于没发现使Text文本垂直居中的Modifier，所以套上了一个Box。
@Composable
fun SimpleVerificationCodeItem(text: String, focused: Boolean) {
val borderColor = if (focused) Color.Gray else Color(0xeeeeeeee)
Box(
modifier = Modifier
.border(1.dp, borderColor)
.size(55.dp, 55.dp), contentAlignment = Alignment.Center
) {
Text(
text = text,
fontSize = 24.sp,
textAlign = TextAlign.Center,
maxLines = 1
)
}
}
完整代码
验证码输入框
/**
* @param text 文本内容
* @param focused 是否高亮当前输入框
*/
@Composable
fun SimpleVerificationCodeItem(text: String, focused: Boolean) {
val borderColor = if (focused) Color.Gray else Color(0xeeeeeeee)
Box(
modifier = Modifier
.border(1.dp, borderColor)
.size(55.dp, 55.dp), contentAlignment = Alignment.Center
) {
Text(
text = text,
fontSize = 24.sp,
textAlign = TextAlign.Center,
maxLines = 1
)
}
}
/**
* @param digits 验证码位数（框数量）
* @param horizontalMargin 水平间距
* @param inputCallback 输入回调
*/
@Composable
fun VerificationCodeField(
digits: Int,
horizontalMargin: Dp = 10.dp,
inputCallback: (content: String) -> Unit = {},
itemScope: @Composable (text: String, focused: Boolean) -> Unit
) {
var content by remember { mutableStateOf("") }
Box {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
//绘制框
repeat(digits) {
if (it != 0) {
//添加间距
Spacer(modifier = Modifier.width(horizontalMargin))
}
//获取当前框的文本
val text = content.getOrNull(it)?.toString() ?: ""
//是否正在输入的框
val focused = it == content.length
//绘制文本
itemScope(text, focused)
}
}
BasicTextField(value = content, onValueChange = {
content = it
inputCallback(it)
}, modifier = Modifier
.drawWithContent { }//清楚绘制内容
.matchParentSize())//填充至父布局大小
}
}
使用方法
VerificationCodeField(5){text,focused->
SimpleVerificationCodeItem(text,focused)
}
