Android自定义View仿支付宝输入六位密码功能
程序员文章站
2024-03-05 10:13:42
跟选择银行卡界面类似,也是用一个popupwindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在activity中获取到输入的密码并以toast显...
跟选择银行卡界面类似,也是用一个popupwindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在activity中获取到输入的密码并以toast显示密码。效果图如下:
自定义view布局效果图及代码如下:
<?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="wrap_content" android:background="@drawable/bg_pop_window" android:orientation="vertical"> <linearlayout android:id="@+id/ll_main_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:background="#fff" android:orientation="vertical"> <relativelayout android:layout_width="match_parent" android:layout_height="50dp"> <imageview android:id="@+id/iv_pay_back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginleft="10dp" android:background="@drawable/back_white"/> <textview android:id="@+id/tv_pay_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_marginleft="15dp" android:layout_margintop="15dp" android:text="标题" android:textcolor="#333" android:textsize="18dp"/> </relativelayout> <view android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#e5e5e5"/> <!-- 6位密码框布局,需要一个圆角边框的shape作为layout的背景 --> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginleft="20dp" android:layout_marginright="20dp" 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:paddingbottom="5dp" android:paddingtop="5dp" android:textsize="32sp"/> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="#e5e5e5"/> <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:paddingbottom="5dp" android:paddingtop="5dp" android:textsize="32sp"/> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="#e5e5e5"/> <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:paddingbottom="5dp" android:paddingtop="5dp" android:textsize="32sp"/> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="#e5e5e5"/> <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:paddingbottom="5dp" android:paddingtop="5dp" android:textsize="32sp"/> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="#e5e5e5"/> <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:paddingbottom="5dp" android:paddingtop="5dp" android:textsize="32sp"/> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="#e5e5e5"/> <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:paddingbottom="5dp" android:paddingtop="5dp" android:textsize="32sp"/> </linearlayout> <textview android:id="@+id/tv_pay_forgetpwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_margin="15dp" android:text="忘记密码?" android:textcolor="#354eef"/> <!-- 输入键盘 --> <gridview android:id="@+id/gv_keybord" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/ll_main_password" android:layout_margintop="30dp" android:horizontalspacing="0.5dp" android:background="#8e8e8e" android:numcolumns="3" android:verticalspacing="0.5dp"/> </linearlayout> </relativelayout>
java代码
/** * created by zhpan on 2016/9/25. */ public class payview extends relativelayout{ private mainactivity mcontext; private string mstringpassword; //输入的密码 private textview[] mtextviewpsw; // 用数组保存6个textview private gridview mgridview; //支付键盘布局 private arraylist<map<string, string>> valuelist; private imageview mimageviewcancel; private textview mtextviewforgetpsw; private int currentindex = -1;// 用于记录当前输入密码格位置 private view mview; private textview mtextviewtitle; private textview mtextviewdel; public payview(context context) { super(context, null); } public payview(context context, attributeset attrs) { super(context, attrs); mcontext = (mainactivity) context; mview = view.inflate(context, r.layout.pay_view, null); valuelist = new arraylist<>(); mtextviewpsw = new textview[6]; mimageviewcancel = (imageview) mview.findviewbyid(r.id.iv_pay_back); mtextviewpsw[0] = (textview) mview.findviewbyid(r.id.tv_pass1); mtextviewpsw[1] = (textview) mview.findviewbyid(r.id.tv_pass2); mtextviewpsw[2] = (textview) mview.findviewbyid(r.id.tv_pass3); mtextviewpsw[3] = (textview) mview.findviewbyid(r.id.tv_pass4); mtextviewpsw[4] = (textview) mview.findviewbyid(r.id.tv_pass5); mtextviewpsw[5] = (textview) mview.findviewbyid(r.id.tv_pass6); mgridview = (gridview) mview.findviewbyid(r.id.gv_keybord); mtextviewtitle = (textview) mview.findviewbyid(r.id.tv_pay_title); mtextviewforgetpsw = (textview) mview.findviewbyid(r.id.tv_pay_forgetpwd); setview(); addview(mview); //必须要,不然不显示控件 } // 初始化按钮上应该显示的数字 private void setview() { for (int i = 1; i < 13; i++) { map<string, string> map = new hashmap<>(); if (i < 10) { map.put("name", string.valueof(i)); } else if (i == 10) { map.put("name", ""); } else if (i == 11) { map.put("name", string.valueof(0)); } else if (i == 12) { map.put("name", "<-"); } valuelist.add(map); } mgridview.setadapter(adapter); } /** * 设置监听方法,在第6位输入完后触发 */ public void setonfinishinput(final onpasswordinputfinish pass) { mtextviewpsw[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) { mstringpassword = ""; //每次触发都要将mstringpassword置空再重新获取,避免由于输入删除再输入造成混乱 for (int i = 0; i < 6; i++) { mstringpassword += mtextviewpsw[i].gettext().tostring().trim(); } pass.inputfinish();//接口中要实现的方法,完成密码输入完成后的响应逻辑 } } }); } /** * 获取输入的密码 */ public string getpassword() { return mstringpassword; } /** * 返回取消支付的imageview */ public imageview getcancel() { return mimageviewcancel; } /** * 返回忘记密码的textview */ public textview getforgetpsw() { return mtextviewforgetpsw; } /** * 返回标题的textview */ public textview gettitle() { return mtextviewtitle; } // gridview的适配器 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(final int position, view convertview, viewgroup parent) { viewholder holder; if (convertview == null) { convertview = view.inflate(mcontext, r.layout.item_pay_gride, null); holder = new viewholder(); holder.btnkey = (textview) convertview.findviewbyid(r.id.btn_keys); convertview.settag(holder); } else { holder = (viewholder) convertview.gettag(); } holder.btnkey.settext(valuelist.get(position).get("name")); if (position == 9) { holder.btnkey.setbackgroundresource(r.drawable.selector_key_del); } if (position == 11) { mtextviewdel = holder.btnkey; holder.btnkey.setbackgroundresource(r.drawable.selector_key_del); } holder.btnkey.setonclicklistener(new onclicklistener() { @override public void onclick(view v) { if (position < 11 && currentindex != 9&&position!=9) { //点击0-9按钮 if (currentindex >= -1 && currentindex < 5) { //判断输入位置 mtextviewpsw[++currentindex].settext(valuelist.get(position).get("name")); } } else { if (position == 11) { //点击退格键 if (currentindex - 1 >= -1) { // 判断是否删除完毕 mtextviewpsw[currentindex--].settext(""); } } if(position==9){ } } } }); return convertview; } }; static class viewholder { public textview btnkey; } }
popupwindow中直接使用该控件
<?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"> <com.example.zhpan.mypayui.payview android:id="@+id/pv_pop_win" android:layout_width="match_parent" android:layout_height="match_parent"/> </linearlayout>
mainactivity中显示pupupwindow
public class mainactivity extends appcompatactivity implements view.onclicklistener { private textview mtextview; private popupwindow mpopupwindow; private view popview; private payview mpayview; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initview(); setlistener(); } private void initview() { mtextview = (textview) findviewbyid(r.id.tv_main_pay); } private void setlistener() { mtextview.setonclicklistener(this); } // 显示弹窗 public void showpopupwindow() { // 初始化弹窗 popview = view.inflate(this, r.layout.pop_window, null); mpopupwindow = new popupwindow(popview, viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent); mpayview = (payview) popview.findviewbyid(r.id.pv_pop_win); mpayview.gettitle().settext("选择到账银行卡"); // 设置动画 mpopupwindow.setanimationstyle(r.style.popwin_anim_style); mpopupwindow.showasdropdown(findviewbyid(r.id.ll_main), 0, 0); mpopupwindow.setoutsidetouchable(true); mpayview.setonfinishinput(new onpasswordinputfinish() { @override public void inputfinish() { toast.maketext(mainactivity.this, mpayview.getpassword(), toast.length_short).show(); } }); mpayview.getcancel().setonclicklistener(this); mpayview.getforgetpsw().setonclicklistener(this); } @override public void onclick(view v) { switch (v.getid()) { case r.id.tv_main_pay: showpopupwindow(); break; case r.id.iv_pay_back: mpopupwindow.dismiss(); break; case r.id.tv_pay_forgetpwd: toast.maketext(mainactivity.this,"忘记密码",toast.length_short).show(); break; } } }
以上所述是小编给大家介绍的android自定义view仿支付宝输入六位密码功能,希望对大家有所帮助