Kurzanalyse der Implementierung des Passwortfelds für die Zahlungspasswörter in Android

Schauen wir uns das Effektbild an

Implementierungsansatz:

Der in Punkte umgewandelte Steuerelement ist nicht TextView und EditText, sondern ImageView. Zuerst schreibe ich einen RelativeLayout, der6Ein ImageView und ein EditText (EditText muss den ImageView überdecken) setzen den Hintergrund des EditText auf 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>

Definiere ein Steuerelement ItemPasswordLayout, um Layout-Verarbeitungen durchzuführen, der Hauptfokus liegt darin, den Cursor des EditText zu entfernen und die Eingabeereignisse zu überwachen. Nachdem der Text geändert wird, wird der Text in einem StringBuffer gespeichert und der EditText wird auf "" gesetzt; wiederhole das Überwachen des Drücken der Löschtaste der Tastatur, wenn die Löschtaste gedrückt wird, wird das Zeichen an der entsprechenden Position im StringBuffer gelöscht.

/**
 * Anordnung der Kontrolllayout für das Passwort-Eingabefeld
 * Erstellt von Went_Gone am 2016/9/14.
 */
public class ItemPasswordLayout extends RelativeLayout{
 private EditText editText;
 private ImageView[] imageViews;//Verwende ein Array, um die Passwortfelder zu speichern
 private StringBuffer stringBuffer = new StringBuffer();//Speichere Passwortzeichen
 private int count = 6;
 private String strPassword;//Passwortzeichenkette
 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);//Das Cursor wird ausgeblendet
  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) {
    //重点：如果字符不为""时才进行操作
    if (!editable.toString().equals("")) {
     if (stringBuffer.length()>5){
      //当密码长度大于5位时edittext置空
      editText.setText("");
      return;
     }else {
      //将文字添加到StringBuffer中
      stringBuffer.append(editable);
      editText.setText("");//添加后将EditText置空，造成没有文字输入的错局
      Log.e("TAG", "afterTextChanged: stringBuffer ist "+stringBuffer);
      count = stringBuffer.length();//记录stringbuffer的长度
      strPassword = stringBuffer.toString();
      if (stringBuffer.length()==6){
       //文字长度为6 则调用完成输入的监听
       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 ist "+stringBuffer);
     if (onKeyDelete()) return true;
     return true;
    }
    return false;
   }
  });
 }
 public boolean onKeyDelete() {}}
  if (count == 0) {
   count = 6;
   return true;
  }
  if (stringBuffer.length() > 0) {
   //Löschen des Zeichens an der entsprechenden Position
   stringBuffer.delete((count-1), count);
   count--;
   Log.e("TAG", "afterTextChanged: stringBuffer ist "+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;
 }
 /**
  * Passwort abrufen
  * @return
  */
 public String getStrPassword() {
  return strPassword;
 }
 public void setContent(String content){
  editText.setText(content);
 }
}

Dann genügt es, im Activity aufzurufen.

In XML deklariert

 <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>

In Activity aufrufen

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

Zusammenfassung

Nun ist der Inhalt dieses Artikels beendet. So einfach ist das. Ist das nicht einfach? Ich hoffe, dieser Artikel kann Ihnen bei Ihrem Lernen oder Ihrer Arbeit helfen. Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte, hat den Inhalt nicht manuell bearbeitet und übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit fragwürdigen Rechten finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden:3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine Beschwerde einreichen, und fügen Sie relevante Beweise bei. Sobald die Beschwerde bestätigt wird, wird diese Seite die beanstandeten Inhalte sofort löschen.)