美文网首页程序员互联网科技Android开发经验谈
Android仿支付宝密码输入框与数字键盘

Android仿支付宝密码输入框与数字键盘

作者: 落雨敏 | 来源:发表于2018-11-16 11:16 被阅读35次

    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. 拆分控件之与弹框组合

    方式一:默认系统配置


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

    new PayPassDialog(this,自定义主题样式);

    setWindowSize==弹框宽高

    setGravity==动画与位置

    getPayViewPass==得到组合控件

    setCloseImgView==关闭图片设置

    setForgetText==忘记文本设置

    3.最后

    更多配置方法请到github查看详情,引入:  implementation 'com.github.lzjin:AlipayPassDialog:1.1'  即可使用。纯手工写,各位看官如果本文对你有帮助请点个赞吧。github地址:https://github.com/lzjin/AlipayPassDialog

    相关文章

      网友评论

        本文标题:Android仿支付宝密码输入框与数字键盘

        本文链接:https://www.haomeiwen.com/subject/lqwpfqtx.html