每个应用登录界面是必不可少的界面。其中,要实现手机号输入的分开显示的效果,还要实现输入验证码输入块的效果。具体实现如下。大家可以参考。
代码实现:
<?xml version="1.0" encoding="utf-8"?><layout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"><LinearLayoutandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/black"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="登录/注册" /><com.example.smscodeinput.PhoneNumberInputEditTextandroid: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" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="============================================" /><com.example.smscodeinput.SmsCodeInputTextandroid: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.smscodeinputappimport android.os.Bundleimport android.text.Editableimport android.text.TextWatcherimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport com.example.smscodeinput.SmsCodeInputTextimport com.example.smscodeinputapp.databinding.LoginActivityBindingclass 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.phoneTextif (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地址:
/sinxiao/SmsCodeInputAndroid