Android高仿微信支付密码输入控件

概述像微信支付密码控件，在app中是一个多么司空见惯的功能。最近，项目需要这个功能，于是乎就实现这个功能。

像微信支付密码控件，在app中是一个多么司空见惯的功能。最近，项目需要这个功能，于是乎就实现这个功能。
老样子，投篮需要找准角度，变成需要理清思路。对于这个"小而美"的控件，我们思路应该这样子。

Ⅰ、将要输入密码数量动态通过代码加载出来。

Ⅱ、利用GrIDvIEw模拟产生一个输入数字键盘，并且按照习惯从屏幕底部d出来。

Ⅲ、对输入数字键盘进行事件监听，将这个输入数字填入到这个密码框中，并且当您输入密码长度一致的时候，进行事件回调。

这个思维导图应该是这样的：

首先，我们要根据需求动态加载密码框，相应的代码如下： 

for (int i = 0; i < 6; i++) {   TextVIEw textVIEw = new TextVIEw(context);   androID.Widget.linearLayout.LayoutParams layoutParams = new androID.Widget.linearLayout.LayoutParams(     0,androID.Widget.linearLayout.LayoutParams.WRAP_CONTENT,1);   textVIEw.setGravity(Gravity.CENTER);   textVIEw.settransformationMethod(PasswordtransformationMethod.getInstance());   textVIEw.setTextSize(32);   textVIEw.setLayoutParams(layoutParams);   ll_pwd.addVIEw(textVIEw);   if (i != 5) {    VIEw vIEw2 = new VIEw(context);    androID.Widget.linearLayout.LayoutParams layoutParams1 = new androID.Widget.linearLayout.LayoutParams(      1,androID.Widget.linearLayout.LayoutParams.MATCH_PARENT,0);    vIEw2.setLayoutParams(layoutParams1);    vIEw2.setBackgroundcolor(color.parsecolor("#999999"));    ll_pwd.addVIEw(vIEw2);   }   tvList[i] = textVIEw;  }

我们这里密码长度设置为6，将这6个密码框控件添加到盛放这些控件的父控件中去，并且每个密码控件中都有一个分隔控件。并且把每个密码输入控件放入控件数组，以便我们进行接下来的 *** 作。

然后了，我们利用GrIDvIEw产生一个12宫格的模拟数字键盘，这样模拟键盘样子是这样的： 

