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

柔情只为你懂 2023-10-18 11:19 69阅读 0赞

## **1.概述**  ##

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

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

#### 先看效果图： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70][]

#### **2．效果实现** ####

**2.1. 拆分控件之标题栏**

**![20181116092818379.png][]**

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

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

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

**![20181116093444553.png][]**

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

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

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70 1][]**

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

（1）0-9数字设置***select*or**，实现点击变色效果，**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:2.0'**  即可使用。

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

[github]: https://github.com/lzjin/AlipayPassDialog
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181116091851655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw==,size_16,color_FFFFFF,t_70
[20181116092818379.png]: https://img-blog.csdnimg.cn/20181116092818379.png
[20181116093444553.png]: https://img-blog.csdnimg.cn/20181116093444553.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2018111609505486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw==,size_16,color_FFFFFF,t_70