本文约8.2千字，新手阅读需要9分钟，复习需要4分钟【收藏随时查阅不再迷路】
👉关于作者
众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎私我，交流群让学习不再孤单。
👉前提
这是小空坚持写的Android新手向系列，欢迎品尝。
大佬（×）
新手（√）
👉实践过程
😜思路和知识点
前面我们学完了EditText和TextView两个组件，但是，光学不练没意思。
所以今天我们趁热打铁，利用两个组件实现个自定义验证码输入框。
思路前瞻：
隐形EditText接收输入，显性TextView展示内容时刻监听EditText回调更改内容自定义RelativeLayout
布局代码：
<?xml version="1.0" encoding="utf-8"?><!--自定义验证码View--><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F84F64"android:paddingTop="100dp"><!--线性布局-orientation="horizontal"水平方向--><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"><Viewandroid:layout_width="0dp"android:layout_height="1dp"android:layout_weight="1" /><TextViewandroid:id="@+id/txtCode1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/edittext_kuang"android:gravity="center"android:textColor="#ffffff"android:textSize="26sp" /><Viewandroid:layout_width="0dp"android:layout_height="1dp"android:layout_weight="1" /><TextViewandroid:id="@+id/txtCode2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/edittext_kuang"android:gravity="center"android:textColor="#ffffff"android:textSize="26sp" /><Viewandroid:layout_width="0dp"android:layout_height="1dp"android:layout_weight="1" /><TextViewandroid:id="@+id/txtCode3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/edittext_kuang"android:gravity="center"android:textColor="#ffffff"android:textSize="26sp" /><Viewandroid:layout_width="0dp"android:layout_height="1dp"android:layout_weight="1" /><TextViewandroid:id="@+id/txtCode4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/edittext_kuang"android:gravity="center"android:textColor="#ffffff"android:textSize="26sp" /><Viewandroid:layout_width="0dp"android:layout_height="1dp"android:layout_weight="1" /></LinearLayout><EditTextandroid:id="@+id/editCode"android:layout_width="match_parent"android:layout_height="50dp"android:background="@android:color/transparent"android:inputType="number" /></RelativeLayout>
自定义View代码
/*** Created by akitaka on -01-26.** @author akitaka* @filename VerificationCodeViewJava* @describe 自定义验证码view-Java代码* @email 960576866@*/public class VerificationCodeViewJava extends RelativeLayout {private EditText editText;private List<TextView> textViewList = new ArrayList<>();private StringBuffer stringBuffer = new StringBuffer();public VerificationCodeViewJava(Context context, AttributeSet attrs) {this(context, attrs, 0);}public VerificationCodeViewJava(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);//添加布局内容View.inflate(context, R.layout.view_verification_code, this);editText = findViewById(R.id.editCode);textViewList.add(findViewById(R.id.txtCode1));textViewList.add(findViewById(R.id.txtCode2));textViewList.add(findViewById(R.id.txtCode3));textViewList.add(findViewById(R.id.txtCode4));editText.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void afterTextChanged(Editable s) {//如果有字符输入时才进行操作if (!s.toString().equals("")) {//我们限制了4个验证码if (stringBuffer.length() > 3) {editText.setText("");return;} else {stringBuffer.append(s);//因为editText是辅助的，根本字符串是stringBuffer，所以将EditText置空editText.setText("");//现在很多App都是输入完毕后自动进入下一步逻辑，所以咱们一般都是在这监听，完成后进行回调业务即可if (stringBuffer.length() == 4) {//验证码输入完毕了，自动进行验证逻辑}}for (int i = 0; i < stringBuffer.length(); i++) {textViewList.get(i).setText(stringBuffer.charAt(i) + "");}}}});//设置删除按键的监听editText.setOnKeyListener(new OnKeyListener() {@Overridepublic boolean onKey(View v, int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {if (stringBuffer.length() > 0) {//删除字符stringBuffer.delete(stringBuffer.length() - 1, stringBuffer.length());//将TextView显示内容置空textViewList.get(stringBuffer.length()).setText("");}return true;}return false;}});}
/*** Created by akitaka on -01-26.* @author akitaka* @filename VerificationCodeViewKotlin* @describe 自定义验证码view-Kotlin代码* @email 960576866@*/class VerificationCodeViewKotlin : RelativeLayout {private var editText: EditText? = nullprivate val textViewList: MutableList<TextView> = ArrayList()private val stringBuffer = StringBuffer()constructor(context: Context?) : this(context, null)constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs, 0)constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)init {//添加布局内容View.inflate(context, R.layout.view_verification_code, this)editText = findViewById(R.id.editCode)textViewList.add(findViewById(R.id.txtCode1))textViewList.add(findViewById(R.id.txtCode2))textViewList.add(findViewById(R.id.txtCode3))textViewList.add(findViewById(R.id.txtCode4))editText!!.addTextChangedListener(object : TextWatcher {override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}override fun afterTextChanged(s: Editable) {//如果有字符输入时才进行操作if (s.toString() != "") {//我们限制了4个验证码if (stringBuffer.length > 3) {editText!!.setText("")return} else {stringBuffer.append(s)//因为editText是辅助的，根本字符串是stringBuffer，所以将EditText置空editText!!.setText("")//现在很多App都是输入完毕后自动进入下一步逻辑，所以咱们一般都是在这监听，完成后进行回调业务即可if (stringBuffer.length == 4) {//验证码输入完毕了，自动进行验证逻辑}}for (i in 0 until stringBuffer.length) {textViewList[i].text = stringBuffer[i].toString() + ""}}}})//设置删除按键的监听editText!!.setOnKeyListener(OnKeyListener {v, keyCode, event ->if (keyCode == KeyEvent.KEYCODE_DEL && event.action == KeyEvent.ACTION_DOWN) {if (stringBuffer.length > 0) {//删除字符stringBuffer.delete(stringBuffer.length - 1, stringBuffer.length)//将TextView显示内容置空textViewList[stringBuffer.length].text = ""}return@OnKeyListener true}false})}}
直接在目标Activity（页面）布局中使用即可
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><cn.appstudy.customView.VerificationCodeViewJavaandroid:layout_width="match_parent"android:visibility="gone"android:layout_height="match_parent" /><!-- 或者--><cn.appstudy.customView.VerificationCodeViewKotlinandroid:layout_width="match_parent"android:layout_height="match_parent" /></RelativeLayout>
😜总结
刚学Android的朋友可能又疑惑了，里面涉及了RelativeLayout和自定义View的知识。没错，小空几种验证码的实现方案特意选的这个，这样我们就引出了下一篇文章布局容器的知识：RelativeLayout（相对布局容器）和LinearLayout（线性布局容器）
当然了，设计千奇百怪。上面只是普通的实现，还做过下面俩功能需求
自定义验证码输入，自定义输入键盘的-不推荐
直接包含了输入按键写到整个页面UI里，禁止软（小）键盘弹出的-较推荐
但不管什么需求，用的是EditText或TextView
都逃脱不了EditText的【addTextChangedListener】、【InputFilter】、【android:inputType】几个知识点以及TextView的基本属性应用。
更多需求的创意解决方案就靠大家多想想了，有时候基本的技术解决困难的需求反而更轻松快捷。
👉其他
📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima./
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。
温馨提示：点击下方卡片获取更多意想不到的资源。
