仿微信/支付宝的自定义提现密码输入（二）

最新推荐文章于 2021-12-18 11:58:09 发布
最新推荐文章于 2021-12-18 11:58:09 发布
阅读量381 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fugang1230/article/details/79108848
版权

根据项目要求对上个输入框进行了处理：

改动如下：

1.弹框的标题栏移到curtomdialog里处理，避免在自定义控件中进行点击事件。

2.实现弹框的取消，和忘记密码的点击事件

dialog_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context="com.example.myapplication.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="81dp"
        android:orientation="vertical">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="5dp"
        android:id="@+id/relativeLayout">

        <!-- 取消按钮 -->

        <ImageView
            android:id="@+id/img_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_clean"
            android:layout_centerVertical="true"
            />

        <TextView
            android:id="@+id/dialog_title"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="输入提现密码"
            android:textColor="#333333"
            android:textSize="14sp" />
    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#e0e0e0" />

    <!-- 6位密码框布局，需要一个圆角边框的shape作为layout的背景 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="提现金额600元"
        android:textSize="13sp"
        android:gravity="center"
        android:layout_marginTop="10dp"/>

    </LinearLayout>
    <com.example.myapplication.PasswordView
        android:id="@+id/pwd_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        />
    <!--<!– 忘记密码链接 –>-->
    <!--<RelativeLayout-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="30dp"-->
        <!--android:layout_gravity="center_vertical"-->
        <!--android:layout_marginTop="15dp">-->

        <!--<TextView-->
            <!--android:id="@+id/tv_title1"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="match_parent"-->
            <!--android:text="提现后预计一到三个小时到账"-->
            <!--android:textColor="#b3b3b3"-->
            <!--android:layout_marginLeft="20dp"/>-->

        <!--<TextView-->
            <!--android:id="@+id/tv_forgetPwd"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="match_parent"-->
            <!--android:layout_alignParentRight="true"-->
            <!--android:text="忘记密码？"-->
            <!--android:textColor="#4d4d4d"-->
            <!--android:layout_marginRight="20dp"/>-->
    <!--</RelativeLayout>-->
</RelativeLayout>

layout_password.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_bottom"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linear_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">



        <!--<View-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="0.5dp"-->
            <!--android:background="#e0e0e0" />-->

        <!--<!– 6位密码框布局，需要一个圆角边框的shape作为layout的背景 –>-->
        <!--<TextView-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="30dp"-->
            <!--android:text="提现金额600元"-->
            <!--android:textSize="19sp"-->
            <!--android:gravity="center"-->
            <!--android:layout_marginTop="10dp"/>-->

        <LinearLayout
            android:id="@+id/ll_pwd"
            android:layout_width="match_parent"
            android:layout_height="43dp"
            android:layout_marginLeft="22dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/shape_input_area"
            android:orientation="horizontal">
            <!--

                             inputType设置隐藏密码明文
                             textSize设置大一点，否则“点”太小了，不美观!-->


                        <!--<TextView-->
                            <!--android:id="@+id/tv_pass1"-->
                            <!--android:layout_width="0dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:layout_weight="1"-->
                            <!--android:gravity="center"-->
                            <!--android:inputType="numberPassword"-->
                            <!--android:textSize="32sp" />-->

                        <!--<View-->
                            <!--android:layout_width="1dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:background="#999999" />-->

                        <!--<TextView-->
                            <!--android:id="@+id/tv_pass2"-->
                            <!--android:layout_width="0dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:layout_weight="1"-->
                            <!--android:gravity="center"-->
                            <!--android:inputType="numberPassword"-->
                            <!--android:textSize="32sp" />-->

                        <!--<View-->
                            <!--android:layout_width="1dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:background="#999999" />-->

                        <!--<TextView-->
                            <!--android:id="@+id/tv_pass3"-->
                            <!--android:layout_width="0dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:layout_weight="1"-->
                            <!--android:gravity="center"-->
                            <!--android:inputType="numberPassword"-->
                            <!--android:textSize="32sp" />-->

                        <!--<View-->
                            <!--android:layout_width="1dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:background="#999999" />-->

                        <!--<TextView-->
                            <!--android:id="@+id/tv_pass4"-->
                            <!--android:layout_width="0dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:layout_weight="1"-->
                            <!--android:gravity="center"-->
                            <!--android:inputType="numberPassword"-->
                            <!--android:textSize="32sp" />-->

                        <!--<View-->
                            <!--android:layout_width="1dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:background="#999999" />-->

                        <!--<TextView-->
                            <!--android:id="@+id/tv_pass5"-->
                            <!--android:layout_width="0dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:layout_weight="1"-->
                            <!--android:gravity="center"-->
                            <!--android:inputType="numberPassword"-->
                            <!--android:textSize="32sp" />-->

                        <!--<View-->
                            <!--android:layout_width="1dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:background="#999999" />-->

                        <!--<TextView-->
                            <!--android:id="@+id/tv_pass6"-->
                            <!--android:layout_width="0dp"-->
                            <!--android:layout_height="match_parent"-->
                            <!--android:layout_weight="1"-->
                            <!--android:gravity="center"-->
                            <!--android:inputType="numberPassword"-->
                            <!--android:textSize="32sp" />-->
        </LinearLayout>

        <!-- 忘记密码链接 -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_marginTop="15dp">

            <TextView
                android:id="@+id/tv_title1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="提现后预计一到三个小时到账"
                android:textColor="#b3b3b3"
                android:layout_marginLeft="20dp"/>

            <TextView
                android:id="@+id/tv_forgetPwd"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:text="忘记密码？"
                android:textColor="#4d4d4d"
                android:layout_marginRight="20dp"/>
        </RelativeLayout>
    </LinearLayout>

    <!-- 输入键盘 -->


