Android开发仿微信支付宝的支付密码布局

不多哔哔先给一个传送门 demo传送门

1. 密码输入布局的实现

数字键盘已经有了，剩下的主要是密码输入的布局。这里想到了一个简单的思路，利用 6 个 ImageView 来显示小黑点就可以了，每次按下数字键显示一个小黑点，按下删除键则隐藏一个小黑点。

布局文件非常简单，6 个横向排列的 FrameLayout 分别放入一个 ImageView，之后会给出源码。代码部分的实现：

/*** 密码输入布局（6位密码）* Created by ayuhani on 2017/6/29.*/
public class PasswordView extends RelativeLayout {private String[] numbers;   // 用来保存输入的密码private ImageView[] points; // 用来保存每个小黑点private FrameLayout[] frameLayouts;public PasswordView(Context context) {this(context, null);}public PasswordView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}private void init(Context context) {numbers = new String[6];points = new ImageView[6];frameLayouts = new FrameLayout[6];LayoutInflater.from(context).inflate(R.layout.layout_password, this);points[0] = findViewById(R.id.iv_0);points[1] = findViewById(R.id.iv_1);points[2] = findViewById(R.id.iv_2);points[3] = findViewById(R.id.iv_3);points[4] = findViewById(R.id.iv_4);points[5] = findViewById(R.id.iv_5);// 这里获取外层的FrameLayout，是因为之后要给它们添加点击事件frameLayouts[0] = findViewById(R.id.fl_0);frameLayouts[1] = findViewById(R.id.fl_1);frameLayouts[2] = findViewById(R.id.fl_2);frameLayouts[3] = findViewById(R.id.fl_3);frameLayouts[4] = findViewById(R.id.fl_4);frameLayouts[5] = findViewById(R.id.fl_5);}// 获取保存6位密码的数组public String[] getNumbers() {return numbers;}// 获取保存小黑点的数组public ImageView[] getPoints() {return points;}// 获取小黑点密码父布局的数组（用来添加点击事件）public FrameLayout[] getFrameLayouts() {return frameLayouts;}// 获取6位支付密码public String getPassword() {StringBuilder builder = new StringBuilder();for (int i = 0; i < numbers.length; i++) {if (numbers[i] != null) {builder.append(numbers[i]);}}return builder.toString();}// 清空密码public void clear() {for (int i = 0; i < numbers.length; i++) {numbers[i] = null;}for (int i = 0; i < points.length; i++) {points[i].setVisibility(GONE);}}
}

2. 利用 PopupWindow 实现仿微信的支付布局

xml 也不贴出来了，效果如图

自定义类继承自 PopupWindow，关联上面的布局文件

/*** 仿微信支付布局* Created by ayuhani on 2017/6/29.*/
public class WeChatPayWindow extends PopupWindow implements KeyboardAdapter.OnKeyboardClickListener {private ImageView ivClose;  // 关闭按钮private ImageView ivIcon;   // 头像private TextView tvTitle;   // 标题private TextView tvMessage; // 消费详情private TextView tvPrice;   // 价格private PasswordView passwordView;private KeyboardView keyboardView;private List<String> datas;private String[] numbers;private ImageView[] points;private int currentIndex;   // 当前即将要输入密码的格子的索引public OnPasswordFinishedListener listener;public WeChatPayWindow(Context context) {super(context);init(context);}private void init(Context context) {View contentView = LayoutInflater.from(context).inflate(R.layout.layout_wechat_pay, null);setContentView(contentView);setHeight(ViewGroup.LayoutParams.MATCH_PARENT);setWidth(ViewGroup.LayoutParams.MATCH_PARENT);setFocusable(true);setClippingEnabled(false); // 让PopupWindow同样覆盖状态栏setBackgroundDrawable(new ColorDrawable(0xAA000000)); // 加上一层黑色透明背景initView(contentView);}private void initView(View contentView) {// 获取布局中的各个控件ivClose = contentView.findViewById(R.id.iv_close);ivIcon = contentView.findViewById(R.id.iv_icon);tvTitle = contentView.findViewById(R.id.tv_title);tvMessage = contentView.findViewById(R.id.tv_message);tvPrice = contentView.findViewById(R.id.tv_price);passwordView = contentView.findViewById(R.id.password_view);keyboardView = contentView.findViewById(R.id.keyboard_view);ivClose.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {dismiss();}});keyboardView.setOnKeyBoardClickListener(this);datas = keyboardView.getDatas();numbers = passwordView.getNumbers();points = passwordView.getPoints();// 这里给每个FrameLayout添加点击事件，当键盘被收起时点击空白输入框，再次弹出键盘// 微信也是这样的，但我觉得并没有什么意义for (int i = 0; i < passwordView.getFrameLayouts().length; i++) {final int finalI = i;passwordView.getFrameLayouts()[i].setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (points[finalI].getVisibility() != View.VISIBLE && !keyboardView.isVisible()){keyboardView.show();}}});}}// 可以自定义一些方法public WeChatPayWindow setIcon(String url) {// 设置头像return this;}public WeChatPayWindow setTitle(CharSequence title) {tvTitle.setText(title);return this;}public WeChatPayWindow setMessage(CharSequence message) {tvMessage.setText(message);return this;}public WeChatPayWindow setPrice(CharSequence price) {tvPrice.setText(price);return this;}// 弹出PopupWindowpublic void show(View rootView) {showAtLocation(rootView, Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);}@Overridepublic void onKeyClick(View view, RecyclerView.ViewHolder holder, int position) {switch (position) {case 9: // 点击小数点没有作用，最好是把小数点隐藏掉，我这里偷懒了break;default:if (currentIndex >= 0 && currentIndex < numbers.length) {numbers[currentIndex] = datas.get(position);points[currentIndex].setVisibility(View.VISIBLE);currentIndex++; // 当前位置的密码输入后，位置加一if (currentIndex == numbers.length && listener != null) {// 已经输入了六位数的密码了，回调方法listener.onFinish(passwordView.getPassword());}}}}@Overridepublic void onDeleteClick(View view, RecyclerView.ViewHolder holder, int position) {// 点击删除按钮if (currentIndex > 0 && currentIndex < numbers.length) {currentIndex--;numbers[currentIndex] = "";points[currentIndex].setVisibility(View.GONE);}}// 写一个回调接口，输入密码完成后调用public interface OnPasswordFinishedListener {void onFinish(String password);}public void setOnPasswordFinishedListener(OnPasswordFinishedListener listener) {this.listener = listener;}
}

