我们先来照图分析一下：
（1）限制输入6位，每一位都有自己的框格，每个格显示一位；
（2）有回退/取消支付按钮；
（3）有忘记密码链接；
（4）自定义的只能输入数字的键盘输入区；
（5）在6位输完后自动进行密码校验和支付交易。如上图左边是ios支付宝支付密码输入控件，右边是我模仿实现的效果。
首先，我们需要一个页面来完成以上的静态布局，.xml代码如下：
我要评论
<?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"
android:background="#eeeeee"
android:gravity="bottom">
<linearlayout
android:id="@+id/linear_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<relativelayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<!-- 取消按钮 -->
<imageview
android:id="@+id/img_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon_clean" />
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerinparent="true"
android:text="输入密码"
android:textcolor="#898181"
android:textsize="20sp" />
</relativelayout>
<view
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#555555" />
<!-- 6位密码框布局，需要一个圆角边框的shape作为layout的背景 -->
<linearlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginleft="40dp"
android:layout_marginright="40dp"
android:layout_margintop="20dp"
android:background="@drawable/shape_input_area"
android:orientation="horizontal">
<!-- inputtype设置隐藏密码明文
textsize设置大一点，否则“点”太小了，不美观 -->
<textview
android:id="@+id/tv_pass1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputtype="numberpassword"
android:textsize="32sp" />
<view
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<textview
android:id="@+id/tv_pass2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputtype="numberpassword"
android:textsize="32sp" />
<view
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<textview
android:id="@+id/tv_pass3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputtype="numberpassword"
android:textsize="32sp" />
<view
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<textview
android:id="@+id/tv_pass4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputtype="numberpassword"
android:textsize="32sp" />
<view
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<textview
android:id="@+id/tv_pass5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputtype="numberpassword"
android:textsize="32sp" />
<view
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#999999" />
<textview
android:id="@+id/tv_pass6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputtype="numberpassword"
android:textsize="32sp" />
</linearlayout>
<!-- 忘记密码链接 -->
<textview
android:id="@+id/tv_forgetpwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="15dp"
android:text="忘记密码？"
android:textcolor="#354eef" />
</linearlayout>
<!-- 输入键盘 -->
<gridview
android:id="@+id/gv_keybord"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linear_pass"
android:layout_margintop="40dp"
android:background="@android:color/black"
android:horizontalspacing="0.5dp"
android:numcolumns="3"
android:verticalspacing="0.5dp" />
</relativelayout>
其中需要圆角背景shape_input_area.xml：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dp"/> <stroke android:color="@android:color/darker_gray" android:width="1dp"/> <solid android:color="@android:color/white"/> </shape>
需要数字按钮的背景selector_gride.xml：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false"> <shape> <solid android:color="#c0c4c7" /> </shape> </item> <item android:state_enabled="true" android:state_pressed="false"> <shape> <solid android:color="@android:color/white" /> </shape> </item> <item android:state_enabled="true" android:state_pressed="true"> <shape> <solid android:color="#c0c4c7" /> </shape> </item> </selector>
需要回退键背景selector_key_del.xml：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false"> <shape> <solid android:color="#c0c4c7" /> </shape> </item> <item android:state_enabled="true" android:state_pressed="false"> <shape> <solid android:color="#c0c4c7" /> </shape> </item> <item android:state_enabled="true" android:state_pressed="true"> <shape> <solid android:color="@android:color/white" /> </shape> </item> </selector>
下面来完成我们的自定义控件passwordview.java：
public class passwordview extends relativelayout implements view.onclicklistener {
context context;
private string strpassword; //输入的密码
private textview[] tvlist; //用数组保存6个textview，为什么用数组？
//因为就6个输入框不会变了，用数组内存申请固定空间，比list省空间（自己认为）
private gridview gridview; //用grideview布局键盘，其实并不是真正的键盘，只是模拟键盘的功能
private arraylist<map<string, string>> valuelist; //有人可能有疑问，为何这里不用数组了？
//因为要用adapter中适配，用数组不能往adapter中填充
private imageview imgcancel;
private textview tvforget;
private int currentindex = -1; //用于记录当前输入密码格位置
public passwordview(context context) {
this(context, null);
}
public passwordview(context context, attributeset attrs) {
super(context, attrs);
this.context = context;
view view = view.inflate(context, r.layout.layout_popup_bottom, null);
valuelist = new arraylist<map<string, string>>();
tvlist = new textview[6];
imgcancel = (imageview) view.findviewbyid(r.id.img_cancel);
imgcancel.setonclicklistener(this);
tvforget = (textview) findviewbyid(r.id.tv_forgetpwd);
tvforget.setonclicklistener(this);
tvlist[0] = (textview) view.findviewbyid(r.id.tv_pass1);
tvlist[1] = (textview) view.findviewbyid(r.id.tv_pass2);
tvlist[2] = (textview) view.findviewbyid(r.id.tv_pass3);
tvlist[3] = (textview) view.findviewbyid(r.id.tv_pass4);
tvlist[4] = (textview) view.findviewbyid(r.id.tv_pass5);
tvlist[5] = (textview) view.findviewbyid(r.id.tv_pass6);
gridview = (gridview) view.findviewbyid(r.id.gv_keybord);
setview();
addview(view); //必须要，不然不显示控件
}
@override
public void onclick(view v) {
switch (v.getid()) {
case r.id.img_cancel:
toast.maketext(context, "cancel", toast.length_short).show();
break;
case r.id.tv_forgetpwd:
toast.maketext(context, "forget", toast.length_short).show();
break;
}
}
private void setview() {
/* 初始化按钮上应该显示的数字 */
for (int i = 1; i < 13; i++) {
map<string, string> map = new hashmap<string, string>();
if (i < 10) {
map.put("name", string.valueof(i));
} else if (i == 10) {
map.put("name", "");
} else if (i == 12) {
map.put("name", "<<-");
} else if (i == 11) {
map.put("name", string.valueof(0));
}
valuelist.add(map);
}
gridview.setadapter(adapter);
gridview.setonitemclicklistener(new adapterview.onitemclicklistener() {
@override
public void onitemclick(adapterview<?> parent, view view, int position, long id) {
if (position < 11 && position != 9) { //点击0~9按钮
if (currentindex >= -1 && currentindex < 5) { //判断输入位置————要小心数组越界
tvlist[++currentindex].settext(valuelist.get(position).get("name"));
}
} else {
if (position == 11) { //点击退格键
if (currentindex - 1 >= -1) { //判断是否删除完毕————要小心数组越界
tvlist[currentindex--].settext("");
}
}
}
}
});
}
//设置监听方法，在第6位输入完成后触发
public void setonfinishinput(final onpasswordinputfinish pass) {
tvlist[5].addtextchangedlistener(new textwatcher() {
@override
public void beforetextchanged(charsequence s, int start, int count, int after) {
}
@override
public void ontextchanged(charsequence s, int start, int before, int count) {
}
@override
public void aftertextchanged(editable s) {
if (s.tostring().length() == 1) {
strpassword = ""; //每次触发都要先将strpassword置空，再重新获取，避免由于输入删除再输入造成混乱
for (int i = 0; i < 6; i++) {
strpassword += tvlist[i].gettext().tostring().trim();
}
pass.inputfinish(); //接口中要实现的方法，完成密码输入完成后的响应逻辑
}
}
});
}
/* 获取输入的密码 */
public string getstrpassword() {
return strpassword;
}
/* 暴露取消支付的按钮，可以灵活改变响应 */
public imageview getcancelimageview() {
return imgcancel;
}
/* 暴露忘记密码的按钮，可以灵活改变响应 */
public textview getforgettextview() {
return tvforget;
}
//grideview的适配器
baseadapter adapter = new baseadapter() {
@override
public int getcount() {
return valuelist.size();
}
@override
public object getitem(int position) {
return valuelist.get(position);
}
@override
public long getitemid(int position) {
return position;
}
@override
public view getview(int position, view convertview, viewgroup parent) {
viewholder viewholder;
if (convertview == null) {
convertview = view.inflate(context, r.layout.item_gride, null);
viewholder = new viewholder();
viewholder.btnkey = (textview) convertview.findviewbyid(r.id.btn_keys);
convertview.settag(viewholder);
} else {
viewholder = (viewholder) convertview.gettag();
}
viewholder.btnkey.settext(valuelist.get(position).get("name"));
if(position == 9){
viewholder.btnkey.setbackgroundresource(r.drawable.selector_key_del);
viewholder.btnkey.setenabled(false);
}
if(position == 11){
viewholder.btnkey.setbackgroundresource(r.drawable.selector_key_del);
}
return convertview;
}
};
/**
* 存放控件
*/
public final class viewholder {
public textview btnkey;
}
}
自认为代码注释还是可以的。就是在实现过程中要注意数组的越界问题，在输入逻辑响应中要注意逻辑处理，也就是grideview的onitemclicklistener事件处理。其中用到自定义的接口onpasswordinputfinish来实现输入完成的事件回掉：
/**
* belong to the project —— mypayui
* created by wangj on 2015/11/25 17:15.
*
* 自定义接口，用于给密码输入完成添加回掉事件
*/
public interface onpasswordinputfinish {
void inputfinish();
}
还有就是adapter中用到的每个按钮item的布局item_gride.xml：
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 模拟键盘按钮，当然你可以用button，但要注意button和grideview的点击响应问题 --> <textview android:id="@+id/btn_keys" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp" android:gravity="center" android:textsize="25sp" android:background="@drawable/selector_gride"/> </linearlayout>
好了，到此我们的自定义控件——模仿支付宝6位支付密码输入控件就完成了，下边我们在activity中用一下，检验一下效果：
我们在mianactivity中用用一下我们定义好的控件：
public class mainactivity extends activity {
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
/************* 第一种用法————开始 ***************/
setcontentview(r.layout.activity_main);
final passwordview pwdview = (passwordview) findviewbyid(r.id.pwd_view);
//添加密码输入完成的响应
pwdview.setonfinishinput(new onpasswordinputfinish() {
@override
public void inputfinish() {
//输入完成后我们简单显示一下输入的密码
//也就是说——>实现你的交易逻辑什么的在这里写
toast.maketext(mainactivity.this, pwdview.getstrpassword(), toast.length_short).show();
}
});
/**
* 可以用自定义控件中暴露出来的cancelimageview方法，重新提供相应
* 如果写了，会覆盖我们在自定义控件中提供的响应
* 可以看到这里toast显示 "biu biu biu"而不是"cancel"*/
pwdview.getcancelimageview().setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view v) {
toast.maketext(mainactivity.this, "biu biu biu", toast.length_short).show();
}
});
/************ 第一种用法————结束 ******************/
/************* 第二种用法————开始 *****************/
// final passwordview pwdview = new passwordview(this);
// setcontentview(pwdview);
// pwdview.setonfinishinput(new onpasswordinputfinish() {
// @override
// public void inputfinish() {
// toast.maketext(mainactivity.this, pwdview.getstrpassword(), toast.length_short).show();
// }
// });
/************** 第二种用法————结束 ****************/
}
}
在第一种方法中我们用到的布局文件：
<?xml version="1.0" encoding="utf-8"?> <relativelayout android:id="@+id/xxx" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#624762"> <com.wangj.mypayview.passwordview android:id="@+id/pwd_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true"/> </relativelayout>
更多内容请参考专题：android密码使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
网友评论