Android custom verification code input box instance code (support paste continuity)

Time:2021-6-2

demand

1. The number and style of input box can be customized

2. Support long press paste or automatic filling of cutting board content (paste continuity)

The second point is the most important one. It’s just that other people don’t have this point and force themselves to make one

Examples

Examples from others:

在这里插入图片描述

Paste actually does not support continuity, can only paste the first character, so use a little uncomfortable

My own example:

在这里插入图片描述

principle

It’s about EditText + n * textview. Then set EditText font and background color to be transparent and hide cursor

EditText: listen to EditText, assign a value to the corresponding textview each time you enter a character, and then clear yourself

Underline: add a view under textview

Cursor: the focus cursor of each textview here actually sets the valueanimator to the view

Paste: paste pop-up is a custom popupwindow

There are detailed comments on the source code, which will not be explained one by one here

Github

https://github.com/WShaobin/VerificationCodeInputView

Gradle

Step 1. Add it in your root build.gradle at the end of repositories:


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

Step 2. Add the dependency:


dependencies {
  implementation 'com.github.WShaobin:VerificationCodeInputView:1.0.2'
}

How to use

In layout


<com.wynsbin.vciv.VerificationCodeInputView
  android:id="@+id/vciv_code"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="48dp"
  android:gravity="center"
  android:orientation="horizontal"
  app:vciv_et_background="@android:color/white"
  app:vciv_et_foucs_background="@android:color/holo_orange_dark"
  app:vciv_et_cursor_color="@color/colorPrimary"
  app:vciv_et_height="58dp"
  app:vciv_et_inputType="number"
  app:vciv_et_number="6"
  app:vciv_et_text_color="@android:color/black"
  app:vciv_et_text_size="18sp"
  app:vciv_et_underline_default_color="@android:color/holo_green_dark"
  app:vciv_et_underline_focus_color="@android:color/holo_blue_bright"
  app:vciv_et_underline_height="2dp"
  app:vciv_et_underline_show="true"
  app:vciv_et_width="58dp" />

In Java Code

VerificationCodeInputView view = findViewById(R.id.vciv_code);
view.setOnInputListener(new VerificationCodeInputView.OnInputListener() {
  @Override
  public void onComplete(String code) {
    Toast.makeText(MainActivity.this, code, Toast.LENGTH_SHORT).show();
  }

  @Override
  public void onInput() {

  }
});

//Clear captcha
view.clearCode();

Attributes

VCInputType

 

  Input box background color support type

1、@drawable/xxx

2、@color/xxx

3、#xxxxxx

summary

The above is the example code of Android user-defined verification code input box (support paste continuity) introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support to developer!
If you think this article is helpful to you, please reprint, please indicate the source, thank you!

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]