Android仿支付宝密码输入框(自定义数字键盘)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lin857/article/details/84111930

1.概述   

      Android自定义密码输入框，通过自定义输入显示框和自定义输入键盘，实现仿支付宝数字键盘等。代码已托管到github，有需要的话可以去我的github下载。

可以自定义关闭图标、文字内容、颜色、大小，弹框样式等。

先看效果图：

2．效果实现

 2.1. 拆分控件之标题栏

    

包含一个关闭按钮，和一个标题文本，就是一个简单的ImageView和TextView，图标和文本(颜色、大小)可根据自己需求更改，调用如下方法等：

/**
 * 关闭图片
 * 
 */
public void setCloseImgView(int resId) {
  mImageViewClose.setImageResource(resId);
}
/**
 * 设置标题的文本
 */
public void setHintText(String text) {
    mTvHint.setText(text);
}

 2.2. 拆分控件之纯数字输入框

我使用的LinearLayout布局进行水平方向权重分配的6个TextView，边线使用的view1dp背景和忘记密码也是文本TextView

 2.3. 拆分控件之9宫格数字键盘

这里是4*3的就宫格布局，我采用的是GridView进行放置的TextView按钮。

（1）0-9数字设置selector，实现点击变色效果，ClickListener进行密码输入；

（2）左下角空白文本，为了美观并无用处；

（3）删除使用的背景图片，通过TouchListener事件来实现点击切换效果图。ClickListener进行删除文本。

（4）逻辑处理：

使用的strPass字符串保存密码，根据情况进行清除、添加等。当密码==6位是回调onPassFinish方法进行服务器验证

//0-9按钮
if (position < 11 &&position!=9) {
     if(strPass.length()==6){
         return;
     }
     else {
         strPass=strPass+listNumber.get(position);//得到当前数字并累加
         mTvPass[strPass.length()-1].setText("*"); //设置界面*
         //输入完成
         if(strPass.length()==6){
                mPayClickListener.onPassFinish(strPass);//请求服务器验证密码
         }
     }
}
//删除按钮
else if(position == 11) {
    if(strPass.length()>0){
        mTvPass[strPass.length()-1].setText("");//去掉界面*
        strPass=strPass.substring(0,strPass.length()-1);//删除一位
    }
}
//空按钮
if(position==9){
}

 2.4. 拆分控件之与弹框组合

方式一：默认系统配置

    private void payDialog() {
     final PayPassDialog dialog=new PayPassDialog(this);
      dialog.getPayViewPass()
            .setPayClickListener(new PayPassView.OnPayClickListener() {
               @Override
               public void onPassFinish(String passContent) {
                   //6位输入完成,回调
               }
               @Override
               public void onPayClose() {
                 dialog.dismiss();
                   //关闭回调
               }

               @Override
               public void onPayForget() {
                dialog.dismiss();
                  //点击忘记密码回调
               }
            });
    }

方式二：自定义配置(更多方法请到github查看)

new PayPassDialog(this,自定义主题样式);
setWindowSize==弹框宽高
setGravity==动画与位置
getPayViewPass==得到组合控件
setCloseImgView==关闭图片设置
setForgetText==忘记文本设置

private void payDia() {
  final PayPassDialog dialog=new PayPassDialog(this,R.style.dialog_gray);
        //弹框自定义配置
        dialog.setAlertDialog(false)
                .setWindowSize(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT,0.4f)
                .setOutColse(false)
                .setGravity(R.style.teamTypeAnimation, Gravity.BOTTOM);
        //组合控件自定义配置
        PayPassView payView=dialog.getPayViewPass();
        payView.setForgetText("忘记密码?");
        payView.setForgetColor(getResources().getColor(R.color.blue3bafd9));
        payView.setForgetSize(16);
        payView.setPayClickListener(new PayPassView.OnPayClickListener() {
            @Override
            public void onPassFinish(String passContent) {
                //6位输入完成回调
            }
            @Override
            public void onPayClose() {
                dialog.dismiss();
                //关闭回调
            }
            @Override
            public void onPayForget() {
                dialog.dismiss();
                //忘记密码回调
            }
        });
    }

3．最后

    更多配置方法请到github查看详情，引入:  implementation 'com.github.lzjin:AlipayPassDialog:1.1'  即可使用。

纯手工写，各位看官如果本文对你有帮助请点个赞吧。github地址：https://github.com/lzjin/AlipayPassDialog