تحليل بسيط لإعداد مربع إدخال كلمة المرور للدفع في Android

دعونا نرى الرسم البياني

منهجية التنفيذ:

التعديلات التي تصبح نقاط ليست TextView وEditText بل Imageview. أولاً، كتبRelativeLayout يحتوي على 6 ImageView وEditText (EditText يجب أن تغطي ImageView) وضبط خلفية EditText إلى شفاف.

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

تم إنشاء واجهة تحكم مخصصة ItemPasswordLayout لتقديم بعض التعاملات على التركيب، وهي تركز على إزالة علامة التركيز من EditText، وتنظيم استماع إلى أحداث النصوص عند تغيير النصوص، وتخزين النصوص في StringBuffer، وإعادة تعيين editText إلى ""; وأيضاً تنظيم استماع إلى أحداث ضغط زر المسح عند ضغط زر المسح، ويتم حذف الحرف في الموضع المناسب من StringBuffer.

/**
 * ترتيب واجهة تحكم إدخال كلمة المرور
 * تم إنشاؤه بواسطة Went_Gone في 2016/9/14.
 */
العمليات العامة class ItemPasswordLayout extends RelativeLayout{
 النصية الخاصة editText;
 الصور الخاصة ImageView[] imageViews; // لاستخدام مصفوفة لتخزين مربعات كلمة المرور
 السلسلة النصية الخاصة stringBuffer = new StringBuffer(); // لتخزين حروف كلمة المرور
 العدد الخاص count = 6;
 السلسلة الخاصة strPassword = ""; // سلسلة كلمة المرور
 العمليات العامة ItemPasswordLayout (السياق) {
  هذا (السياق، null);
 }
 العمليات العامة ItemPasswordLayout (السياق، خصائص) {
  هذا (السياق، الخصائص،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); //将光标隐藏
  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;
     }
      //将文字添加到StringBuffer中
      stringBuffer.append(editable);
      editText.setText("");//添加后将EditText置空 造成没有文字输入的错局
      Log.e("TAG", "afterTextChanged: stringBuffer is "+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 is "+stringBuffer);
     if (onKeyDelete()) return true;
     return true;
    }
    return false;
   }
  });
 }
 public boolean onKeyDelete() {
  if (count==0){
   count = 6;
   return true;
  }
  if (stringBuffer.length()>0){
   //حذف الحرف في الموضع المناسب
   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;
 }
 /**
  * الحصول على كلمة المرور
  * @return
  */
 public String getStrPassword() {
  return strPassword;
 }
 public void setContent(String content){
  editText.setText(content);
 }
}

بعد ذلك، يُمكنك فقط إدعاء ذلك في Activity.

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

في Activity

 itemPasswordLayout = (ItemPasswordLayout) findViewById(R.id.act_zhifubao_IPLayout);
  itemPasswordLayout.setInputCompleteListener(new ItemPasswordLayout.InputCompleteListener() {
   @Override
   public void inputComplete() {
    Toast.makeText(ZhifubaoActivity.this, "كلمة المرور هي: " + itemPasswordLayout.getStrPassword(), Toast.LENGTH_SHORT).show();
   }
  });

الخاتمة

حسنًا، محتوى هذا المقال ينتهي هنا، هكذا فقط، هل بسيط؟ آمل أن يساعد هذا المقال الجميع في التعلم أو العمل، إذا كان لديك أي أسئلة، يمكنك ترك تعليق للتفاعل.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق للمالك الأصلي الحصول عليه، يتم جمع المحتوى من قبل المستخدمين عبر الإنترنت ورفعه بشكل تلقائي، ويملك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت أي محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (أثناء إرسال البريد الإلكتروني، يرجى استبدال # ب @) للإبلاغ، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فورًا.