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

先看效果动图如下：

验证码输入框是常用的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"><!--改为约束布局方式--><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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"/><EditTextandroid: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() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic 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.VerificationCodeViewandroid: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"/><TextViewandroid: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);}@Overrideprotected 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

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

Android 短信验证码输入框
日常开发中,我们会遇到一些很炫酷的手机短信验证码输入,但系统自带的EditText显然并不能满足所需的短信验证码输入框,因此,在系统自带的EditText基础上自定义短信验证码输入框. 实现思路是:定 ...
android短信验证码代码,Android短信验证码自动填写实现代码
今天给大家分享一个Android短信验证码自动填写的功能.先看下效果图,我发送了一条短信到手机,自动填写验证码.如图: 这个小功能运用到了观察者模式,什么是观察者模式? 观察者模式 :定义对象间的一种 ...
android短信验证码方案,Android之短信验证码
今天所使用的方案只是android手机设备集成短信验证码功能的方案之一. 我们所采用的方案是使用聚合数据的短信验证sdk. 接口文档:https://www.juhe.cn/docs/api/... ...
android 短信验证码自动填写的二种方法
转载自:https://blog.csdn.net/VirusDerekRuler/article/details/78506522 现在开发越来越注重用户体验了,现今Android基本都有短信验证功 ...
Android短信验证码自动填写功能的实现
本文出自:黄敏争的博客前言: android应用经常会涉及到注册登录功能,而许多的注册登录或修改密码功能常常需要输入短信验证码,通常,用户收到短信需要最小化应用去查看短信再填入验证码,必然比较麻烦, ...
android 短信验证码的实现
公司用的短信验证码是Mob.com 网址:http://www.mob.com 进入网站注册登录之后进入后在上面有应用是让选择android还是ios 之类的,点击下载SDK --选择免费短信验证 ...
android 监听短信,Android短信验证码监听解决onChange多次调用的方法
先说一句:MIUI请放弃治疗!这里给个传送门: 识别短信验证码并提取还是挺常见的一个需求.所要解决的问题主要有: 1.如何监听 2.如何提取短信中的验证码 3.监听多次调用问题直接看下面代码吧,很明 ...
Android 短信验证码自动填写
这个也不是什么新东西,目前很多app都有这个功能,最近有几个小伙伴问我是怎么实现的,索性写一篇博客来为大家解答. 实现思路很简单:1.在需要输入验证码的Activity代码注册监听短信的广播 2.拦截 ...
Android多条短信监听不到,Android短信验证码监听，解决onChange多次调用
先说一句:MIUI请放弃治疗!这里给个传送门: MIUI通知类短信权限的坑识别短信验证码并提取还是挺常见的一个需求.所要解决的问题主要有: 1.如何监听 2.如何提取短信中的验证码 3.监听多次调用 ...
android短信验证码方案,Android开发之属于你的短信验证码(一)
不飞则已,一飞冲天;不鸣则已,一鸣惊人---------司马迁最近工作又有新需求,要求用户在注册的时候需要通过手机验证码,这样做的目的是防止用户通过一个邮箱来随便的注册,那么好,今天我们就一起来学 ...

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

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

最新文章

热门文章