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:2.0’ 即可使用。
纯手工写,各位看官如果本文对你有帮助请点个赞吧。github地址:https://github.com/lzjin/AlipayPassDialog
版权声明:本文为lin857原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。