首先看下效果图
一:布局代码
键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过
GridView
适配器的getItemViewType
方法来定义。点击键的时候背景有变色的效果。
密码输入框由六个
EditText
组成,每个输入框最对能输入一个数字,监听最后一个输入框来完成密码输入结束的监听。
二:键盘
键盘中的主要逻辑处理,键盘样式,
item
的点击事件
@Override
public int getViewTypeCount() {
return 2;
}
@Override
public int getItemViewType(int position) {
return (getItemId(position) == KEY_NINE) ? 2 : 1;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
if (getItemViewType(position) == 1) {
//数字键
convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard, parent, false);
viewHolder = new ViewHolder(convertView);
} else {
//删除键
convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard_delete, parent, false);
}
}
if (getItemViewType(position) == 1) {
viewHolder = (ViewHolder) convertView.getTag();
viewHolder.tvKey.setText(key[position]);
}
return convertView;
}
三:密码输入框
密码输入框要处理的逻辑有删除、输入、输入完成回调等
public void add(String value) {
if (mPassword != null && mPassword.length() < 6) {
mPassword.append(value);//此处先添加到StringBuilder中,再在输入框中显示
if (mPassword.length() == 1) {
tvFirst.setText(value);
} else if (mPassword.length() == 2) {
tvSecond.setText(value);
}else if (mPassword.length() == 3) {
tvThird.setText(value);
}else if (mPassword.length() == 4) {
tvForth.setText(value);
}else if (mPassword.length() == 5) {
tvFifth.setText(value);
}else if (mPassword.length() == 6) {
tvSixth.setText(value);
}
}
}
public void remove() {
if (mPassword != null && mPassword.length() > 0) {
if (mPassword.length() == 1) {
tvFirst.setText("");
} else if (mPassword.length() == 2) {
tvSecond.setText("");
}else if (mPassword.length() == 3) {
tvThird.setText("");
}else if (mPassword.length() == 4) {
tvForth.setText("");
}else if (mPassword.length() == 5) {
tvFifth.setText("");
}else if (mPassword.length() == 6) {
tvSixth.setText("");
}
mPassword.deleteCharAt(mPassword.length() - 1);
}
}
获取完整密码
public String getText() {
return (mPassword == null) ? null : mPassword.toString();
}
四:实际应用
布局,也可以把键盘拆分开来,当输入的时候从窗口下方滑入
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.phoenix.widget.PayEditText
android:id="@+id/PayEditText_pay"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:paddingLeft="12dp"
android:layout_alignParentTop="true"
android:paddingRight="12dp"
android:layout_height="48dp"/>
<com.github.phoenix.widget.Keyboard
android:id="@+id/KeyboardView_pay"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="300dp"/>
</RelativeLayout>
代码中
//键
private static final String[] KEY = new String[] {
"1", "2", "3",
"4", "5", "6",
"7", "8", "9",
"<<", "0", "完成"
};
//设置键盘
keyboard.setKeyboardKeys(KEY);
//键盘键的点击事件
keyboard.setOnClickKeyboardListener(new Keyboard.OnClickKeyboardListener() {
@Override
public void onKeyClick(int position, String value) {
if (position < 11 && position != 9) {
payEditText.add(value);
} else if (position == 9) {
payEditText.remove();
}else if (position == 11) {
//当点击键盘上的完成按钮时,也可以通过payEditText.getText()获取密码,此时不应该注册OnInputFinishedListener接口
Toast.makeText(getApplication(), "您的密码是:" + payEditText.getText(), Toast.LENGTH_SHORT).show();
finish();
}
}
});
//当密码输入完成时的回调
payEditText.setOnInputFinishedListener(new PayEditText.OnInputFinishedListener() {
@Override
public void onInputFinished(String password) {
Toast.makeText(getApplication(), "您的密码是:" + password, Toast.LENGTH_SHORT).show();
}
});
总结
好了,以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。
您可能感兴趣的文章:Android文本输入框(EditText)输入密码时显示与隐藏Android实现动态显示或隐藏密码输入框的内容Android 仿支付宝密码输入框效果android仿微信支付宝的支付密码输入框示例Android仿支付宝支付密码输入框Android仿微信/支付宝密码输入框Android的支付密码输入框实现浅析Android自定义密码输入框和数字键盘Android 实现密码输入框动态明文/密文切换显示效果Android仿微信或支付宝方块密码输入框