【Android】短信验证码输入框（80/100）

已于 2023-11-20 09:26:47 修改
阅读量1.7k 收藏 5
点赞数 1
分类专栏： android开发 文章标签： android java android studio UI 验证码
于 2022-12-08 15:16:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichong951/article/details/128237413
版权

先看效果动图如下：
在这里插入图片描述
验证码输入框是常用的app功能页面，实现上并不复杂详情如下：
首先是布局xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".activity.CheckVerificationCodeActivity">
    <!--改为约束布局方式-->
    <TextView
        android:id="@+id/txtCode1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_bg_txt_40"
        android:gravity="center"
        android:textColor="#ff333333"
        android:textSize="20sp"
        tools:text="A"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/txtCode2"

        />
    <TextView
        android:id="@+id/txtCode2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_bg_txt_40"
        android:gravity="center"
        android:textColor="#ff333333"
        android:textSize="20sp"
        tools:text="1"

        app:layout_constraintTop_toTopOf="@id/txtCode1"
        app:layout_constraintStart_toEndOf="@id/txtCode1"
        app:layout_constraintEnd_toStartOf="@id/txtCode3"

        />
    <TextView
        android:id="@+id/txtCode3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_bg_txt_40"
        android:gravity="center"
        android:textColor="#ff333333"
        android:textSize="20sp"
        tools:text="2"
        app:layout_constraintTop_toTopOf="@id/txtCode1"
        app:layout_constraintStart_toEndOf="@id/txtCode2"
        app:layout_constraintEnd_toStartOf="@id/txtCode4"
        />
    <TextView
        android:id="@+id/txtCode4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_bg_txt_40"
        android:gravity="center"
        android:textColor="#ff333333"
        android:textSize="20sp"
        tools:text="B"

        app:layout_constraintTop_toTopOf="@id/txtCode1"
        app:layout_constraintStart_toEndOf="@id/txtCode3"
        app:layout_constraintEnd_toEndOf="parent"
        />

    <EditText
        android:id="@+id/editCode"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/transparent"
        android:inputType="text"
        android:maxLength="4"
        android:textColor="@android:color/transparent"
        tools:text="1234"

        app:layout_constraintTop_toTopOf="@id/txtCode1"
        app:layout_constraintBottom_toBottomOf="@id/txtCode1"
        />

</android.support.constraint.ConstraintLayout>

效果如下图：
在这里插入图片描述
自定义组件VerificationCodeView如下：

package top.lc951.myandroid.views;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.View;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;

import top.lc951.myandroid.R;

/**
 * 验证码输入框组件化
 *
 *
 * @author lichong
 * 2022年12月07日09:58:52
 */
public class VerificationCodeView extends RelativeLayout {
    private static int MAX = 4;
    private EditText editText;
    private TextView[] textViews;
    String inputContent;

    public VerificationCodeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public VerificationCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View.inflate(context, R.layout.view_check_verification_code, this);
        textViews = new TextView[MAX];
        editText = findViewById(R.id.editCode);
        editText.setCursorVisible(false);//隐藏光标  setEditTextListener();

        textViews[0] = findViewById(R.id.txtCode1);
        textViews[1] = findViewById(R.id.txtCode2);
        textViews[2] = findViewById(R.id.txtCode3);
        textViews[3] = 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) {
                inputContent = editText.getText().toString();
                for (int i = 0; i < 4; i++) {
                    if (i < inputContent.length()) {
                        textViews[i].setText(String.valueOf(inputContent.charAt(i)));
                    } else {
                        textViews[i].setText("");
                    }
                }
            }
        });
    }

    public String getText(){
        return inputContent;
    }
}

具体使用就比较简单了

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.CheckVerificationCodeActivity">

    <top.lc951.myandroid.views.VerificationCodeView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="100dp"
        tools:ignore="MissingConstraints"
        android:id="@+id/view_verification_code"
        />
    <TextView
        android:id="@+id/submit"
        android:text="提交"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_verification_code"
        android:layout_margin="16dp"
        android:background="@drawable/shape_bg_corners_25_ff5252"
        android:textSize="19sp"
        android:gravity="center"
        android:textColor="@color/white"
        android:onClick="onSubmit"
        />
</android.support.constraint.ConstraintLayout>

然后在activity里进行调用：

package top.lc951.myandroid.activity;

import android.content.Context;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Toast;

import top.lc951.myandroid.R;
import top.lc951.myandroid.views.VerificationCodeView;

/**
 * 功能:
 * 验证码输入页面
 *
 * <p></p>
 * <p>
 * 业务描述:
 * 4位验证码输入
 *
 * UI实现方案如下
 * 4个TextView，一个EditText（背景透明；文字透明）
 * 监听EditText的输入变化
 *
 */
public class CheckVerificationCodeActivity extends AppCompatActivity {
    public static final String TAG = CheckVerificationCodeActivity.class.getSimpleName();
    private VerificationCodeView verificationCodeView;
    public static void actionActivity(Context context) {
        Intent intent = new Intent(context, CheckVerificationCodeActivity.class);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check_verification_code);
        verificationCodeView=findViewById(R.id.view_verification_code);
    }

    public void onSubmit(View view){
        String code=verificationCodeView.getText();
        if(TextUtils.isEmpty(code))
            return;
        Toast.makeText(this, code, Toast.LENGTH_SHORT).show();
    }
}

===================END

自研产品推荐

推荐理由

postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求

简介

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

下面是一段smartApi使用介绍：
在这里插入图片描述

下载地址：

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn

