100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Android仿支付宝密码输入框(自定义数字键盘)

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

时间:2024-03-28 00:58:18

相关推荐

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

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() {@Overridepublic void onPassFinish(String passContent) {//6位输入完成,回调}@Overridepublic void onPayClose() {dialog.dismiss();//关闭回调}@Overridepublic 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() {@Overridepublic void onPassFinish(String passContent) {//6位输入完成回调}@Overridepublic void onPayClose() {dialog.dismiss();//关闭回调}@Overridepublic void onPayForget() {dialog.dismiss();//忘记密码回调}});}

3.最后

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。