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