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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Android 自定义AlertDialog对话框样式
实际的项目开发当中,经常需要根据实际的需求来自定义AlertDialog.最近在开发一个WIFI连接的功能,点击WIFI需要弹出自定义密码输入框.在此权当记录 效果图 点击首页的Button即跳出对话框,显示WIFI信息(TextView),密码输入框(EditText),取消和连接按钮(Button) 实现 根据自己实际的需求,为AlertDialog创建一个布局,在此我需要定义一个如图所示的WIFI密码输入框,故在 res/layout 目录下建立一个 dialog_layout.xml 文
-
Android实现底部对话框BottomDialog弹出实例代码
最近项目上需要实现一个底部对话框,要实现这样的功能其实很简单,先看代码: private void show1() { Dialog bottomDialog = new Dialog(this, R.style.BottomDialog); View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_normal, null); bottomDialog.setContentView(contentV
-
Android仿IOS自定义AlertDialog提示框
本文介绍的仿IOS对话框的实现,先来看一下效果图 具体代码如下: public class AlertDialog { private Context context; private Dialog dialog; private LinearLayout lLayout_bg; private TextView txt_title; private TextView txt_msg; private Button btn_neg; private Button btn_pos; private
-
Android实现自定义圆角对话框Dialog的示例代码
前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话框的"确定"按钮 难点:1.对话框边框圆角显示 2.考虑到提示文本字数不确定,在不影响美观的情况下,需要在一行内显示提示的文字信息 3.设置对话框的宽和高 技术储备: 1.安卓开发_使用AlertDialog实现对话框 知道AlertDialog有setView(view) ,Dialog 有ContentView(view) 方法. 2.An
-
Android Dialog中软键盘的显示与隐藏的示例
1.写在前面 本篇的主要内容是关于在Dialog中软键盘的显示与隐藏问题,需求是在Dialog中有一个密码输入框,弹出Dialog显示软键盘,关闭Dialog隐藏软键盘. 嗯,是不是有点简单,不过在实现的过程中还是遇到了一些问题,在试过了网上大部分的方法之后,最终找到了一个还不错的方法,分享给大家. 看下效果图: 2.实现过程 先说说最开始的实现方法: // 显示Dialog dialog.show(); // 显示软键盘 SoftInputUtils.showSoftInput(activit
-
Android 常用log 关键字
记录下常用的log关键字 1.windowmanager接收到全局按键 WindowManager: interceptKeyTq keycode=26 interactive=false keyguardActive=true policyFlags=2000000 WindowManager: interceptKeyTq keycode=26 interactive=false keyguardActive=true policyFlags=2000000 down =true // 按下
-
Android中ProgressDialog的dismiss()与cancel()方法的区别
progressDialog, 它有两个方法dialog.cancel() 和 dialog.dimiss() 1. public void cancel () Since: API Level 1 Cancel the dialog. This is essentially the same as calling dismiss(), but it will also call your DialogInterface.OnCancelListener (if registered). 2.p
-
Android自定义dialog可选择展示年月日时间选择栏
自定义dialog package com.poptest; import android.app.DatePickerDialog; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.DatePicker; //dialog类 public class YearPickerDialog extends DatePickerD
-
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=&quo
-
js仿支付宝填写支付密码效果实现多方框输入密码
不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验.原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了. PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说
-
Android仿支付宝密码输入效果封装
模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa
-
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自定义View仿支付宝输入六位密码功能
跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
-
Android仿支付宝自定义密码输入框及安全键盘(密码键盘)
0.前言 之前做过的项目里有运用到一个支付场景:用户办理业务时需要输入交易密码,并且可根据平台下发的支付方式进行选择.这与支付宝的密码输入方式十分相似,如果使用Android系统或者第三方软件的键盘,会有密码泄露的风险.因此,大多数的应用软件使用的是自定义的密码输入框及安全键盘. 由于密码输入方式需要实现一个从底部弹出的效果,因此总体上决定采用BottomSheetDialog来进行封装,同时为了提高安全性,还应该随机生成键盘上的数字,界面如下图所示: 首先新建一个PasswordInpu
-
Android仿支付宝的头部伸缩动画效果
Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的.如此一来,一方面导航栏能够放得下更多控件,另一方面在用户想看具体内容时也能腾出更多的屏幕空间. 这么说可能比较抽象,那就先来看看两张导航栏的效果图,第一张是导航栏完全展开时的界面,此时页面头部的导航栏占据了较大部分的高度: 第二张是导航栏完全收缩时的界面,此时头部导航栏只剩矮矮的一个长条. 看起来很眼熟是不是,上面的截图正是仿支付宝首页的头部效果.如果你熟
-
Android 仿支付宝密码输入框效果
模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa
-
android仿支付宝密码输入框效果
本文实例为大家分享了android仿支付宝密码输入框展示的具体代码,供大家参考,具体内容如下 这个没什么好分析的,就是一些基本的绘制什么线,矩形什么的,看代码更具体 布局文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou