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