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

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

在用到支付类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"    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        androID:layout_weight="1"    androID:orIEntation="horizontal" >    <ImageVIEw     androID:ID="@+ID/sdk2_pwd_one_img"      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        androID:layout_weight="1"    androID:orIEntation="horizontal" >    <ImageVIEw     androID:ID="@+ID/sdk2_pwd_two_img"      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        androID:layout_weight="1"    androID:orIEntation="horizontal" >    <ImageVIEw  androID:ID="@+ID/sdk2_pwd_three_img"         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        androID:layout_weight="1"    androID:orIEntation="horizontal" >    <ImageVIEw     androID:ID="@+ID/sdk2_pwd_four_img"      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        androID:layout_weight="1"    androID:orIEntation="horizontal" >    <ImageVIEw     androID:ID="@+ID/sdk2_pwd_five_img"        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        androID:layout_weight="1"    androID:orIEntation="horizontal" >    <ImageVIEw    androID:ID="@+ID/sdk2_pwd_six_img"          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"      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 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仿微信/支付宝密码输入框的全部叙述，希望大家喜欢。

总结

以上是内存溢出为你收集整理的Android仿微信/支付宝密码输入框全部内容，希望文章能够帮你解决Android仿微信/支付宝密码输入框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。