</RelativeLayout>
在自定义控件passwordView中的接口中做了忘记密码的点击事件处理 

public interface OnPasswordInputFinish {
        void inputFinish();
        void onClick();
    }
// 设置监听方法，在第6位输入完成后触发
    public void setOnFinishInput(final OnPasswordInputFinish pass) {
        forgetPassword.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                pass.onClick();
            }
        }); //点击忘记密码需要实现的方法

        tvList[5].addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count,
                                          int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before,
                                      int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (s.toString().length() == 1) {
                    strPassword = ""; // 每次触发都要先将strPassword置空，再重新获取，避免由于输入删除再输入造成混乱
                    for (int i = 0; i < 6; i++) {
                        strPassword += tvList[i].getText().toString().trim();
                    }
                    if (pass != null) {
                        pass.inputFinish(); // 接口中要实现的方法，完成密码输入完成后的响应逻辑
                    }
                }
            }
        });
    }
这样创建自定义控件时，就可以实现其中的方法

CurtomDialog.java

package com.example.myapplication;


import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.DialogFragment;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;


/**
 * Created by 付刚 on 2017/11/27.
 */

public class CustomDialog extends DialogFragment {

    private PasswordView pwdView;
    private ImageView cancel;
    private TextView title;

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = new Dialog(getActivity(), R.style.Dialog);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setCanceledOnTouchOutside(true);
        /**设置宽度为屏宽、靠近屏幕底部*/
        Window window = dialog.getWindow();
        /**设置背景透明*/
        window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        WindowManager.LayoutParams wlp = window.getAttributes();
        wlp.gravity = Gravity.BOTTOM;
        dialog.setContentView(R.layout.dialog_normal);
        wlp.width = WindowManager.LayoutParams.MATCH_PARENT;
        wlp.height = (int) getResources().getDimension(R.dimen.custom_hei);
        window.setAttributes(wlp);
        initViews(dialog);
        return dialog;
    }

    private void initViews(Dialog dialog) {
        pwdView = dialog.findViewById(R.id.pwd_view);
        cancel=dialog.findViewById(R.id.img_cancel);
        title=dialog.findViewById(R.id.dialog_title);
        pwdView.setOnFinishInput(new PasswordView.OnPasswordInputFinish() {
            @Override
            public void inputFinish() {
                Toast.makeText(getActivity(), pwdView.getStrPassword(), Toast.LENGTH_SHORT).show();
                Log.e("fugang", "密码是" + pwdView.getStrPassword());
            }

            @Override
            public void onClick() {
                Toast.makeText(getActivity(), "忘记密码", Toast.LENGTH_SHORT).show();
                Log.e("fugang", "密码是" + pwdView.getStrPassword());
            }
        });
        cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dismiss();
            }
        });


    }
}

