Android 仿「微信」「支付宝」的支付密码布局

最新推荐文章于 2023-10-26 09:14:35 发布

ayuhani

最新推荐文章于 2023-10-26 09:14:35 发布

阅读量2.2k

点赞数 2

分类专栏： Android 杂货铺文章标签： Android 支付宝密码微信支付

本文链接：https://blog.csdn.net/qq_24867873/article/details/74231623

版权

本文基于上一篇关于自定义数字键盘的文章，详细介绍了如何实现Android中仿微信和支付宝的支付密码输入布局。通过6个ImageView展示小黑点来模拟密码，结合PopupWindow构建出微信支付的弹窗效果，并展示了仿支付宝支付布局的实现过程。

摘要由CSDN通过智能技术生成

文章已同步至简书：http://www.jianshu.com/p/eda733e622cf

引言

在上一篇文章 Android 仿「微信」自定义数字键盘中，我们实现了自定义的数字键盘，这篇文章就在其基础上，简单实现微信和支付宝的支付布局（一定要先看上一篇文章）。实现效果：

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);