Android登录界面实现手机号输入和密码输入效果

每个应用登录界面是必不可少的界面。其中，要实现手机号输入的分开显示的效果，还要实现输入验证码输入块的效果。具体实现如下。大家可以参考。

 

 代码实现：

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登录/注册" />

        <com.example.smscodeinput.PhoneNumberInputEditText
            android:id="@+id/phoneNumberInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="#40FFFFFF"
            android:hint="请输入手机号码"
            android:inputType="phone"
            android:lines="1"
            android:maxLength="13"
            android:paddingStart="22dp"
            android:paddingTop="14dp"
            android:paddingBottom="14dp"
            android:text=""
            android:textColor="@color/white"
            android:textColorHint="#66F5F5F5"
            android:textSize="18dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="============================================" />


        <com.example.smscodeinput.SmsCodeInputText
            android:id="@+id/smsCodeInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginTop="40dp"
            android:layout_marginEnd="10dp">

        </com.example.smscodeinput.SmsCodeInputText>


    </LinearLayout>

</layout>

逻辑代码实现：

package com.example.smscodeinputapp

import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.example.smscodeinput.SmsCodeInputText
import com.example.smscodeinputapp.databinding.LoginActivityBinding

class LoginActivity : AppCompatActivity() {
    private lateinit var dataBinding: LoginActivityBinding;
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        dataBinding = LoginActivityBinding.inflate(layoutInflater, null, false)
        setContentView(dataBinding.root);

        dataBinding.phoneNumberInput.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }

            override fun afterTextChanged(p0: Editable?) {
                val phone = dataBinding.phoneNumberInput.phoneText
                if (phone.length == 11) {
                    Toast.makeText(
                        applicationContext,
                        "input phone : ${phone}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            }
        })
        dataBinding.smsCodeInput.setOnInputListener(object : SmsCodeInputText.OnInputListener {
            override fun onSucess(codes: String?) {
                Toast.makeText(
                    applicationContext,
                    "验证码 : ${codes}",
                    Toast.LENGTH_SHORT
                ).show();
            }

            override fun onInput() {

            }

        })
    }

}

想使用2个控件 PhoneNumberInputEditText （手机号码输入框）  和 SmsCodeInputText  （短信验证码输入框），可以直接引用：

implementation 'com.github.sinxiao:SmsCodeInputAndroid:1.0.0'

需要添加 jitpack的依赖。

maven { url 'https://jitpack.io' }

github地址：

https://github.com/sinxiao/SmsCodeInputAndroid