Android自定義驗(yàn)證碼輸入框的方法實(shí)例

更新時(shí)間：2022年02月10日 09:20:44 作者：芝麻粒兒

這篇文章主要給大家介紹了關(guān)于Android自定義驗(yàn)證碼輸入框的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

??實(shí)踐過程

前面我們學(xué)完了EditText和TextView兩個(gè)組件，但是，光學(xué)不練沒意思。

所以今天我們趁熱打鐵，利用兩個(gè)組件實(shí)現(xiàn)個(gè)自定義驗(yàn)證碼輸入框。

思路前瞻：

隱形EditText接收輸入，顯性TextView展示內(nèi)容
時(shí)刻監(jiān)聽EditText回調(diào)更改內(nèi)容
自定義RelativeLayout

布局代碼：

<?xml version="1.0" encoding="utf-8"?><!--自定義驗(yàn)證碼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 自定義驗(yàn)證碼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);
        //添加布局內(nèi)容
        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) {
                //如果有字符輸入時(shí)才進(jìn)行操作
                if (!s.toString().equals("")) {
                    //我們限制了4個(gè)驗(yàn)證碼
                    if (stringBuffer.length() > 3) {
                        editText.setText("");
                        return;
                    } else {
                        stringBuffer.append(s);
                        //因?yàn)閑ditText是輔助的，根本字符串是stringBuffer，所以將EditText置空
                        editText.setText("");
                        //現(xiàn)在很多App都是輸入完畢后自動(dòng)進(jìn)入下一步邏輯，所以咱們一般都是在這監(jiān)聽，完成后進(jìn)行回調(diào)業(yè)務(wù)即可
                        if (stringBuffer.length() == 4) {
                            //驗(yàn)證碼輸入完畢了，自動(dòng)進(jìn)行驗(yàn)證邏輯
                        }
                    }

                    for (int i = 0; i < stringBuffer.length(); i++) {
                        textViewList.get(i).setText(stringBuffer.charAt(i) + "");
                    }
                }
            }
        });

        //設(shè)置刪除按鍵的監(jiān)聽
        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顯示內(nèi)容置空
                        textViewList.get(stringBuffer.length()).setText("");
                    }
                    return true;
                }
                return false;
            }
        });
    }

/**
 * Created by akitaka on 2022-01-26.
 * @author akitaka
 * @filename VerificationCodeViewKotlin
 * @describe 自定義驗(yàn)證碼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 {
        //添加布局內(nèi)容
        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) {
                //如果有字符輸入時(shí)才進(jìn)行操作
                if (s.toString() != "") {
                    //我們限制了4個(gè)驗(yàn)證碼
                    if (stringBuffer.length > 3) {
                        editText!!.setText("")
                        return
                    } else {
                        stringBuffer.append(s)
                        //因?yàn)閑ditText是輔助的，根本字符串是stringBuffer，所以將EditText置空
                        editText!!.setText("")
                        //現(xiàn)在很多App都是輸入完畢后自動(dòng)進(jìn)入下一步邏輯，所以咱們一般都是在這監(jiān)聽，完成后進(jìn)行回調(diào)業(yè)務(wù)即可
                        if (stringBuffer.length == 4) {
                            //驗(yàn)證碼輸入完畢了，自動(dòng)進(jìn)行驗(yàn)證邏輯
                        }
                    }
                    for (i in 0 until stringBuffer.length) {
                        textViewList[i].text = stringBuffer[i].toString() + ""
                    }
                }
            }
        })

        //設(shè)置刪除按鍵的監(jiān)聽
        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顯示內(nèi)容置空
                    textViewList[stringBuffer.length].text = ""
                }
                return@OnKeyListener true
            }
            false
        })
    }
}

直接在目標(biāo)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>

??總結(jié)

剛學(xué)Android的朋友可能又疑惑了，里面涉及了RelativeLayout和自定義View的知識(shí)。沒錯(cuò)，小空幾種驗(yàn)證碼的實(shí)現(xiàn)方案特意選的這個(gè)，這樣我們就引出了下一篇文章布局容器的知識(shí)：RelativeLayout（相對(duì)布局容器）和LinearLayout（線性布局容器）

當(dāng)然了，設(shè)計(jì)千奇百怪。上面只是普通的實(shí)現(xiàn)，還做過下面?zhèn)z功能需求

自定義驗(yàn)證碼輸入，自定義輸入鍵盤的-不推薦

直接包含了輸入按鍵寫到整個(gè)頁面UI里，禁止軟（?。╂I盤彈出的-較推薦

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

都逃脫不了EditText的【addTextChangedListener】、【InputFilter】、【android:inputType】幾個(gè)知識(shí)點(diǎn)以及TextView的基本屬性應(yīng)用。

更多需求的創(chuàng)意解決方案就靠大家多想想了，有時(shí)候基本的技術(shù)解決困難的需求反而更輕松快捷。

到此這篇關(guān)于Android自定義驗(yàn)證碼輸入框的文章就介紹到這了,更多相關(guān)Android自定義驗(yàn)證碼輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: