Android自定義控件：通用驗證碼輸入框

關(guān)于自定義控件的基礎(chǔ)知識
-- 可自行查詢資料。
-- 也可關(guān)注我們，后期介紹自定義統(tǒng)計圖表時，會統(tǒng)一介紹自定義控件的常用知識。

需求

4位驗證碼輸入框：
效果圖：


4位驗證碼輸入框.gif
1. 輸入框一行可輸入4位數(shù)字類型的驗證碼；
2. 4位數(shù)字之間有間隔（包括底線）；
3. 輸入框不允許有光標；
4. 底線根據(jù)輸入位置顯示高亮（藍色）；
6. 輸入完成，回調(diào)結(jié)果，輸入過程中，也進行回調(diào)；

分析

這種效果，很難直接在Edittext上處理：
-- 輸入框均分4等份，還要有間隔；
-- 更難處理的是Edittext輸入框禁止光標，那么，沒有光標，我們?nèi)绾握{(diào)起虛擬鍵盤輸入數(shù)據(jù)？
-- 等...

與其在一個控件上折騰，這么難受，不如自定義一個控件，實現(xiàn)這種效果。
自定義控件最簡單的方案：使用多個控件，組合出這種效果。

  1. 布局如何實現(xiàn)？
1.禁止光標，我們直接使用TextView就解決了，而非Edittext;
2.一行顯示4位數(shù)字，比較簡單，可以使用線性布局的權(quán)重，對TextView進行控制為4等分；
3.每個TextView下面跟著一個底線，將來我們就能對底線設(shè)置高亮顏色了；

這樣，基本的布局展示就可以了?。?！

  1. 使用了TextView，那么我們?nèi)绾谓邮沼脩舻妮斎肽兀?/li> 
也很簡單，我們在4個TextView的上方平鋪一個EditText，設(shè)置透明，
當(dāng)用戶點擊到該控件時，會自動調(diào)起軟鍵盤，接收輸入的文本。
  1. EditText接收到用戶輸入的文本，如何顯示在TextView呢？
我們監(jiān)聽EditText文本輸入事件，最多僅接收4個輸入字符，
每接收到一個字符，我們就賦值給對應(yīng)的TextView；
底線也隨要設(shè)置的文本切換顯示高亮；
  1. 如何刪除已輸入的數(shù)值？
我們監(jiān)聽EditText按鍵事件，攔截DEL鍵，從后向前挨著刪除字符即可；
底線也隨要刪除的文本切換顯示高亮；
  1. 是否需要自定義屬性
分析我們自己的項目，雖然是公用的控件，但是該控件比較簡單，沒有特別的要求，所以沒必要自定義屬性了！
如果大家有需要的，可根據(jù)需要自己定義；
如何定義屬性？請自行查找資料；

既然，問題都分析清楚了，那我們就開始快速實現(xiàn)吧

具體實現(xiàn)

  1. 布局文件 phone_code.xml
<?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="wrap_content">
    <LinearLayout
        android:id="@+id/ll_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="7dp">
            <TextView
                android:id="@+id/tv_code1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#2D2D2D"
                android:textSize="40sp"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#3F8EED" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="7dp"
            android:layout_marginLeft="7dp">
            <TextView
                android:id="@+id/tv_code2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#2D2D2D"
                android:textSize="40sp"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#999999" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="7dp"
            android:layout_marginLeft="7dp">
            <TextView
                android:id="@+id/tv_code3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#2D2D2D"
                android:textSize="40sp"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v3"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#999999" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginLeft="7dp">
            <TextView
                android:id="@+id/tv_code4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#2D2D2D"
                android:background="@null"
                android:textSize="40sp"
                android:gravity="center"/>
            <View
                android:id="@+id/v4"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#999999" />
        </LinearLayout>
    </LinearLayout>

    <EditText
        android:id="@+id/et_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/ll_code"
        android:layout_alignBottom="@+id/ll_code"
        android:background="@android:color/transparent"
        android:textColor="@android:color/transparent"
        android:cursorVisible="false"
        android:inputType="number"/>
</RelativeLayout>

et_code 輸入框，設(shè)置了透明和無光標，僅接收數(shù)字；
tv_code1~4 為顯示數(shù)字的控件；
v1~4 為數(shù)字文本的底線，用于設(shè)置高亮；

  1. 自定義控件代碼 PhoneCode
package iwangzhe.customview2.phonecode;

import android.content.Context;
import android.graphics.Color;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import iwangzhe.customview2.R;

/**
 * 類：PhoneCode
 * 作者： qxc
 * 日期：2018/3/14.
 */
public class PhoneCode extends RelativeLayout {
    private Context context;
    private TextView tv_code1;
    private TextView tv_code2;
    private TextView tv_code3;
    private TextView tv_code4;
    private View v1;
    private View v2;
    private View v3;
    private View v4;
    private EditText et_code;
    private List<String> codes = new ArrayList<>();
    private InputMethodManager imm;

    public PhoneCode(Context context) {
        super(context);
        this.context = context;
        loadView();
    }

    public PhoneCode(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        loadView();
    }

    private void loadView(){
        imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
        View view = LayoutInflater.from(context).inflate(R.layout.phone_code, this);
        initView(view);
        initEvent();
    }

    private void initView(View view){
        tv_code1 = (TextView) view.findViewById(R.id.tv_code1);
        tv_code2 = (TextView) view.findViewById(R.id.tv_code2);
        tv_code3 = (TextView) view.findViewById(R.id.tv_code3);
        tv_code4 = (TextView) view.findViewById(R.id.tv_code4);
        et_code = (EditText) view.findViewById(R.id.et_code);
        v1 = view.findViewById(R.id.v1);
        v2 = view.findViewById(R.id.v2);
        v3 = view.findViewById(R.id.v3);
        v4 = view.findViewById(R.id.v4);
    }

