『Android』一个简单易用的验证码输入框（6位）

---

spaceX.jpg

  之前开发中验证码输入的时候，找了各种各样的验证码输入框，各种奇葩= =，最近抽空写了一个，正好熟悉一下自定义控件。

github 地址：https://github.com/ymwm-lxl/VerificationCodeEditText

一、实现思路：

之前在看其他人的之前方式，大概有以下几类：

• 监听键盘输入内容，将内容存入 StringBuffer 或者集合中，界面上使用多个 TextView 展示数据。
• 前边放置多个 EditText ,通过控制切换，实现验证码输入。
• 后边使用一个 EditText 接收输入内容，在页面上放置多个 TextView 展示输入框中输入的内容。

  我使用的就是最后一种：后边使用一个 EditText 接收输入内容，在页面上放置多个 TextView 展示输入框中输入的内容。

二、实现代码

null

三、使用方法

1、导入依赖：

在根目录 build.build中加入：

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

添加依赖：

dependencies {
        implementation 'com.github.ymwm-lxl:VerificationCodeEditText:1.0'
}

因为其中显示的光标我使用的是动图，所以还需要引入 glide 的依赖：

    //glide
    implementation 'com.github.bumptech.glide:glide:4.8.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

2、使用控件：

xml文件中：

    <com.xuanluo.verificationcodeedit.VerificationCodeEditText
        android:layout_width="300dp"
        android:layout_height="90dp"
        app:codeTextColor="#000000"
        app:codeTextSize="16sp"
        app:codeTextBackgroud="@drawable/bg_line_label"
        app:codeCursorImg="@drawable/guangbiao"
        app:codeCursorHeight="50dp">
     </com.xuanluo.verificationcodeedit.VerificationCodeEditText>

2.1、属性说明：

属性	说明	备注
android:layout_width	控件宽度	dp
android:layout_height	控件高度	dp
app:codeTextColor	验证码输入框中的文字颜色	color
app:codeTextSize	验证码输入框中的文字大小	sp
app:codeTextBackgroud	验证码输入框的单个框的背景样式	drawable文件
app:codeCursorImg	光标图片	gif图
app:codeCursorHeight	光标高度	dp

2.2、控件说明：

2.2.1、请根据上方备注中的格式来走，不要创新使用= =。

2.2.2、属性的默认值很夸张，是希望使用的时候能够尽量使用自己的样式。

2.2.3、输入框背景样式：

a> 下边线样式：

线框背景.png

xml文件内容：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="1.5dp"
        android:left="-10dp"
        android:right="-10dp"
        android:top="-10dp">
        <shape>
            <stroke
                android:width="1dp"
                android:color="#000000" />
          </shape>
    </item>
</layer-list>

b> 四周都有框样式：

四周都有框.png

xml文件内容：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke
                android:width="1dp"
                android:color="#000" />
            <corners android:radius="2dp"/>
        </shape>
    </item>
</selector>

2.2.4、光标样式：

建议使用 gif 图片，在控件中可以设置光标的高度，光标在输入框中上下居中。效果图片：

光标.gif

 

四、未来会加入的功能

• 输入内容指定。
• 背景样式支持直接使用颜色。
• 光标改为动画实现。

---

有需要的功能或者使用中遇到问题，可以留言或者发邮件给我：
邮箱：ymwmlxl@gmail.com

---