Android自定义view实现TextView方形输入框
本文实例为大家分享了Android自定义view实现TextView方形输入框的具体代码，供大家参考，具体内容如下
先奉上最终效果图
实现思路分析：
1、 使用一个LinearLayout用来填充每一个小方格，通过动态添加，实现出需要数量的输入框
2、 在LinearLayout上覆盖一层大小和LinearLayout大小完全一致的EditText，用来接口输入信息，设置EditText输入背景和文字为透明，并设置不展示光标，
3、 监听EditText的内容变化，和LinearLayout的内容绑定，实现每次输入都由LinearLayout的子布局展示出来
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:id="@+id/rvContentList"
android:gravity="center"
android:showDividers="middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/inputReal"
android:inputType="number"
android:background="@android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/transparent"/>
</RelativeLayout>
在代码中动态创建LinearLayout子布局填充，并绑定监听
private fun initContainer() {
//动态设置EditText的大小
inputReal = findViewById(R.id.inputReal)
rvContentList = findViewById(R.id.rvContentList)
inputReal.width = (dividerDrawable?.minimumWidth ?: 0 * (verifyCodeLen - 1)) + inputBoxSize * verifyCodeLen
inputReal.height = inputBoxSize
inputReal.setTextSize(TypedValue.COMPLEX_UNIT_PX, inputTextSize * 1.0F)
//禁用光标
inputReal.isCursorVisible = false
inputReal.filters = arrayOf(InputFilter.LengthFilter(verifyCodeLen))
inputTextView.clear()
//动态添加LinearLayout之间的分割线
dividerDrawable?.let {
it.setBounds(0, 0, it.minimumWidth, it.minimumHeight)
rvContentList.dividerDrawable = it
}
for (i in 0 until verifyCodeLen) {
val textView = TextView(context)
textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, inputTextSize * 1.0F)
textView.width = inputBoxSize
textView.height = inputBoxSize
textView.gravity = Gravity.CENTER
textView.isFocusable = false
textView.textColor = inputTextColor
textView.backgroundResource = itemSelector
inputTextView.add(textView)
}
inputTextView.forEach {
rvContentList.addView(it)
}
}
inputReal.addTextChangedListener(object : TextWatcher {
override fun afterTextChanged(p0: Editable?) {
setVerifyCodeInputValue(p0.toString())
if (p0.toString().length == verifyCodeLen) {
onCompleteListener?.onComplete(p0.toString())
}
}
override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
}
override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
}
})
private fun setVerifyCodeInputValue(inputText: String) {
inputTextView.forEach {
it.text = ""
it.isSelected = false
}
inputTextView.forEachIndexed { index, textView ->
if (inputText.length > index) {
textView.isSelected = true
textView.text = inputText[index].toString()
}
}
}
核心代码就到这里了，为了方便扩展，可以在加入自定义属性，动态设置扩展效果，这里就不说明了，直接看代码即可
最后放上完整源代码：
package org.fireking.ap.custom.viewgroup.view
import android.content.Context
import android.content.res.TypedArray
import android.graphics.Color
import android.graphics.drawable.Drawable
import android.text.Editable
import android.text.InputFilter
import android.text.Spanned
import android.text.TextWatcher
import android.util.AttributeSet
import android.util.Log
import android.util.TypedValue
import android.view.Gravity
import android.view.LayoutInflater
import android.widget.*
import androidx.core.view.forEach
import androidx.recyclerview.widget.RecyclerView
import org.fireking.ap.R
import org.jetbrains.anko.backgroundColor
import org.jetbrains.anko.backgroundResource
import org.jetbrains.anko.textColor
class VerifyCodeInputLayout(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
RelativeLayout(context, attrs, defStyleAttr) {
private lateinit var inputReal: EditText
private lateinit var rvContentList: LinearLayout
private var onCompleteListener: OnCompleteListener? = null
private var verifyCodeLen = 0
private var inputTextSize: Int = 0
private var inputTextColor: Int = 0
private var inputBoxSize: Int = 0
private var verifyInputLayoutHeight = 0
private var dividerDrawable: Drawable? = null
private var itemSelector: Int = R.drawable.verify_code_text_selector
private var inputTextView = ArrayList<TextView>(4)
constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0) {
LayoutInflater.from(context).inflate(R.layout.verify_code_input_layout, this, true)
//设置默认值
verifyCodeLen = 4
inputTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16.0F, resources.displayMetrics).toInt()
inputTextColor = Color.parseColor("#FF333333")
inputBoxSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50F, resources.displayMetrics).toInt()
dividerDrawable = context.resources.getDrawable(R.drawable.linearlayout_divider)
//获取自定义属性值
val a = context.obtainStyledAttributes(attrs, R.styleable.VerifyCodeInputLayout)
if (a.hasValue(R.styleable.VerifyCodeInputLayout_textSize)) {
inputTextSize = a.getDimensionPixelSize(R.styleable.VerifyCodeInputLayout_textSize, inputTextSize)
}
if (a.hasValue(R.styleable.VerifyCodeInputLayout_textColor)) {
inputTextColor = a.getColor(R.styleable.VerifyCodeInputLayout_textColor, Color.parseColor("#FF333333"))
}
if (a.hasValue(R.styleable.VerifyCodeInputLayout_inputBoxSize)) {
inputBoxSize = a.getDimensionPixelSize(
R.styleable.VerifyCodeInputLayout_inputBoxSize,
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 44F, resources.displayMetrics).toInt()
)
}
if (a.hasValue(R.styleable.VerifyCodeInputLayout_dividerDrawable)) {
dividerDrawable = a.getDrawable(R.styleable.VerifyCodeInputLayout_dividerDrawable)
}
if (a.hasValue(R.styleable.VerifyCodeInputLayout_itemSelector)) {
itemSelector = a.getResourceId(R.styleable.VerifyCodeInputLayout_itemSelector, itemSelector)
}
if (a.hasValue(R.styleable.VerifyCodeInputLayout_maxLength)) {
verifyCodeLen = a.getInt(R.styleable.VerifyCodeInputLayout_maxLength, 4)
}
a.recycle()
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
verifyInputLayoutHeight = measuredHeight
}
fun setOnCompleteListener(onCompleteListener: OnCompleteListener) {
this.onCompleteListener = onCompleteListener
}
override fun onFinishInflate() {
super.onFinishInflate()
initContainer()
initListener()
}
private fun initListener() {
inputReal.addTextChangedListener(object : TextWatcher {
override fun afterTextChanged(p0: Editable?) {
setVerifyCodeInputValue(p0.toString())
if (p0.toString().length == verifyCodeLen) {
onCompleteListener?.onComplete(p0.toString())
}
}
override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
}
override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
}
})
}
private fun setVerifyCodeInputValue(inputText: String) {
inputTextView.forEach {
it.text = ""
it.isSelected = false
}
inputTextView.forEachIndexed { index, textView ->
if (inputText.length > index) {
textView.isSelected = true
textView.text = inputText[index].toString()
}
}
}
private fun initContainer() {
inputReal = findViewById(R.id.inputReal)
rvContentList = findViewById(R.id.rvContentList)
inputReal.width = (dividerDrawable?.minimumWidth ?: 0 * (verifyCodeLen - 1)) + inputBoxSize * verifyCodeLen
inputReal.height = inputBoxSize
inputReal.setTextSize(TypedValue.COMPLEX_UNIT_PX, inputTextSize * 1.0F)
inputReal.isCursorVisible = false
inputReal.filters = arrayOf(InputFilter.LengthFilter(verifyCodeLen))
inputTextView.clear()
dividerDrawable?.let {
it.setBounds(0, 0, it.minimumWidth, it.minimumHeight)
rvContentList.dividerDrawable = it
}
for (i in 0 until verifyCodeLen) {
val textView = TextView(context)
textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, inputTextSize * 1.0F)
textView.width = inputBoxSize
textView.height = inputBoxSize
textView.gravity = Gravity.CENTER
textView.isFocusable = false
textView.textColor = inputTextColor
textView.backgroundResource = itemSelector
inputTextView.add(textView)
}
inputTextView.forEach {
rvContentList.addView(it)
}
}
interface OnCompleteListener {
fun onComplete(content: String)
}
}
自定义属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="VerifyCodeInputLayout">
<attr name="textSize" format="dimension"/>
<attr name="textColor" format="color"/>
<attr name="inputBoxSize" format="dimension"/>
<attr name="dividerDrawable" format="reference"/>
<attr name="maxLength" format="integer"/>
<attr name="itemSelector" format="reference"/>
</declare-styleable>
</resources>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android高级xml布局之输入框EditText设计
今天给大家介绍一下如何实现一款简约时尚的安卓登陆界面.大家先看一下效果图 当用户输入时动态出现删除按钮 现在先罗列一下技术点: 1.如何使用圆角输入框和按钮背景 2.如何实现"手机号"."密码"后面的竖线 3.如何嵌套输入框的布局 4.如何监听输入框的输入事件及删除按钮的动态显示隐藏 1.如何使用圆角输入框和按钮背景 安卓为开发者准备了shape这个xml标签,用于自定义一些形状. 那么我就来定义一个白色的输入框背景.代码如下: <!-- 形状 -->
-
Android实现常见的验证码输入框实例代码
前言 验证码输入框是很多APP必不可少的组件,之前在重构注册登录页面的时候,重新设计了UI,所以不能再简单的用EditText来做了,所以这篇文章将分享一下如何实现一个常见的验证码输入框.下面话不多说了,来一起看看详细的介绍吧. 正文 先搂一眼效果吧 不要把注意力都放在头顶的那一抹绿上,重点在输入框,可能大多数APP里都是采用6个方框的UI效果,我这里是按照我们设计的要求,用6根横线来划出6个数字的位置.一开始我想的是直接用6个TextView,然后传递焦点的做法,但是发现实现起来有一定的难度.
-
5种方法完美解决android软键盘挡住输入框方法详解
在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好.像微信则直接把登录按钮做在输入框的上面,但有很多情况下,这经常满足不了需求.同时如果输入框特别多的情况下,点击输入时,当前输入框没被挡住,但是当前输入框下面的输入框却无法获取焦点,必须先把键盘收起,再去获取下面输入框焦点,这样用户体验也非常不好,那有什么办法呢? 系统的adjustResize和adjustPan有什么区别,他们使
-
Android实现动态显示或隐藏密码输入框的内容
本文实例展示了Android实现动态显示或隐藏密码输入框内容的方法,分享给大家供大家参考之用.具体方法如下: 该功能可通过设置EditText的setTransformationMethod()方法来实现隐藏密码或者显示密码. 示例代码如下: private Button mBtnPassword; private EditText mEtPassword; private boolean mbDisplayFlg = false; /** Called when the activity is
-
解决Android软键盘弹出覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,
-
Android文本输入框(EditText)输入密码时显示与隐藏
代码很简单,这里就不多废话了. 复制代码 代码如下: package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; import android.text.Spannable; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Passw
-
Android 自定义密码输入框实现代码
效果 自定义密码输入框,项目的一个界面需求,我把这个自定义的输入框提取出来作为这次内容的题目. 输入前: 输入后: 输入1个字符就红一个圈圈,很简单的效果. 思路 1.自定义EditText. 2.背景为一个外圆环加内实心圆. 3.edittext的长度变化时候重新绘制背景或者红色环位置. 关键代码 代码其实也很简单,顺手拿资源的请到文末. 1.画背景 /** * 绘制背景外圆 */ private void drawOutRing(Canvas canvas) { mPaint.setColo
-
Android仿支付宝自定义密码输入框及安全键盘(密码键盘)
0.前言 之前做过的项目里有运用到一个支付场景:用户办理业务时需要输入交易密码,并且可根据平台下发的支付方式进行选择.这与支付宝的密码输入方式十分相似,如果使用Android系统或者第三方软件的键盘,会有密码泄露的风险.因此,大多数的应用软件使用的是自定义的密码输入框及安全键盘. 由于密码输入方式需要实现一个从底部弹出的效果,因此总体上决定采用BottomSheetDialog来进行封装,同时为了提高安全性,还应该随机生成键盘上的数字,界面如下图所示: 首先新建一个PasswordInpu
-
Android软键盘挡住输入框的终极解决方案
前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即
-
Android UI设计系列之自定义EditText实现带清除功能的输入框(3)
最近公司的产品在陆续做升级,上级领导给的任务是优化代码结构以及项目架构,力争把项目写的精巧简练,于是我们满工程找冗余... 我们都知道每一个项目基本上都是有登陆页的,在登陆页中肯定是少不了输入框了,当我们在输入框中输入数据后如果输入的内容不正确或者是错误的或者是想重新输入,如果嗯键盘上的删除键就得一个一个的去删除,这时候我们或许就想要是能有一个标记当点击了这个标记能把我们刚刚输入的内容清空就好了.这样可以极大的提升用户体验,就拿QQ的登陆来说吧,效果如下: 当点击密码框右侧的小×图标时输入的内容