这样就可以了，可以实现项目中需求

源码下载http://download.youkuaiyun.com/download/fugang1230/10214579





狂发小生
关注
微信小程序自定义键盘|仿微信支付数字键盘
Luo的博客
02-24 4798
实现效果 简介 点击金额模块区域，获取焦点。 点击非金额模块区域，失去焦点且隐藏支付键盘。 支持小数点两位数字。 付款金额默认置灰，点击付款按钮无效。当输入付款金额后，付款按钮还原正常状态。 删除按钮可以通过icon图标或者图片来替换，达到和微信数字支付键盘一样的效果。 有更合适的实现方式或者代码不合理的地方，欢迎留言交流 实现代码 // index.wxml <view class="pay-container" catchtap="handleHiddenKey"> <
基于uniapp微信小程序我的钱包页面
最新发布
03-26
而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、支付宝小程序等多个平台的应用。本教程将深入探讨如何使用uniapp来开发一个“我的钱包”页面，主要涉及以下几个关键知识点： 1. **uniapp...
仿微信/支付宝的自定义提现密码输入
01-19
实现自定义密码框输入功能，以弹框的形式显示。 实现弹框的取消，和忘记密码的点击事件
仿微信提现页面，HTML+CSS+JQuery
08-15
仿微信提现页面，HTML+CSS+JQuery开发，代码通俗易懂。
仿微信钱包领取页面
热门推荐
12-18 3万+
哈尔滨洛弘科技- 仿微信红包代码分享
android仿支付提现功能,Android应用开发Android 仿微信支付密码界面
weixin_39861054的博客
05-26 443
本文将带你了解Android应用开发Android 仿微信支付密码界面，希望本文对大家学Android有所帮助。使用Bundle bundle = new Bundle();bundle.putString(PayFragment.EXTRA_CONTENT, 提现：￥ + 100.00);PayFragment fragment = new PayFragment();fragment.set...
html模仿微信支付页面
04-05
html css jquery 模仿微信支付页面，用于微信公众号支付，展示微信支付页面。jquery微信支付代码
自定义密码输入框实现仿微信/支付宝提现功能
通过上述分析，可以得知，在开发一个仿微信或支付宝的自定义提现密码输入功能时，需要综合考虑用户界面的友好性、输入操作的简便性、安全性的保障以及错误处理机制。实现这样的功能，要求开发者不仅要具备扎实的前端...
DZ插件 提现到微信&支付宝 商业运营V-5.2.rar
11-15
简洁版V-5.0.2插件简介 1.站长安装本插件可以让论坛的积分动起来。 2.可以提现到微信账号 ...4.站长可以在后台自定义提现积分类型和提现比例。 5.可以设置最低提现金额 6.界面美观大方，高端大气。
html提现页面,提现.html · Jinleit/融合V1.0 - Gitee.com
weixin_30563489的博客
06-03 286
提现$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath =...
微信支付demo(android)
05-31
内有如何运行，和如何使用的详细说明，并附带 解决-1，签名错误等问题的博客，该demo内只集成了 微信支付功能，代码简洁好用。
模仿微信转账输入框规则
12-07
模仿微信转账输入框规则的demo
android模仿支付密码输入效果
06-01
android的模仿购物类app输入支付密码的UI效果
仿支付宝去支付页面
02-11
仿支付宝去支付页面 , 界面随便弄的 不是很美观 但是功能还是可以的
html的提现页面,提现成功.html · dengzhao/prd_zhangyao - Gitee.com
weixin_30988079的博客
06-07 301
提现成功$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
仿微信/支付宝的自定义提现密码输入（一）
狂发小生的博客
01-19 1473
项目上要实现提现到银行卡的功能，自己查找资料，顺便写了个demo。自定义的输入框感觉效果不错，分享出来。一，整体分为多个布局用addview加载，键盘和上边的密码输出框，布局文件： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_bottom"
仿支付宝微信提现输入判断
u011553874的博客
10-18 972
下面是支付宝，微信充值要求的可以输入什么值不可以输入什么值要求，保留俩位有效数字，其他等等 mMoney.addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int before,
HTML5仿手机微信聊天界面
叶落无痕的博客
06-03 2万+
HTML5仿手机微信聊天界面，截图效果如下： 源代码如下： HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值