浅谈 Android 支付密码输入框

x1d2m3 4年前
   <p>有些应用都有支付密码功能,而支付密码的密码输入框确实一个很好玩的控件。虽然网上有很多例子,但是我们网络上有很多实现好的demo,但是抽时间自己设计一个未尝不可啊。看一下效果图</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/05acb4692721d8e0c43375f21f092368.png"></p>    <p style="text-align:center">输入密码中.png</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/12c0190edde916b3bf16feaca8a453c3.png"></p>    <p style="text-align:center">密码输入结束.png</p>    <p>我的思路:</p>    <p>变成点的控件不是TextView和EditText而是Imageview。首先写一个RelativeLayout里边包含6个ImageView和一个EditText(EditText要覆盖ImageView)将EditText的背景设置成透明。</p>    <pre>  <code class="language-java"><?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></code></pre>    <p>自定义一个控件ItemPasswordLayout,用来给布局做一些处理,重点是将EditText的光标去掉,并监听输入文字的事件在文字变化后将文字放在一个StringBuffer中,并将edittext设置为"";再监听按下键盘删除键的事件,当按下删除键后会将StringBuffer中删除相应位置的字符。</p>    <pre>  <code class="language-java">/**   * 密码输入框的控件布局   * Created by Went_Gone on 2016/9/14.   */  public class ItemPasswordLayout extends RelativeLayout{      private EditText editText;      private ImageView[] imageViews;//使用一个数组存储密码框      private StringBuffer stringBuffer = new StringBuffer();//存储密码字符      private int count = 6;      private String strPassword;//密码字符串        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);//将光标隐藏          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 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);      }  }</code></pre>    <p>接下来只需要在Activity调用就可以了。在xml中声明</p>    <pre>  <code class="language-java"><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></code></pre>    <p>在Activity中调用</p>    <pre>  <code class="language-java">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();              }          });</code></pre>    <p>如此就可以了,是不是很简单。</p>    <p> </p>    <p>来自:http://www.jianshu.com/p/01a75d7827d9</p>    <p> </p>