Android自定义验证码输入框的方法实例

2024-09-28 06:36:36

实践过程

前面我们学完了EditText和TextView两个组件，但是，光学不练没意思。

所以今天我们趁热打铁，利用两个组件实现个自定义验证码输入框。

思路前瞻：

隐形EditText接收输入，显性TextView展示内容
时刻监听EditText回调更改内容
自定义RelativeLayout

布局代码：

<?xml version="1.0" encoding="utf-8"?><!--自定义验证码View-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F84F64"
    android:paddingTop="100dp">
    <!--线性布局-orientation="horizontal"水平方向-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />

        <TextView
            android: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" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />

        <TextView
            android: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" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />

        <TextView
            android: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" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />

        <TextView
            android: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" />

         <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />
    </LinearLayout>

    <EditText
        android: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 2022-01-26.
 *
 * @author akitaka
 * @filename VerificationCodeViewJava
 * @describe 自定义验证码view-Java代码
 * @email 960576866@qq.com
 */
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() {

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public 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() {
            @Override
            public 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 2022-01-26.
 * @author akitaka
 * @filename VerificationCodeViewKotlin
 * @describe 自定义验证码view-Kotlin代码
 * @email 960576866@qq.com
 */
class VerificationCodeViewKotlin : RelativeLayout {
    private var editText: EditText? = null
    private 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="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <cn.appstudy.customView.VerificationCodeViewJava
        android:layout_width="match_parent"
        android:visibility="gone"
        android:layout_height="match_parent" />

    <!-- 或者-->
    <cn.appstudy.customView.VerificationCodeViewKotlin
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

总结

刚学Android的朋友可能又疑惑了，里面涉及了RelativeLayout和自定义View的知识。没错，小空几种验证码的实现方案特意选的这个，这样我们就引出了下一篇文章布局容器的知识：RelativeLayout（相对布局容器）和LinearLayout（线性布局容器）

当然了，设计千奇百怪。上面只是普通的实现，还做过下面俩功能需求

自定义验证码输入，自定义输入键盘的-不推荐

直接包含了输入按键写到整个页面UI里，禁止软（小）键盘弹出的-较推荐

但不管什么需求，用的是EditText或TextView

都逃脱不了EditText的【addTextChangedListener】、【InputFilter】、【android:inputType】几个知识点以及TextView的基本属性应用。

更多需求的创意解决方案就靠大家多想想了，有时候基本的技术解决困难的需求反而更轻松快捷。

到此这篇关于Android自定义验证码输入框的文章就介绍到这了,更多相关Android自定义验证码输入框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Android仿滴滴出行验证码输入框功能实例代码

最近公司项目中有一个类似滴滴出行填写验证码的弹框,下面是我撸出来的效果: 中间的那个输入密码的6个框框其实就是用shape画的背景,通过监听EditText获取焦点来改变背景,废话少说,直接上代码吧. 2.效果实现代码内容比较简单,所以大家可以直接看代码 VerificationCodeInput.java /** * @author hydCoder * @date 2017/9/22 14:39 * @desc 输入验证码的自定义view * @email hyd_coder@163.co
Android 自定义验证码输入框的实例代码(支持粘贴连续性)

需求 1.能自定义输入框个数和样式 2.支持长按粘贴或剪切板内容自动填充(粘贴连续性) 其中第2点是最为重要的,正是其他人没有这点,逼得自己弄一个示例别人的示例: 粘贴居然不支持连续性,只能粘贴第一个字符,所以用的有点难受自己的示例: 原理大致是Edittext + n* TextView,然后设置edittext字体跟背景颜色都为透明,隐藏光标 Edittext:监听edittext每次输入一个字符就赋值到对应的TextView上,然后在清空自己下划线:在TextView下面添加Vi
Android实现常见的验证码输入框实例代码

前言验证码输入框是很多APP必不可少的组件,之前在重构注册登录页面的时候,重新设计了UI,所以不能再简单的用EditText来做了,所以这篇文章将分享一下如何实现一个常见的验证码输入框.下面话不多说了,来一起看看详细的介绍吧. 正文先搂一眼效果吧不要把注意力都放在头顶的那一抹绿上,重点在输入框,可能大多数APP里都是采用6个方框的UI效果,我这里是按照我们设计的要求,用6根横线来划出6个数字的位置.一开始我想的是直接用6个TextView,然后传递焦点的做法,但是发现实现起来有一定的难度.
Android自定义View验证码输入框

本文实例为大家分享了Android自定义View验证码输入框的具体代码,供大家参考,具体内容如下验证码输入框 1.先看下样式 2.直接上代码 public class MyVcode extends AppCompatEditText { private int mFigures = 0;// 验证码个数 private int mCodeMargin = 0;// 验证码之间的间距 private int mSelectColor = 0;// 选中框的颜色 private int mNor
Android自定义控件通用验证码输入框的实现

需求 4位验证码输入框: 效果图: 1. 输入框一行可输入4位数字类型的验证码: 2. 4位数字之间有间隔(包括底线): 3. 输入框不允许有光标: 4. 底线根据输入位置显示高亮(蓝色): 6. 输入完成,回调结果,输入过程中,也进行回调: 分析这种效果,很难直接在Edittext上处理: -- 输入框均分4等份,还要有间隔: -- 更难处理的是Edittext输入框禁止光标,那么,没有光标,我们如何调起虚拟键盘输入数据? -- 等... 与其在一个控件上折腾,这么难受,不如自定义一个控件,
Android实现自定义验证码输入框效果(实例代码)

这里提一下,这个当时也是在网上看到一个博主写的代码改了下用在我么项目中的验证码输入框.博主的地址不记得了这里只能顺带标注一下... 效果图如下: 就是这个酱紫直入主题,代码如下: xml布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi
Android自定义验证码输入框的方法实例

目录实践过程总结实践过程前面我们学完了EditText和TextView两个组件,但是,光学不练没意思. 所以今天我们趁热打铁,利用两个组件实现个自定义验证码输入框. 思路前瞻: 隐形EditText接收输入,显性TextView展示内容时刻监听EditText回调更改内容自定义RelativeLayout 布局代码: <?xml version="1.0" encoding="utf-8"?>
Android自定义View的实现方法实例详解

一.自绘控件下面我们准备来自定义一个计数器View,这个View可以响应用户的点击事件,并自动记录一共点击了多少次.新建一个CounterView继承自View,代码如下所示: 可以看到,首先我们在CounterView的构造函数中初始化了一些数据,并给这个View的本身注册了点击事件,这样当CounterView被点击的时候,onClick()方法就会得到调用.而onClick()方法中的逻辑就更加简单了,只是对mCount这个计数器加1,然后调用invalidate()方法.通过 Andr
Android自定义柱状图表的方法实例

前言本文将通过示例代码介绍如何自定义简单的直方图表,此图表并非常见的直方图表,而是可以分组的.此文不会过多涉及原理,比较简单,示例图片如下(gif图片没有制作好,有闪烁,请见谅): 对于该示例的代码实现,其实重点在于坐标轴.文字.直方图的位置控制,需要随滑动距离而动态更新.注意事项会在示例代码中标注.下面贴出示例代码 public class MultiGroupHistogramView extends View { private int width; private int height
Qt实现自定义验证码输入框控件的方法

前言本文实现了自定义的验证码输入框控件.控件包括图标.输入框.获取验证码按钮.验证码获取倒计时标签.支持鼠标点击获取验证码按钮后开始显示倒计时功能,倒计时为0时,才可以在此点击获取验证码按钮.效果如图: 主要的编程思想还是实现自定义控件的封装性和共用性. UI布局: 控件1:QWidget,实现整个控件的封装,这个控件使用水平布局,实现控件的水平摆放,同时,当其中一个控件隐藏时,位置会重新更新,实现在控件的后面只显示获取验证码和倒计时两个控件中的一个. 控件2:QLabel,实现展示盾牌图标.
Android自定义九宫格输入框

本文实例为大家分享了Android自定义九宫格输入框的具体代码,供大家参考,具体内容如下效果实现绘制宫格分割线这里我们用一个RectF类型的数组来装载数据.在onSizeChanged方法中获取到控件尺寸,经过计算,将81个位置合适的矩形保存到数组中. 绘制点击效果在onTouchEvent方法中监听手指离开事件,当手指离开,获取到当前点击区域的RectF,并将状态同样保存到一个数组中. 绘制输入内容输入内容利用onTextChanged方法获取,同样保存到一个数组中. PS 控件中
uniapp自定义验证码输入框并隐藏光标

目录一. 前言二. 实现思路三. 代码实现四. 过程中遇到的问题一. 前言先看下使用场景效果图: 点击输入框唤起键盘,蓝框就相当于input的光标,验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示,持续1s,然后清空数据,恢复原边框样式: 5位验证码输入完毕,点击页面其他位置,隐藏键盘:这时如果发现验证码有误,再次点击输入框又唤起键盘,也能正常删除数字(这里其实做的时候遇到了bug,再次聚焦不能删除错误数字,下文会讲到). 二. 实现思路具体实现思路: 将input标签
Android自定义水波纹动画Layout实例代码

话不多说,我们先来看看效果: Hi前辈搜索预览这一张是<Hi前辈>的搜索预览图,你可以在这里下载这个APP查看更多效果: http://www.wandoujia.com/apps/com.superlity.hiqianbei LSearchView 这是一个MD风格的搜索框,集成了ripple动画以及search时的loading,使用很简单,如果你也需要这样的搜索控件不妨来试试:https://github.com/onlynight/LSearchView RippleEverywh
Android自定义dialog简单实现方法

本文实例讲述了Android自定义dialog简单实现方法.分享给大家供大家参考,具体如下: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.function_music); // 实例化新的窗口 Window w = getWindow(); // 获取默认显示数据 Display display

Android自定义验证码输入框的方法实例

目录

实践过程

总结

相关推荐

随机推荐