Android仿支付宝、京东的密码键盘和输入框
投稿：daisy
这篇文章主要介绍了利用Android如何模仿支付宝、京东的密码键盘和输入框，本文是将键盘和输入框分开来写，可以根据需求在各个地方使用，同时处理了大量逻辑，方便快速开发。感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
首先看下效果图
一：布局代码
键盘由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;
}
三：密码输入框
密码输入框要处理的逻辑有删除、输入、输入完成回调等
/**
* 输入密码，根据StringBuilder中数据的多少进行逻辑判断
* @param value
*/
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);
}
}
}
/**
* 删除密码，根据StringBuilder中数据的多少进行逻辑判断
*/
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);
}
}
获取完整密码
/**
* 返回完整密码
* @return
*/
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开发者们能有所帮助，如果有疑问大家可以留言交流。