源代码应该是这样的： 

 /**  * 加载数据的代码  */ private voID initData() {  /* 初始化按钮上应该显示的数字 */  for (int i = 1; i < 13; i++) {   Map<String,String> map = new HashMap<String,String>();   if (i < 10) {    map.put("name",String.valueOf(i));   } else if (i == 10) {    map.put("name","");   } else if (i == 11) {    map.put("name",String.valueOf(0));   } else if (i == 12) {    map.put("name","×");   } else {    map.put("name","");   }   valueList.add(map);  }  grIDVIEw.setAdapter(adapter);  grIDVIEw.setonItemClickListener(new AdapterVIEw.OnItemClickListener() {   @OverrIDe   public voID onItemClick(AdapterVIEw<?> parent,VIEw vIEw,int position,long ID) {    if (position < 11 && position != 9) { // 点击0~9按钮     if (currentIndex >= -1 && currentIndex < 5) { // 判断输入位置――――要小心数组越界      tvList[++currentIndex].setText(valueList.get(position)        .get("name"));     }    } else {     if (position == 11) { // 点击退格键      if (currentIndex - 1 >= -1) { // 判断是否删除完毕――――要小心数组越界       tvList[currentIndex--].setText("");      }     }    }   }  }); }  /**   * GrIDeVIEw的适配器   */  BaseAdapter adapter = new BaseAdapter() {  @OverrIDe  public int getCount() {   return valueList.size();  }  @OverrIDe  public Object getItem(int position) {   return valueList.get(position);  }  @OverrIDe  public long getItemID(int position) {   return position;  }  @SuppressWarnings("deprecation")  @OverrIDe  public VIEw getVIEw(int position,VIEw convertVIEw,VIEwGroup parent) {   VIEwHolder vIEwHolder;   if (convertVIEw == null) {    convertVIEw = VIEw.inflate(context,R.layout.item_grIDe,null);    vIEwHolder = new VIEwHolder();    vIEwHolder.btnKey = (TextVIEw) convertVIEw      .findVIEwByID(R.ID.btn_keys);    convertVIEw.setTag(vIEwHolder);   } else {    vIEwHolder = (VIEwHolder) convertVIEw.getTag();   }   vIEwHolder.btnKey.setText(valueList.get(position).get("name"));   if (position == 9||position==11) {    vIEwHolder.btnKey.setBackgroundDrawable(Utils.getStateListDrawable(context));    vIEwHolder.btnKey.setEnabled(false);   }   if (position == 11) {    vIEwHolder.btnKey.setBackgroundDrawable(Utils.getStateListDrawable(context));   }   return convertVIEw;  } };   /**  * 存放控件  */ public final class VIEwHolder {  public TextVIEw btnKey; } 

              

加载模拟键盘上的数据为0-9与x，然后将这个数据通过一个适配器将这些数据填充到这个GrIDvIEw控件。这些都是老司机的老套路。按照惯例，这个模拟键盘应该从屏幕的底部d出，我这里所做的就是将GrIDvIEw依附在popupwindow，然后在从屏幕的底部进行d出。相应的代码如下：

VIEw contentVIEw = LayoutInflater.from(context).inflate(    R.layout.layout_popupdemo,null);// 定义后退d出框  grIDVIEw = (GrIDVIEw) contentVIEw.findVIEwByID(R.ID.gv_keybord);// 泡泡窗口的布局  popupWindow = new PopupWindow(contentVIEw,VIEwGroup.LayoutParams.MATCH_PARENT,// wIDth    VIEwGroup.LayoutParams.WRAP_CONTENT);// higth  popupWindow.setFocusable(false);  popupWindow.setAnimationStyle(R.style.animation);   //从底部d出　　public voID show() {  popupWindow.showAtLocation(rl_bottom,Gravity.BottOM,0); // 确定在界面中出现的位置 } @OverrIDe public voID onWindowFocusChanged(boolean hasWindowFocus) {  super.onWindowFocusChanged(hasWindowFocus);  show(); }

当这个控件一加载的时候，就d出。 

最后，我们要做的就是监听模拟键盘，将这个模拟键盘的输入填入到密码框，说的貌似很高大上的，其实就是监听GrIDvIEw的onitemclick事件，相应代码如下： 

grIDVIEw.setonItemClickListener(new AdapterVIEw.OnItemClickListener() {   @OverrIDe   public voID onItemClick(AdapterVIEw<?> parent,long ID) {    if (position < 11 && position != 9) { // 点击0~9按钮     if (currentIndex >= -1 && currentIndex < 5) { // 判断输入位置――――要小心数组越界      tvList[++currentIndex].setText(valueList.get(position)        .get("name"));     }    } else {     if (position == 11) { // 点击退格键      if (currentIndex - 1 >= -1) { // 判断是否删除完毕――――要小心数组越界       tvList[currentIndex--].setText("");      }     }    }   }  });

如果用户点击数字0-9，就填入到密码框中，如果是点击退格键的话，就删除所对应密码框的内容。看到没，上文所用文本框数组列表派上了用场。这里值得指出，由于退格键点击效果与众不同，我这里应用代码设置他的样式。

当用户最后一个密码框输入完成之后，就进行输入完成的回调，相应代码为： 

// 设置监听方法，在第6位输入完成后触发 public voID setonFinishinput(final OnPasswordinputFinish pass) {  tvList[5].addTextChangedListener(new TextWatcher() {   @OverrIDe   public voID beforeTextChanged(CharSequence s,int start,int count,int after) {   }   @OverrIDe   public voID onTextChanged(CharSequence s,int before,int count) {   }   @OverrIDe   public voID afterTextChanged(Editable s) {    if (s.toString().length() == 1) {     strPassword = ""; // 每次触发都要先将strPassword置空，再重新获取，避免由于输入删除再输入造成混乱     for (int i = 0; i < 6; i++) {      strPassword += tvList[i].getText().toString().trim();     }     if (pass!=null) {      pass.inputFinish(); // 接口中要实现的方法，完成密码输入完成后的响应逻辑           }    }   }  });

经过一番折腾以后，大功告成了，最终效果如下：

 

源码下载：http://xiazai.jb51.net/201608/yuanma/Android-MyPayUI(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

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

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