lichong951
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android验证码输入框(超炫酷)
02-24
Android验证码输入框，炫酷的动画
Android中的验证码输入框
gjyloveIT的博客
12-31 4428
验证码、激活码各种码的输入框格日常使用里屡见不鲜了，四格的，六格的 最近开发遇到这么一个输入14位序号（美观而需要输入框）的需求，本着这种简单控件，不重复造轮子的想法，开始全网搜寻ing… 但就是这么一个我以为极其常用的控件，硬是找了三四个小时，把git逛烂了都没搜到合适的，要么是输入框不支持粘贴，要么是框格只有单行，14格撑满屏幕不够摆，还有要么就是框太丑，字太小太窄有bug之类的 轮子自己写吧！ 效果长这样： 文章目录一、直接使用我的方式1：引入gjylibrary本地aar包依赖（无需关心代码
方格验证码输入框实现方式
最新发布
weixin_39339407的博客
07-11 923
实现一个带有光标的方块输入框就完成了，如果不需要显示光标，那么实现起来会非常简单。我们只需创建几个UILabel和一个隐藏的，然后监听用户输入，将所有内容分割并按顺序显示到UILabel中即可。每个需求和设计的实现方案都不是唯一的，如果大家有更好的方案，欢迎分享出来。
Android 短信验证码输入框
KingToAce
01-04 1655
实现短信验证码输入框
【Android 自定义 View】--＞验证码输入框
Kevin Learn Android
05-23 1229
我们在项目中可能会遇到修改用户名及密码的需求，为保证一定的完全性，服务端一般会接入短信验证码的功能。
Android 实现验证码输入框
weixin_43117800的博客
05-21 422
【代码】Android 实现验证码输入框。
Android-6位自定义手机验证码输入框
09-21
在Android开发中，有时会遇到特定的用户界面需求，例如6位自定义手机验证码输入框。这个场景下，开发者需要创建一个特殊的输入框，能够自动切换焦点，展示动态的光标效果，以提升用户体验。本篇文章将深入探讨如何...
Android 自定义验证码输入框的实例代码(支持粘贴连续性)
01-04
1、能自定义输入框个数和样式 2、支持长按粘贴或剪切板内容自动填充（粘贴连续性） 其中第2点是最为重要的，正是其他人没有这点，逼得自己弄一个 示例 别人的示例： 粘贴居然不支持连续性，只能粘贴第一个字符，...
Android仿滴滴出行验证码输入框功能实例代码
08-28
在Android开发中，创建自定义视图是常见的任务之一，本实例将详细讲解如何实现一个仿滴滴出行的验证码输入框功能。该功能通常用于用户验证身份，例如在注册或登录过程中输入收到的短信验证码。下面我们将分析代码并...
Android实现自动提取短信验证码功能
01-05
本文实例讲解了Android自动提取短信验证码解决方案，分享给大家供大家参考，具体内容如下 主要功能及优点 1.收到验证码短信后，自动提取短信中的验证码填写到相应输入框 2.可指定一个号码，只读取与他有关短信，...
Android 短信验证码自动填写
08-30
以上是实现Android短信验证码自动填写的基本步骤。需要注意的是，为了防止隐私泄露和不必要的资源消耗，确保在不需要监听短信时及时注销`ContentObserver`。此外，考虑到用户可能有多个验证码相关的应用，开发者应...
Android自定义View验证码输入框
08-19
主要为大家详细介绍了自定义View验证码输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android自定义验证码输入框
04-09
这是一个自定义的验证码输入框并且运用到了软件盘的显示和隐藏。
Android实现常见的验证码输入框实例代码
08-29
我们在开发APP的时候经常要遇到输入框，下面这篇文章主要给大家介绍了关于利用Android如何实现常见的验证码输入框的相关资料，文中通过示例代码介绍的非常详细，需要的朋友们可以参考借鉴，下面随着小编来一起学习学习下吧。
Android代码-带下划线的验证码输入框。
08-07
VerifyEditText 带下划线的验证码输入框 gradle使用： Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 添加依赖： dependencies { implementation 'com.github.cirno-poi:VerifyEditText:1.0.0' } 项目包含一个demo，可以直接down了运行。 可自定义输入框数量，下划线颜色和厚度，输入框间距，输入框光标（使用反射实现）； 支持全部下划线变色； 支持AOSP键盘的删除。 自定义属性如下： 属性名 类型 说明 inputCount integer 输入框数量 inputSpace dimension 输入框间距 underline
Android-VerifyEditText-带下划线的验证码输入框
08-12
VerifyEditText - 带下划线的验证码输入框
Android 验证码/密码 输入框
热门推荐
01-02 1万+
今天，分享一个在项目中遇到开发的一个小知识点。 就是常见的4-6位 数字的密码输入框。如下图 业务分析： 1. 首先5个验证码输入的地方没有光标闪烁，也就是5个格子其实不是EditText。 2. 输入数字之后，按删除回退，会从最后一个开始从右往左删除已输入的数字。 3. 点击5个格子的地方，需要弹起软键盘。 弯路：  在做这种类型的自定义控件，大家第一谈到印
Android 自定义验证码输入框
假装你是大灰狼的专栏
06-15 3664
自定义手机验证码，效果如下很明显，一般的EditText是无法满足我们的需求，我们必须自定义一个手机验证码控件。
android 简单自定义验证码输入框效果
qq_23404533的博客
12-15 771
这里提一下，这个当时也是在网上看到一个博主写的代码改了下用在我么项目中的验证码输入框。博主的地址不记得了这里只能顺带标注一下。。。 效果图如下： 就是这个酱紫直入主题，代码如下： xml布局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schema...
uniapp vue3短信验证码自动填充
05-24
关于vue3短信验证码自动填充，一般是指在用户输入手机号码后，点击获取验证码按钮，短信验证码会发送到用户手机上，并且可以自动填充到验证码输入框中，省去用户手动输入的步骤。 实现这个功能需要后端配合提供短信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lichong951

你的鼓励决定更新的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值