欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义View仿支付宝输入六位密码功能

程序员文章站 2024-03-05 10:13:42
跟选择银行卡界面类似,也是用一个popupwindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在activity中获取到输入的密码并以toast显...

跟选择银行卡界面类似,也是用一个popupwindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在activity中获取到输入的密码并以toast显示密码。效果图如下:

Android自定义View仿支付宝输入六位密码功能

自定义view布局效果图及代码如下:

Android自定义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仿支付宝输入六位密码功能,希望对大家有所帮助