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 验证码功能  http://www.jb51.net/Special/899.htm

Android RecyclerView使用方法汇总    http://www.jb51.net/Special/855.htm

Android ListView常见功能   http://www.jb51.net/Special/850.htm

Android控件imageview详细用法   http://www.jb51.net/Special/726.htm

Android SDK基础教程   http://www.jb51.net/Special/637.htm

Android 开发中缓存知识汇总  http://www.jb51.net/Special/622.htm

以上所述是小编给大家介绍的Android仿支付宝微信支付密码界面弹窗封装dialog,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-01 16:59:14

Android仿支付宝微信支付密码界面弹窗封装dialog的相关文章

js仿支付宝填写支付密码效果实现多方框输入密码_javascript技巧

不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验.原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了. PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说

Android高仿微信支付密码输入控件_Android

像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思路应该这样子. Ⅰ.将要输入密码数量动态通过代码加载出来. Ⅱ.利用Gridview模拟产生一个输入数字键盘,并且按照习惯从屏幕底部弹出来. Ⅲ.对输入数字键盘进行事件监听,将这个输入数字填入到这个密码框中,并且当您输入密码长度一致的时候,进行事件回调. 这个思维导图应该是这样的: 首先,我们要根据需求动态加

Android仿微信支付密码弹出层功能

预览 使用 这个弹出层是一个DialogFragment,逻辑都封装在其内部,使用起来很简单: Bundle bundle = new Bundle(); bundle.putString(PayFragment.EXTRA_CONTENT, "提现:¥ " + 100.00); PayFragment fragment = new PayFragment(); fragment.setArguments(bundle); fragment.setPaySuccessCallBack(

Android高仿微信支付密码输入控件

像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思路应该这样子. Ⅰ.将要输入密码数量动态通过代码加载出来. Ⅱ.利用Gridview模拟产生一个输入数字键盘,并且按照习惯从屏幕底部弹出来. Ⅲ.对输入数字键盘进行事件监听,将这个输入数字填入到这个密码框中,并且当您输入密码长度一致的时候,进行事件回调. 这个思维导图应该是这样的: 首先,我们要根据需求动态加

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

跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

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

跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

新版Android studio导入微信支付和支付宝官方Demo问题解决大全_Android

最近项目要用到支付宝支付和微信支付,本想使用第三方支付框架ping++或者BeeCloud的,但是由于他们的收费问题,让我望而却步,而且公司给了相应的公钥.私钥和APPID等,所以就用下开放平台的呗.  进去倒腾了半天才发现一堆问题,Oh,我的天.完全不知所云,百度谷歌了一堆,都没找到足够的解决方案.好吧,自己来,这里也就把相关的东西分享给大家,如果有类似问题的可以考虑使用一下,不足的地方大牛就别喷了.  微信开放平台有文档和SDK,大家可以去自己查看下载,火箭:https://open.wei

Android 仿支付宝密码输入框效果_Android

模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助.   1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(

Android接入支付宝实现支付功能

Android接入支付宝实现支付功能 我本来是想直接讲Android支付这一块的,包括支付宝,微信,其他第三方整合支付等,但是微信开放平台他对我的账号做了限制,所有我今天就先把重心放在支付宝的支付上,也算是写得尽可能详细些吧,毕竟是第三方的SDK,只要我们耐心的阅读文档和开发引导,这个其实不是很难的,我也是没有用过支付宝的支付,但是我相信,你看完这篇博客,也会对他了如指掌的,好的,我们正文开始 一.准备步骤 1.登录官网 他的官网就是蚂蚁金服的开放平台了,我们可以访问 蚂蚁金服开放平台 ,并且注