在 Activity 里面显示就可以了。动态图：

3. 仿支付宝支付布局的实现

支付宝支付时有选择支付方式、指纹支付等高级功能，我这里则只是简单的实现了密码输入，和上面的实现一样，只是布局不同，所以我也不贴代码了，直接看效果吧：

Android开发仿微信支付宝的支付密码布局相关推荐

android录音声波动画,Android开发:仿微信录音声波
最近在仿微信开发聊天界面:开发到一个有意思的小东西,简单写一写.就是录音声波这块. 首先先添加几个图片添加如上三个声波图表之后建立一个数组 private int[] images = {R.mi ...
php仿微信朋友圈源码,Android开发仿微信发朋友圈浏览图片效果实例代码
这篇文章主要介绍了Android仿微信发朋友圈浏览图片效果的相关资料,需要的朋友可以参考下先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路1.首先我们要获取数据源,数据源就是我们的每条说说 ...
Android 开发仿微信位置分享
仿微信位置共享效果图源码下载 http://download.csdn.net/detail/en24414115/9319161
android开发--仿微信朋友圈界面
话不多说,先来看两张效果图看图片效果还凑合,就是"朋友圈"三个字和头像的动画过渡效果和微信朋友圈的实际效果还是有点差距,可以的话以后慢慢再优化吧,这里贴出相关的代码,可能部分代码 ...
Android高仿微信/支付宝扫一扫（弱光检测扫一扫自动放大功能）
原文地址前言目前市面上App携带的扫一扫功能大多是乞丐版,怎么说,就是只有扫一扫.而目前来说扫一扫做的最好的还是微信,微信有弱光环境的检测(可以自动提示用户打开闪光灯),同时,当发现扫描目标距离 ...
Android开发--仿微信语音对讲录音
在此感谢鸿洋大神,因为我这是在慕课上看大神的视频做出来的. 代码中我已经添加了很多很多注释,不光是为了大家,也是为了自己能够更加透彻的理解该功能支持原创,也不算原创了哈哈~ http://blog. ...
仿微信支付宝支付密码
仿微信支付宝支付密码效果图: 一.主要知识点 GridLayout的应用 EditText的textCursorDrawable的应用 InputMethodManager的应用 TextWatch ...
php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
android仿微信点击好友,安卓开发仿微信联系人列表-机器人列表视图仿微通道聊天多久最底部滑动...
楼主你好!根据你的描述,让我给你答案! :新内容加进来,列表视图重新为setSelection后,定位结束后,拉起一个页面放. . 希望你能有所帮助,如果满意,请记得采纳像下拉条为微信好友如何实现简 ...
android 仿简书评论,Android 开发仿简书登录框可删除内容或显示密码框的内容
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...

Android开发仿微信支付宝的支付密码布局

不多哔哔先给一个传送门 demo传送门

1. 密码输入布局的实现

2. 利用 PopupWindow 实现仿微信的支付布局

3. 仿支付宝支付布局的实现

Android开发仿微信支付宝的支付密码布局相关推荐

最新文章

热门文章

Android开发仿微信支付宝的支付密码布局

不多哔哔 先给一个传送门 demo传送门

1. 密码输入布局的实现

2. 利用 PopupWindow 实现仿微信的支付布局

3. 仿支付宝支付布局的实现

Android开发仿微信支付宝的支付密码布局相关推荐

最新文章

热门文章

不多哔哔先给一个传送门 demo传送门