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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持海外IDC网。
【本文由:香港云服务器http://www.558cloud.com提供,感谢】