    private void initEvent(){
        //驗證碼輸入
        et_code.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) {
                if(editable != null && editable.length()>0) {
                    et_code.setText("");
                    if(codes.size() < 4){
                        codes.add(editable.toString());
                        showCode();
                    }
                }
            }
        });
        // 監(jiān)聽驗證碼刪除按鍵
        et_code.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {
                if (keyCode == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN && codes.size()>0) {
                    codes.remove(codes.size()-1);
                    showCode();
                    return true;
                }
                return false;
            }
        });
    }

    /**
     * 顯示輸入的驗證碼
     */
    private void showCode(){
        String code1 = "";
        String code2 = "";
        String code3 = "";
        String code4 = "";
        if(codes.size()>=1){
            code1 = codes.get(0);
        }
        if(codes.size()>=2){
            code2 = codes.get(1);
        }
        if(codes.size()>=3){
            code3 = codes.get(2);
        }
        if(codes.size()>=4){
            code4 = codes.get(3);
        }
        tv_code1.setText(code1);
        tv_code2.setText(code2);
        tv_code3.setText(code3);
        tv_code4.setText(code4);        
        
        setColor();//設(shè)置高亮顏色
        callBack();//回調(diào)
    }

    /**
     * 設(shè)置高亮顏色
     */
    private void setColor(){
        int color_default = Color.parseColor("#999999");
        int color_focus = Color.parseColor("#3F8EED");
        v1.setBackgroundColor(color_default);
        v2.setBackgroundColor(color_default);
        v3.setBackgroundColor(color_default);
        v4.setBackgroundColor(color_default);
        if(codes.size()==0){
            v1.setBackgroundColor(color_focus);
        }
        if(codes.size()==1){
            v2.setBackgroundColor(color_focus);
        }
        if(codes.size()==2){
            v3.setBackgroundColor(color_focus);
        }
        if(codes.size()>=3){
            v4.setBackgroundColor(color_focus);
        }
    }

    /**
     * 回調(diào)
     */
    private void callBack(){
        if(onInputListener==null){
            return;
        }
        if(codes.size()==4){
            onInputListener.onSucess(getPhoneCode());
        }else{
            onInputListener.onInput();
        }
    }

    //定義回調(diào)
    public interface OnInputListener{
        void onSucess(String code);
        void onInput();
    }
    private OnInputListener onInputListener;
    public void setOnInputListener(OnInputListener onInputListener){
        this.onInputListener = onInputListener;
    }

    /**
     * 顯示鍵盤
     */
    public void showSoftInput(){
        //顯示軟鍵盤
        if(imm!=null && et_code!=null) {
            et_code.postDelayed(new Runnable() {
                @Override
                public void run() {
                    imm.showSoftInput(et_code, 0);
                }
            },200);
        }
    }

    /**
     * 獲得手機號驗證碼
     * @return 驗證碼
     */
    public String getPhoneCode(){
        StringBuilder sb = new StringBuilder();
        for (String code : codes) {
            sb.append(code);
        }
        return sb.toString();
    }
}

codes 集合，用于存放用戶輸入的所有數(shù)字。使用該集合，可簡化輸入框、文本關(guān)聯(lián)邏輯和事件之間處理；
showSoftInput方法：顯示輸入鍵盤，可被外界調(diào)用；
getPhoneCode方法：獲得用戶輸入的驗證碼，可被外界調(diào)用；
OnInputListener接口：定義的數(shù)值輸入回調(diào)，用于告訴調(diào)用者是輸入中，還是輸入完成；
（OnInputListener用途舉例：在實際項目中，當(dāng)輸入完成，底部【下一步】或【確定】按鈕變成可點擊，否則，變?yōu)椴豢牲c擊。）

  1. 調(diào)用者 MainActivity
    布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="iwangzhe.customview2.MainActivity">
    <iwangzhe.customview2.phonecode.PhoneCode
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pc_1"
        android:layout_below="@+id/fpc_1"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"/>
</RelativeLayout>

代碼

package iwangzhe.customview2;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import iwangzhe.customview2.phonecode.PhoneCode;
public class MainActivity extends AppCompatActivity {
    PhoneCode pc_1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        pc_1 = (PhoneCode) findViewById(R.id.pc_1);
        //注冊事件回調(diào)（根據(jù)實際需要，可寫，可不寫）
        pc_1.setOnInputListener(new PhoneCode.OnInputListener() {
            @Override
            public void onSucess(String code) {
                //TODO: 例如底部【下一步】按鈕可點擊
            }

            @Override
            public void onInput() {
                //TODO:例如底部【下一步】按鈕不可點擊
            }
        });
    }

    private void test(){
        //獲得驗證碼
        String phoneCode = pc_1.getPhoneCode();
        //......
        //......
        //更多操作
    }
}

總結(jié)：
此控件實現(xiàn)起來，很簡單，代碼量也非常少。
本文章，主要是為了讓大家了解自定義控件的過程，如果想在自己的項目中使用，請根據(jù)需要自行調(diào)整優(yōu)化。

Demo下載地址：
（為了減小Demo大小，我刪除了build下的文件，大家獲取后rebuild一下代碼，就可以了）
https://pan.baidu.com/s/1OAcUdmwC_wFOrkontveAeA

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容