android 验证码输入框_Android版四线验证码输入控件

第一次写图文，有哪些语句或其他问题的，请谅解。

本人是是一名刚刚毕业的实习生，由于技术比较差，在家休养几个月进行自学。最近看到这样的验证码输入框，感觉创意很好，所以想着自己也模仿着写一个。

好的，下面开始。

首先创建一个自定义的View类，命名为VerifyEditText，我们让其继承RelativeLayout

public 

然后我们在values文件夹里面创建一个verifyeditattr.xml文件夹，根节点是resources

然后写入一下内容：

<declare-styleable 

这个文件的内容就是我们自定义View的一些属性以及其属性值类型，稍等我会说明如何使用。

之后打开刚刚创建的VerifyEditText类，创建一个私有方法initView()，如下所示：

private 

为什么会有一个AttributeSet的参数呢？是因为我们将自定义的view属性分开来写了，当然也可以直接写在构造函数里面。

首先引入自定义的view属性：

TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.VerifyEditText);

然后我们需要将刚刚在xml文件里的写下的属性在这里获取一下：

 int textColor = typedArray.getColor(R.styleable.VerifyEditText_textColor, Color.BLACK);
 int backgroundColor = typedArray.getColor(R.styleable.VerifyEditText_backgroungColor,Color.WHITE);
 float fontSize = typedArray.getDimension(R.styleable.VerifyEditText_fontSize,10f);

typedArray.getXXX的方法解释如下：

textColor = typedArray.getColor(/*自定义的View属性*/, /*默认值*/);

当所有的自定义属性初始化完成后，我们需要将TypedArray回收，下面这个方法可以回收：

typedArray.recycle();

好的，下面我们创建一个布局文件：

<?xml version="1.0" encoding="utf-8"?>

首先，既然输入，我们肯定需要一个输入框：

 <EditText
        android:id="@+id/edit_text_view"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        />

高度可以根据实际情况自定义，我这里就随便写了48dp

然后，我们不希望这个输入框被用户看到，当然我们也不能直接使用visibility="gone"来隐藏输入框，因为我们还需要使用输入框来输入验证码。

我们需要注意一下事项：

1. 输入框会被用户看到。
2. 长按事件
3. 光标
4. 输入文本类型控制
5. 输入的最大长度

我们来一个一个的解决，

• 第一个：我们可以将文本内容以及背景颜色均改为与父布局一致即可
• 第二个：根据实际需求可以使用longClickable方法取消
• 第三个：可以使用cursorVisible属性取消
• 第四个：inputType
• 第五个：maxLength

好的，我们最后来看一下EditText控件

 <EditText
        android:id="@+id/edit_text_view"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/colorWhite"
        android:textColor="@color/colorWhite"
        android:longClickable="false"
        android:maxLength="4"
        android:inputType="number"
        android:cursorVisible="false"

        />

好的，下面创建一个LinearLayout布局，我们写那四个验证码文本以及验证码下面的横线，

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:gravity="center"
    android:orientation="horizontal">
   
</LinearLayout>

然后在里面写下四个TextView，还有四个View用于占空，隔开四个TextView，之后再写一个LinearLayout布局，里面写下四个View，用于充当验证码下面的横线提示。

所以总的布局文件则是下面这样：

<?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">

    <EditText
        android:id="@+id/edit_text_view"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/colorWhite"
        android:textColor="@color/colorWhite"
        android:longClickable="false"
        android:maxLength="4"
        android:focusableInTouchMode="true"
        android:focusable="true"
        android:inputType="number"
        android:cursorVisible="false"

        />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/tv_0"
            android:layout_width="41dp"
            android:layout_height="48dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:textColor="#000000"
            android:textSize="30sp"
            android:textStyle="bold"
            android:layout_weight="1"

            />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAndroidDefault"
            android:layout_weight="1" />
        <TextView
            android:id="@+id/tv_1"
            android:layout_width="41dp"
            android:layout_height="48dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:textColor="#000000"
            android:textSize="30sp"
            android:textStyle="bold"
            android:layout_weight="1"

            />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAndroidDefault"
            android:layout_weight="1" />
        <TextView
            android:id="@+id/tv_2"
            android:layout_width="41dp"
            android:layout_height="48dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:textColor="#000000"
            android:textSize="30sp"
            android:textStyle="bold"
            android:layout_weight="1"

            />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAndroidDefault"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_3"
            android:layout_width="41dp"
            android:layout_height="48dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:textColor="#000000"
            android:textSize="30sp"
            android:textStyle="bold"
            android:layout_weight="1"

            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal"
        android:gravity="center"
        >
        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:background="#C4C4C4" />

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

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#C4C4C4" />

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

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#C4C4C4" />

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

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#C4C4C4" />

    </LinearLayout>


</RelativeLayout>

好的，我们的布局文件已经写好的，下面回到我们的自定义View类VerifyEditText

下面我们引入创建好的布局文件：

inflate(context,R.layout.view_verify_code,this);

之后在初始化TextView以及EditText控件(由于textView过多，我们使用数组)： TextView[] textViews;

TextView

然后把刚刚自定的属性值赋值给对应的控件属性

for (TextView textView:textViews){
            textView.setTextColor(textColor);
            textView.setTextSize(fontSize);
            textView.setBackgroundColor(backgroundColor);
 }

然后我们监听我们的EditText的输入事件：

  editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {

           }

我们只需要监听最后一个输入之后的事件就行了，前两个不用管，空着就行。

我们获取输入框的文本内容然后赋值给TextView进行显示给用户：

for (int i=0;i<editable.length();i++){
    textViews[i].setText(editable.charAt(i)+"");
}

然后以及删除操作，不能只输入不能删除啊：

switch (editable.length()){
                    case 0:
                       for (int i=0;i<editable.length();i++){
                         textViews[i].setText("");
                        }
                        break;
                    case 1:
                        textViews[1].setText("");
                        textViews[2].setText("");
                        textViews[3].setText("");
                        break;
                    case 2:
                        textViews[2].setText("");
                        textViews[3].setText("");
                        break;
                    case 3:
                        textViews[3].setText("");
                        break;
                }

这里写的粗糙，暂时没想到怎么写。见谅

我们还需要一个方法用于返回用户输入的验证码文本：

public String getText(){
        return editText.getText().toString();
    }

这里必须是public类型的，不然别人怎么使用呢？哈哈。

好了，到这里我们就写完了，回过头来看看整体内容，其实也没什么难度，删除操作时也可以监听键盘事件，不过这个无法准确监听，有的键盘不会返回自己按下的按钮，我们就只好通过EditText的监听事件来执行删除操作。

好了，萌新求个关注，谢谢ヾ(≧▽≦*)o