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

更新时间：2016年08月26日 16:38:44 作者：laozhu1124

这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码，供大家参考，具体内容如下

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

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

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

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

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

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

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控件。这些都是老司机的老套路。按照惯例，这个模拟键盘应该从屏幕的底部弹出，我这里所做的就是将Gridview依附在popupwindow，然后在从屏幕的底部进行弹出。相应的代码如下：

View contentView = LayoutInflater.from(context).inflate(
    R.layout.layout_popupdemo, null);// 定义后退弹出框
  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);
   //从底部弹出
　　public void show() {
  popupWindow.showAtLocation(rl_bottom, Gravity.BOTTOM, 0, 0); // 确定在界面中出现的位置
 }
 @Override
 public void onWindowFocusChanged(boolean hasWindowFocus) {
  super.onWindowFocusChanged(hasWindowFocus);
  show();
 }

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

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

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("");
      }
     }
    }
   }
  });

如果用户点击数字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 start, 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 使用Vitamio打造自己的万能播放器（2）—— 手势控制亮度、音量、缩放
本文主要介绍Android Vitamio插件的一些功能,这里主要介绍 Android Vitamio插件的手势控制亮度,音量,缩放的功能,并提供代码实例,有需要的小伙伴可以参考下
2016-07-07
Android EditText详解及示例代码
本文主要介绍Android EditText 的知识，这里整理了详细资料及简单示例代码有兴趣的小伙伴可以参考下
2016-09-09
Android实现View滑动的6种方式
这篇文章主要为大家详细介绍了Android实现View滑动的6种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
浅谈Android应用安全防护和逆向分析之apk反编译
我们有时候在某个app上见到某个功能，某个效果蛮不错的，我们想看看对方的思路怎么走的，这时候，我们就可以通过反编译来编译该apk，拿到代码，进行分析。
2021-06-06
Android基于zxing的二维码（网格）扫描仿支付宝网格扫描
这篇文章主要为大家详细介绍了Android基于zxing的二维码网格扫描，仿支付宝网格扫描，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Android 数据库SQLite 写入SD卡的方法
如果手机没有root，数据库文件是无法查看到的，不方便调试。最好的办法是把数据库写进SD卡。通过本文给大家介绍Android 数据库SQLite 写入SD卡的方法，需要的朋友参考下吧
2016-04-04
Kotlin利用Regex如何构建正则表达式详解
正则表达式，又称规则表达式。下面这篇文章主要给大家介绍了关于Kotlin利用Regex构建正则表达式的相关资料，文中通过示例代码介绍的非常详细，对大家的工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-12-12
Jetpack Compose基础组件之文字组件
这篇文章主要为大家介绍了Jetpack Compose基础组件之文字组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Android逆向技巧——去除开屏广告
这篇文章主要介绍了Android如何去除开屏广告，帮助大家更好的理解和学习使用Android开发，感兴趣的朋友可以了解下
2021-04-04
Android编程开发从零开始编写一个轻量级浏览器
这篇文章主要为大家介绍了Android编程开发从零开始编写一个轻量级浏览器过程步骤示例，有需要的朋友可以借鉴参考下，希望能够有所帮助祝大家多多进步
2022-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具