Android仿微信/支付宝密码输入框

在用到支付类app时，都有一个简密的输入框。。开始实现的时候思路有点问题，后来到github上搜了下，找到了一个开源的库看起来相当的牛逼，，来个地址先：

https://github.com/Jungerr/GridPasswordView

效果图：

这个开源库我研究了之后，又有了自己的一个思路：来个假的简密框---底部放一个EditTextView,顶部放置6个ImageView的原点，控制他们的显隐来实现这个简密宽

开发步骤：

1 布局

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; 
 
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仿微信/支付宝密码输入框的全部叙述，希望大家喜欢。