Android仿微信/支付寶密碼輸入框_Android

在用到支付類app時，都有一個簡密的輸入框。。開始實現的時候思路有點問題，後來到github上搜了下，找到了一個開源的庫看起來相當的牛逼，，來個地址先：

https://github.com/Jungerr/GridPasswordView

效果圖：

這個開源庫我研究了之後，又有了自己的一個思路：來個假的簡密框---底部放一個EditTextView,頂部放置6個ImageView的原點，控制他們的顯隱來實現這個簡密寬

開發步驟：

1 布局

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  style="@style/common_hm_vw"  android:layout_height="50dp" >  <LinearLayout   android:baselineAligned="false"   android:layout_width="match_parent"   android:layout_height="50dp" android:background="@drawable/sdk2_simple_pwd_bg_"   android:orientation="horizontal" >   <RelativeLayout    style="@style/common_ho_vm"    android:layout_weight="1"    android:orientation="horizontal" >    <ImageView     android:id="@+id/sdk2_pwd_one_img"     style="@style/common_hm_vm" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon"     android:visibility="invisible" />    <View     android:layout_width="1dp"     android:layout_height="fill_parent" android:layout_alignParentRight="true"  android:background="@color/sdk_color_pwd_line" />   </RelativeLayout>   <RelativeLayout    style="@style/common_ho_vm"    android:layout_weight="1"    android:orientation="horizontal" >    <ImageView     android:id="@+id/sdk2_pwd_two_img"     style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon"     android:visibility="invisible" />    <View     android:layout_width="1dp"     android:layout_height="fill_parent"  android:layout_alignParentRight="true"  android:background="@color/sdk_color_pwd_line" />   </RelativeLayout>   <RelativeLayout    style="@style/common_ho_vm"    android:layout_weight="1"    android:orientation="horizontal" >    <ImageView  android:id="@+id/sdk2_pwd_three_img"     style="@style/common_hw_vw"    android:layout_centerInParent="true"   android:src="@drawable/sdk_circle_icon"     android:visibility="invisible" />    <View     android:layout_width="1dp"     android:layout_height="fill_parent"   android:layout_alignParentRight="true"  android:background="@color/sdk_color_pwd_line" />   </RelativeLayout>   <RelativeLayout    style="@style/common_ho_vm"    android:layout_weight="1"    android:orientation="horizontal" >    <ImageView     android:id="@+id/sdk2_pwd_four_img"     style="@style/common_hw_vw" android:layout_centerInParent="true"  android:src="@drawable/sdk_circle_icon"     android:visibility="invisible" />    <View     android:layout_width="1dp"     android:layout_height="fill_parent"  android:layout_alignParentRight="true"  android:background="@color/sdk_color_pwd_line" />   </RelativeLayout>   <RelativeLayout    style="@style/common_ho_vm"    android:layout_weight="1"    android:orientation="horizontal" >    <ImageView     android:id="@+id/sdk2_pwd_five_img"     style="@style/common_hw_vw"   android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon"     android:visibility="invisible" />    <View     android:layout_width="1dp"     android:layout_height="fill_parent"   android:layout_alignParentRight="true"     android:background="@color/sdk_color_pwd_line" />   </RelativeLayout>   <RelativeLayout    style="@style/common_ho_vm"    android:layout_weight="1"    android:orientation="horizontal" >    <ImageView    android:id="@+id/sdk2_pwd_six_img"     style="@style/common_hw_vw"     android:layout_centerInParent="true"     android:src="@drawable/sdk_circle_icon"     android:visibility="invisible" />    <View android:layout_width="1dp"    android:layout_height="fill_parent"     android:layout_alignParentRight="true"    android:background="@color/sdk_color_pwd_line" />   </RelativeLayout>  </LinearLayout>  <EditText   android:id="@+id/sdk2_pwd_edit_simple"   style="@style/common_hm_vm"   android:background="@null"   android:cursorVisible="false"   android:inputType="numberPassword"   android:maxLength="6"  android:textColor="@color/sdk2_color_black" /> </FrameLayout> 

2：自訂一個控制項來處理輸入、刪除、顯隱等事件

