“This is the 14th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”
👉 About the author
As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!!
Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)
Welcome to pay attention to the public account [Mr. Empty name] for more resources and communication!
👉 premise
This is small empty insist to write Android novice series, welcome to taste.
Big guy (×)
Novice (√)
👉 Practice
We’ve covered the EditText and TextView components, but optics are boring.
So today we are striking while the iron is hot, using two components to implement a custom captcha input box.
Thinking forward:
- An invisible EditText receives input, and an explicit TextView displays the content
- Always listen for EditText callback changes
- Custom RelativeLayout
Layout code:
<! -- Custom verification code View-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F84F64"
android:paddingTop="100dp">
<! Orientation ="horizontal" -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" />
<TextView
android:id="@+id/txtCode1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/edittext_kuang"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="26sp" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" />
<TextView
android:id="@+id/txtCode2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/edittext_kuang"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="26sp" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" />
<TextView
android:id="@+id/txtCode3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/edittext_kuang"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="26sp" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" />
<TextView
android:id="@+id/txtCode4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/edittext_kuang"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="26sp" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:id="@+id/editCode"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/transparent"
android:inputType="number" />
</RelativeLayout>
Copy the codeCustom View code
/**
* Created by akitaka on 2022-01-26.
*
* @author akitaka
* @filename VerificationCodeViewJava
* @describeCustom verification code view-Java code *@email [email protected]
*/
public class VerificationCodeViewJava extends RelativeLayout {
private EditText editText;
private List<TextView> textViewList = new ArrayList<>();
private StringBuffer stringBuffer = new StringBuffer();
public VerificationCodeViewJava(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public VerificationCodeViewJava(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// Add layout content
View.inflate(context, R.layout.view_verification_code, this);
editText = findViewById(R.id.editCode);
textViewList.add(findViewById(R.id.txtCode1));
textViewList.add(findViewById(R.id.txtCode2));
textViewList.add(findViewById(R.id.txtCode3));
textViewList.add(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) {
// Operate only if characters are entered
if(! s.toString().equals("")) {
// We are limited to 4 captchas
if (stringBuffer.length() > 3) {
editText.setText("");
return;
} else {
stringBuffer.append(s);
// Since editText is auxiliary and the root string is stringBuffer, leave editText empty
editText.setText("");
// Now many apps automatically enter the next logic after input, so we usually listen here, after completion of the callback business
if (stringBuffer.length() == 4) {
// When the verification code is entered, the verification logic is automatically performed}}for (int i = 0; i < stringBuffer.length(); i++) {
textViewList.get(i).setText(stringBuffer.charAt(i) + ""); }}}});// Set the listening for the delete key
editText.setOnKeyListener(new OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {
if (stringBuffer.length() > 0) {
// Delete characters
stringBuffer.delete(stringBuffer.length() - 1, stringBuffer.length());
// Empty the TextView display
textViewList.get(stringBuffer.length()).setText("");
}
return true;
}
return false; }}); }Copy the code/**
* Created by akitaka on 2022-01-26.
* @author akitaka
* @filename VerificationCodeViewKotlin
* @describeCustom verification code View-Kotlin code *@email 960576866@qq.com
*/
class VerificationCodeViewKotlin : RelativeLayout {
private var editText: EditText? = null
private val textViewList: MutableList<TextView> = ArrayList()
private val stringBuffer = StringBuffer()
constructor(context: Context?) : this(context, null)
constructor(context: Context? , attrs: AttributeSet?) :this(context, attrs, 0)
constructor(context: Context? , attrs: AttributeSet? , defStyleAttr:Int) : super(context, attrs, defStyleAttr)
init {
// Add layout content
View.inflate(context, R.layout.view_verification_code, this) editText = findViewById(R.id.editCode) textViewList.add(findViewById(R.id.txtCode1)) textViewList.add(findViewById(R.id.txtCode2)) textViewList.add(findViewById(R.id.txtCode3)) textViewList.add(findViewById(R.id.txtCode4)) editText!! .addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}
override fun afterTextChanged(s: Editable) {
// Operate only if characters are entered
if(s.toString() ! ="") {
// We are limited to 4 captchas
if (stringBuffer.length > 3) { editText!! .setText("")
return
} else {
stringBuffer.append(s)
// Since editText is auxiliary and the root string is stringBuffer, leave editText emptyeditText!! .setText("")
// Now many apps automatically enter the next logic after input, so we usually listen here, after completion of the callback business
if (stringBuffer.length == 4) {
// When the verification code is entered, the verification logic is automatically performed}}for (i in 0 until stringBuffer.length) {
textViewList[i].text = stringBuffer[i].toString() + ""}}}})// Set the listening for the delete keyeditText!! .setOnKeyListener(OnKeyListener { v, keyCode, event ->if (keyCode == KeyEvent.KEYCODE_DEL && event.action == KeyEvent.ACTION_DOWN) {
if (stringBuffer.length > 0) {
// Delete characters
stringBuffer.delete(stringBuffer.length - 1, stringBuffer.length)
// Empty the TextView display
textViewList[stringBuffer.length].text = ""
}
return@OnKeyListener true
}
false}}})Copy the codeUse it directly in the target Activity (page) layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<cn.appstudy.customView.VerificationCodeViewJava
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="match_parent" />
<! - or - >
<cn.appstudy.customView.VerificationCodeViewKotlin
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Copy the code
😜 summary
RelativeLayout and custom View. LinearLayout is a container with a RelativeLayout and a LinearLayout. It is a container with a RelativeLayout.
Of course, there are a lot of weird designs. The above is just the ordinary implementation, but also made the following two functional requirements
Custom verification code input, custom input keyboard – not recommended
Directly contains the input key to write the entire page UI, prohibit soft (small) keyboard pop-up – preferred
But whatever it is, it’s EditText or TextView, right
Can not escape EditText [addTextChangedListener], [InputFilter], [Android :inputType] several knowledge points and TextView basic attributes application.
Creative solutions to more needs are up to people to think about, and sometimes basic technologies are easier and faster to solve difficult needs.
👉 other
📢 author: Kom and Kom in Kom
📢 reprint instructions – be sure to specify the source: Zhim Granular’s personal home page – column – Nuggets (juejin. Cn)
📢 the road friend please stay ☁️, I see you extraordinary, talk between the faint king imperious 💚, in the future will have a great as 📝!! Next to a little like 👍 collect 🌟 pass you today, point it, in the future you successful ☀️, I do not take a cent, if not successful ⚡ 🌟, or come back to me.