Analysis of the implementation of the password input box for payment in Android

Let's take a look at the effect diagram

Implementation ideas:

The control that becomes dots is not TextView and EditText but Imageview. First write a RelativeLayout that contains6An ImageView and an EditText (the EditText needs to cover the ImageView) set the background of the EditText to transparent.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:orientation="horizontal"
  android:background="@android:color/white">
  <ImageView
   android:id="@"+id/item_password_iv1"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <ImageView
   android:id="@"+id/item_password_iv2"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <ImageView
   android:id="@"+id/item_password_iv3"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <ImageView
   android:id="@"+id/item_password_iv4"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <ImageView
   android:id="@"+id/item_password_iv5"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <ImageView
   android:id="@"+id/item_password_iv6"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
 </LinearLayout>
 <EditText
  android:id="@"+id/item_edittext"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:background="@android:color/transparent"/>
</RelativeLayout>

Custom a control ItemPasswordLayout, used to make some processing on the layout, the key point is to remove the cursor of EditText, and to listen to the input text event. After the text changes, put the text into a StringBuffer, and set the edittext to ""; then listen to the event of pressing the delete key on the keyboard. After pressing the delete key, it will delete the corresponding character at the position in the StringBuffer.

/**
 * Control layout of password input box
 * Created by Went_Gone on 2016/9/14.
 */
public class ItemPasswordLayout extends RelativeLayout{
 private EditText editText;
 private ImageView[] imageViews;//Use an array to store password input boxes
 private StringBuffer stringBuffer = new StringBuffer();//Store password characters
 private int count = 6;
 private String strPassword;//Password string
 public ItemPasswordLayout(Context context) {
  this(context,null);
 }
 public ItemPasswordLayout(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }
 public ItemPasswordLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  imageViews = new ImageView[6];
  View view = View.inflate(context, R.layout.item_password,this);
  editText = (EditText) findViewById(R.id.item_edittext);
  imageViews[0] = (ImageView) findViewById(R.id.item_password_iv1);
  imageViews[1] = (ImageView) findViewById(R.id.item_password_iv2);
  imageViews[2] = (ImageView) findViewById(R.id.item_password_iv3);
  imageViews[3] = (ImageView) findViewById(R.id.item_password_iv4);
  imageViews[4] = (ImageView) findViewById(R.id.item_password_iv5);
  imageViews[5] = (ImageView) findViewById(R.id.item_password_iv6);
  editText.setCursorVisible(false);//Hide the cursor
  setListener();
 }
 private void setListener() {
  editText.addTextChangedListener(new TextWatcher() {}}
   @Override
   public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2}) {
   }
   @Override
   public void onTextChanged(CharSequence charSequence, int i, int i1, int i2}) {
   }
   @Override
   public void afterTextChanged(Editable editable) {
    //Key point: Only perform operations if the character is not ""
    if (!editable.toString().equals("")) {
     if (stringBuffer.length()>5){
      //when the password length is greater than5when the position is, set editText to empty
      editText.setText("");
      return;
     } else {
      //Add text to StringBuffer
      stringBuffer.append(editable);
      editText.setText("");//After adding, set EditText to empty causing the error of no text input
      Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);
      count = stringBuffer.length();//record the length of stringbuffer
      strPassword = stringBuffer.toString();
      if (stringBuffer.length()==6){
       //text length is6 then call the listener for completing input
       if (inputCompleteListener!=null){
        inputCompleteListener.inputComplete();
       }
      }
     }
     for (int i =0;i<stringBuffer.length();i++){
      imageViews[i].setImageResource(R.mipmap.ispassword);
     }
    }
   }
  });
  editText.setOnKeyListener(new OnKeyListener() {
   @Override
   public boolean onKey(View v, int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_DEL
      && event.getAction() == KeyEvent.ACTION_DOWN) {
//     Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);
     if (onKeyDelete()) return true;
     return true;
    }
    return false;
   }
  });
 }
 public boolean onKeyDelete() {}}
  if (count==0){
   count = 6;
   return true;
  }
  if (stringBuffer.length()>0){
   //Delete the character at the corresponding position
   stringBuffer.delete((count-1),count);
   count--;
   Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);
   strPassword = stringBuffer.toString();
   imageViews[stringBuffer.length()].setImageResource(R.mipmap.nopassword);
  }
  return false;
 }
 @Override
 public boolean onKeyDown(int keyCode, KeyEvent event) {
  return super.onKeyDown(keyCode, event);
 }
 private InputCompleteListener inputCompleteListener;
 public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
  this.inputCompleteListener = inputCompleteListener;
 }
 public interface InputCompleteListener{
  void inputComplete();
 }
 public EditText getEditText() {
  return editText;
 }
 /**
  * Get password
  * @return
  */
 public String getStrPassword() {
  return strPassword;
 }
 public void setContent(String content){
  editText.setText(content);
 }
}

Next, just call it in the Activity.

Declared in xml

 <com.example.went_gone.demo.view.ItemPasswordLayout
  android:id="@"+id/act_zhifubao_IPLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
 </com.example.went_gone.demo.view.ItemPasswordLayout>

Call in Activity

 itemPasswordLayout = (ItemPasswordLayout) findViewById(R.id.act_zhifubao_IPLayout);
  itemPasswordLayout.setInputCompleteListener(new ItemPasswordLayout.InputCompleteListener() {
   @Override
   public void inputComplete() {
    Toast.makeText(ZhifubaoActivity.this, "Password is:",+itemPasswordLayout.getStrPassword(), Toast.LENGTH_SHORT).show();
   }
  });

Summary

Well, that's the end of the content of this article. That's all. Isn't it simple? I hope this article can bring some help to everyone's learning or work. If you have any questions, you can leave a message for communication.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright. It has not been manually edited and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)