Android 自定义验证码、密码输入框

Android

2023-11-05 21:47:12

打造专属的 Android 验证码和密码输入框：美观实用、高度可定制

随着数字化时代的到来，网络安全显得尤为重要。在现代应用程序中，验证码和密码输入框作为用户身份认证的关键组件，为账户安全和防欺诈提供了坚实屏障。Android 平台提供了强大的功能，允许开发者自定义这些控件，以满足特定的设计需求和用户体验。

理解基础原理

在深入探讨实现细节之前，让我们先了解一下自定义验证码和密码输入框背后的基本原理：

验证码输入框： 由一系列文本框组成，用于输入一次性代码。这些代码由后端服务生成，并在用户登录或进行敏感操作时进行验证。
密码输入框： 允许用户输入密码，用于验证身份并访问受保护的应用程序区域。与验证码不同，密码通常是持久存储的，并且由用户选择。

自定义这些控件涉及创建自定义布局和使用监听器来处理用户输入。掌握这些基本原理，我们就可以着手实现我们的自定义控件了。

构建自定义验证码输入框

1. 创建布局

创建一个水平布局（LinearLayout），包含一个不可见的 EditText（用于接收用户输入）和一系列 TextView，表示每个验证码字符。
代码示例：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/et_code"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"
        android:inputType="number" />

    <TextView
        android:id="@+id/tv_code1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" />

    <TextView
        android:id="@+id/tv_code2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" />

    <TextView
        android:id="@+id/tv_code3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" />

    <TextView
        android:id="@+id/tv_code4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" />

</LinearLayout>

2. 设置样式

自定义 TextView 的样式，以匹配所需的验证码格式（例如，方框、圆形或下划线）。
代码示例：

<style name="TextView_Code">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_weight">1</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/shape_code_background</item>
    <item name="android:textColor">@color/color_code_text</item>
    <item name="android:textSize">@dimen/text_size_code</item>
</style>

3. 监听输入

在 EditText 上设置一个文本变更监听器，当用户输入验证码时更新 TextView 的文本。
代码示例：

et_code.addTextChangedListener(object : TextWatcher {

    override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
        // 更新 TextView 的文本
        val code = s.toString()
        tv_code1.text = code.substring(0, 1)
        tv_code2.text = code.substring(1, 2)
        tv_code3.text = code.substring(2, 3)
        tv_code4.text = code.substring(3, 4)
    }

    override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}

    override fun afterTextChanged(s: Editable) {}

})

4. 验证输入

实现一个验证方法，以检查输入的验证码是否与后端服务发送的验证码匹配。
代码示例：

fun verifyCode(code: String): Boolean {
    return code == "1234" // 替换为实际的验证逻辑
}

构建自定义密码输入框

1. 创建布局

创建一个包含 EditText 和一个眼睛图标（用于显示或隐藏密码）的相对布局（RelativeLayout）。
代码示例：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/iv_eye"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_eye" />

</RelativeLayout>

2. 设置样式

自定义 EditText 的样式，以匹配所需的密码格式（例如，圆角、边框或阴影）。
代码示例：

<style name="EditText_Password">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@drawable/shape_password_background</item>
    <item name="android:textColor">@color/color_password_text</item>
    <item name="android:textSize">@dimen/text_size_password</item>
</style>

3. 监听输入

在 EditText 上设置一个文本变更监听器，以更新密码的可见性。
代码示例：

et_password.addTextChangedListener(object : TextWatcher {

    override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
        // 更新密码的可见性
        iv_eye.visibility = if (s.isNotEmpty()) View.VISIBLE else View.GONE
    }

    override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}

    override fun afterTextChanged(s: Editable) {}

})

4. 处理眼睛图标

实现一个眼睛图标的点击监听器，以在密码可见和不可见之间切换。
代码示例：

iv_eye.setOnClickListener {
    if (et_password.inputType == InputType.TYPE_TEXT_VARIATION_PASSWORD) {
        // 密码可见
        et_password.inputType = InputType.TYPE_CLASS_TEXT
    } else {
        // 密码不可见
        et_password.inputType = InputType.TYPE_TEXT_VARIATION_PASSWORD
    }
    et_password.setSelection(et_password.length()) // 设置光标到末尾
}