Android仿支付宝微信支付密码界面弹窗封装dialog
一,功能效果
二,实现过程
1,先写xml文件:dialog_keyboard.xml
注意事项
(1),密码部分用的是一个线性布局中6个textview,并设置android:inputtype="numberpassword",
外框是用的一个有stroke属性的shape,
(2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线。
(3),recycleview 要设置属性 android:overscrollmode="never
不然滑动键盘的时候有阴影
(4),底部三个按钮用的线性布局里的三个textview
<span style="font-size:14px;"><?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="wrap_content" android:background="@color/bgitemcheck" android:orientation="vertical"> <relativelayout android:layout_width="match_parent" android:layout_height="60dp"> <imageview android:id="@+id/iv_close_key" android:layout_width="45dp" android:layout_height="45dp" android:layout_centervertical="true" android:padding="10dp" android:src="@mipmap/icon_close" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:text="输入密码" android:textcolor="@color/black" android:textsize="20sp" /> <view android:layout_width="match_parent" android:layout_height="1dp" android:layout_alignparentbottom="true" android:background="@color/underline" /> </relativelayout> <textview android:id="@+id/tv_tip_money" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="15dp" android:gravity="center" android:text="提现金额0元,服务费0元" android:textcolor="@color/black" /> <linearlayout android:layout_width="335dp" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@drawable/shape_bg_psw" android:orientation="horizontal"> <textview android:id="@+id/tv_first_num" android:layout_width="55dp" android:layout_height="55dp" android:gravity="center" android:inputtype="numberpassword" android:textcolor="@color/black" android:textsize="30sp" /> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/strokepsw" /> <textview android:id="@+id/tv_second_num" android:layout_width="55dp" android:layout_height="55dp" android:gravity="center" android:inputtype="numberpassword" android:textcolor="@color/black" android:textsize="30sp" /> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/strokepsw" /> <textview android:id="@+id/tv_third_num" android:layout_width="55dp" android:layout_height="55dp" android:gravity="center" android:inputtype="numberpassword" android:textcolor="@color/black" android:textsize="30sp" /> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/strokepsw" /> <textview android:id="@+id/tv_fourth_num" android:layout_width="55dp" android:layout_height="55dp" android:gravity="center" android:inputtype="numberpassword" android:textcolor="@color/black" android:textsize="30sp" /> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/strokepsw" /> <textview android:id="@+id/tv_fifth_num" android:layout_width="55dp" android:layout_height="55dp" android:gravity="center" android:inputtype="numberpassword" android:textcolor="@color/black" android:textsize="30sp" /> <view android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/strokepsw" /> <textview android:id="@+id/tv_sixth_num" android:layout_width="55dp" android:layout_height="55dp" android:gravity="center" android:inputtype="numberpassword" android:textcolor="@color/black" android:textsize="30sp" /> </linearlayout> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content"> <textview android:id="@+id/tv_forget_psw" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:layout_margin="10dp" android:padding="5dp" android:text="忘记密码?" android:textcolor="@color/maincolor" android:textsize="13sp" android:visibility="invisible" /> </relativelayout> <android.support.v7.widget.recyclerview android:id="@+id/rv_keyboard" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="30dp" android:background="@color/white" android:overscrollmode="never" /> <linearlayout android:layout_width="match_parent" android:layout_height="58dp" android:orientation="horizontal"> <textview android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@color/bgitempsw" /> <textview android:id="@+id/tv_zero" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/selector_bg_psw_item" android:gravity="center" android:text="0" android:textcolor="@color/black" android:textsize="25sp" /> <relativelayout android:id="@+id/rl_undo" android:layout_width="1dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/selector_bg_undo"> <imageview android:layout_width="25dp" android:layout_height="match_parent" android:layout_centerinparent="true" android:src="@mipmap/icon_undo" /> </relativelayout> </linearlayout> </linearlayout></span>
2,java代码 keyboarddialog.java
注意事项
(1),封装成dialog,这段代码要在setcontentview之前 window.requestfeature(window.feature_no_title)
(2),在构造方法中设置样式(后面详述)
(3),适配器是已封装的,用原生的也没差
(4),密码的存储和删除是操作字符串
(5),使用了butterknife 版本为:compile'com.jakewharton:butterknife:7.0.1'
(6),在设置attributes.width = screenutils.getscreenwidth(context);
使用了封装的方法 目的是获取屏幕的宽 可自行百度达到相同效果
<span style="font-size:14px;">public class keyboarddialog extends dialog { private final context context; private final int money; @bind(r.id.rv_keyboard)//数字列表 recyclerview rvkeyboard; @bind(r.id.iv_close_key)//关闭按钮 imageview ivclosekey; @bind(r.id.tv_tip_money)//提现金额及手续费 textview tvtipmoney; @bind(r.id.tv_zero)//数字0 textview tvzero; @bind(r.id.rl_undo)//后退键 relativelayout rlundo; //六位密码 @bind(r.id.tv_first_num) textview tvfirstnum; @bind(r.id.tv_second_num) textview tvsecondnum; @bind(r.id.tv_third_num) textview tvthirdnum; @bind(r.id.tv_fourth_num) textview tvfourthnum; @bind(r.id.tv_fifth_num) textview tvfifthnum; @bind(r.id.tv_sixth_num) textview tvsixthnum; private arraylist<string> keyboardlist;//数字列表 private string psw = "";//密码 public keyboarddialog(context context, int money) { super(context, r.style.keyboard_dialog); this.context = context; this.money = money;//要提现金额 setcanceledontouchoutside(true); } @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); window window = this.getwindow(); assert window != null; window.requestfeature(window.feature_no_title); window.setwindowanimations(r.style.keyboard_dialog_anim); setcontentview(r.layout.dialog_keyboard); butterknife.bind(this); windowmanager.layoutparams attributes = window.getattributes(); attributes.gravity = gravity.bottom; attributes.width = screenutils.getscreenwidth(context); attributes.height = gridlayoutmanager.layoutparams.wrap_content; initdata(); } /* * 初始化 * */ private void initdata() { keyboardlist = new arraylist<>(); for (int i = 1; i < 10; i++) { keyboardlist.add(i + ""); } //设置要提现的金额 tvtipmoney.settext("提现金额" + money + "元"); gridlayoutmanager glmanager = new gridlayoutmanager(context, 3); rvkeyboard.setlayoutmanager(glmanager); rcycommonadapter adapter = getadapter(); rvkeyboard.setadapter(adapter); } private rcycommonadapter getadapter() { return new rcycommonadapter<string>(context, keyboardlist, false, rvkeyboard) { @override public void convert(rcyviewholder holder, string keyboard) { textview tvkeyboard = holder.getview(r.id.tv_keyboard_item); tvkeyboard.settext(keyboard); } @override public int getmlayoutid(int position) { return r.layout.item_keyboard; } @override public void onitemclicklistener(int position) { inputnum(position + 1 + ""); } }; } /* * 输入密码 先判断现有密码长度并设置显示输入了密码 添加密码到密码字符串 * 后判断输入后密码的长度 如果等于6则关闭并请求服务器 * */ private void inputnum(string num) { switch (psw.length()) { case 0: tvfirstnum.settext(num); break; case 1: tvsecondnum.settext(num); break; case 2: tvthirdnum.settext(num); break; case 3: tvfourthnum.settext(num); break; case 4: tvfifthnum.settext(num); break; case 5: tvsixthnum.settext(num); break; } psw += num; if (psw.length() == 6) { //todo 请求服务器 密码为 psw log.d("psw", psw); dismiss(); } } @onclick({r.id.iv_close_key, r.id.tv_zero, r.id.rl_undo}) public void onclick(view view) { switch (view.getid()) { case r.id.iv_close_key://关闭dialog dismiss(); break; case r.id.tv_zero://输入0 inputnum("0"); break; case r.id.rl_undo://删除输入的密码 deletenum(); break; } } /* * 删除密码 根据已输入的密码长度将对应的textview设置为空 * 并将密码字符串最后一位切割掉 * */ private void deletenum() { switch (psw.length()) { case 1: tvfirstnum.settext(""); psw = ""; break; case 2: tvsecondnum.settext(""); psw = psw.substring(0, 1); break; case 3: tvthirdnum.settext(""); psw = psw.substring(0, 2); break; case 4: tvfourthnum.settext(""); psw = psw.substring(0, 3); break; case 5: tvfifthnum.settext(""); psw = psw.substring(0, 4); break; } } }</span><span style="font-size:18px;"> </span>
3,设置弹框样式
(1),在构造方法中设置样式 r.style.keyboard_dialog
<span style="font-size:14px;">public keyboarddialog(context context, int money) { super(context, r.style.keyboard_dialog); this.context = context; this.money = money;//要提现金额 setcanceledontouchoutside(true); }</span>
样式代码为
<span style="font-size:14px;"><style name="keyboard_dialog" parent="apptheme.base"> <item name="android:windowbackground">@android:color/transparent</item> <item name="android:windowframe">@null</item> <item name="android:windownotitle">true</item> <item name="android:windowisfloating">true</item> <item name="android:windowistranslucent">true</item> <item name="android:windowcontentoverlay">@null</item> <item name="android:windowanimationstyle">@android:style/animation.dialog</item> <item name="android:backgrounddimenabled">true</item> </style></span>
(2),在oncreate方法中设置弹框动画样式
<span style="font-size:14px;">window.setwindowanimations(r.style.keyboard_dialog_anim);</span>
样式代码为
<span style="font-size:14px;"><style name="keyboard_dialog_anim"> <item name="android:windowenteranimation">@anim/enter_dialog_anim</item> <item name="android:windowexitanimation">@anim/exit_dialog_anim</item> </style></span>
三,调用
调用很简单 一行就可以 需要返回数据就需要自行添加了
<span style="font-size:14px;"> new keyboarddialog(this, 1000).show();</span>
下面给大家推荐有关本站android方面的专题,大家可以参考下:
android 验证码功能 //www.jb51.net/special/899.htm
android recyclerview使用方法汇总 //www.jb51.net/special/855.htm
android listview常见功能 //www.jb51.net/special/850.htm
android控件imageview详细用法 //www.jb51.net/special/726.htm
android sdk基础教程 //www.jb51.net/special/637.htm
android 开发中缓存知识汇总 //www.jb51.net/special/622.htm
以上所述是小编给大家介绍的android仿支付宝微信支付密码界面弹窗封装dialog,希望对大家有所帮助