package com.suning.mobile.paysdk.view; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import com.suning.mobile.paysdk.R; import com.suning.mobile.paysdk.utils.FunctionUtils; import com.suning.mobile.paysdk.utils.log.LogUtils; /**  *  * 〈一句話功能簡述〉<br>  * 〈功能詳細描述〉 簡密輸入框  */ public class SecurityPasswordEditText extends LinearLayout {  private EditText mEditText;  private ImageView oneTextView;  private ImageView twoTextView;  private ImageView threeTextView;  private ImageView fourTextView;  private ImageView fiveTextView;  private ImageView sixTextView;  LayoutInflater inflater;  ImageView[] imageViews;  View contentView;  public SecurityPasswordEditText(Context context, AttributeSet attrs) {   super(context, attrs);   inflater = LayoutInflater.from(context);   builder = new StringBuilder();   initWidget();  }  private void initWidget() {   contentView = inflater.inflate(R.layout.sdk_simple_pwd_widget, null);   mEditText = (EditText) contentView     .findViewById(R.id.sdk_pwd_edit_simple);   oneTextView = (ImageView) contentView     .findViewById(R.id.sdk_pwd_one_img);   twoTextView = (ImageView) contentView     .findViewById(R.id.sdk_pwd_two_img);   fourTextView = (ImageView) contentView     .findViewById(R.id.sdk_pwd_four_img);   fiveTextView = (ImageView) contentView     .findViewById(R.id.sdk_pwd_five_img);   sixTextView = (ImageView) contentView     .findViewById(R.id.sdk_pwd_six_img);   threeTextView = (ImageView) contentView     .findViewById(R.id.sdk_pwd_three_img);   LinearLayout.LayoutParams lParams = new LayoutParams(     LinearLayout.LayoutParams.MATCH_PARENT,     LinearLayout.LayoutParams.WRAP_CONTENT);   mEditText.addTextChangedListener(mTextWatcher);   mEditText.setOnKeyListener(keyListener);   imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView,     fourTextView, fiveTextView, sixTextView };   this.addView(contentView, lParams);  }  TextWatcher mTextWatcher = new TextWatcher() {   @Override   public void onTextChanged(CharSequence s, int start, int before,     int count) {   }   @Override   public void beforeTextChanged(CharSequence s, int start, int count,     int after) {   }   @Override   public void afterTextChanged(Editable s) {    if (s.toString().length() == ) {     return;    }    if (builder.length() < ) {     builder.append(s.toString());     setTextValue();    }    s.delete(, s.length());   }  };  OnKeyListener keyListener = new OnKeyListener() {   @Override   public boolean onKey(View v, int keyCode, KeyEvent event) {    if (keyCode == KeyEvent.KEYCODE_DEL      && event.getAction() == KeyEvent.ACTION_UP) {     delTextValue();     return true;    }    return false;   }  };  private void setTextValue() {   String str = builder.toString();   int len = str.length();   if (len <= ) {    imageViews[len - ].setVisibility(View.VISIBLE);   }   if (len == ) {    LogUtils.i("回調");    LogUtils.i("支付密碼" + str);    if (mListener != null) {     mListener.onNumCompleted(str);    }    LogUtils.i("jone", builder.toString());    FunctionUtils.hideSoftInputByView(getContext(), mEditText);   }  }  private void delTextValue() {   String str = builder.toString();   int len = str.length();   if (len == ) {    return;   }   if (len > && len <= ) {    builder.delete(len - , len);   }   imageViews[len - ].setVisibility(View.INVISIBLE);   ;  }  StringBuilder builder;  public interface SecurityEditCompleListener {   public void onNumCompleted(String num);  }  public SecurityEditCompleListener mListener;  public void setSecurityEditCompleListener(    SecurityEditCompleListener mListener) {   this.mListener = mListener;  }  public void clearSecurityEdit() {   if (builder != null) {    if (builder.length() == ) {     builder.delete(, );    }   }   for (ImageView tv : imageViews) {    tv.setVisibility(View.INVISIBLE);   }  }  public EditText getSecurityEdit() {   return this.mEditText;  } } 

這樣子其實也實現了簡密功能，但是這個比前面那個開源庫簡單了許多，當然功能也沒有前面的那個強大。

以上內容給大家介紹了Android仿微信/支付寶密碼輸入框的全部敘述，希望大家喜歡。