简单自定义Popwindow，仿支付宝微信密码输入弹出框

最新推荐文章于 2022-05-30 20:36:52 发布
最新推荐文章于 2022-05-30 20:36:52 发布
阅读量840 收藏 1
点赞数 1
分类专栏： Android demo 文章标签： android 密码 支付宝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34163551/article/details/78588915
版权

因APP增加了钱包功能，所以APP支付是迫在眉睫的事，市场上大多数的支付界面都是大同小异，因此写了下自定义PopupWindow，简单模仿下支付宝，本人也不常用PopupWindow，写的不好，希望大家海涵。

废话不多说，先上效果图
效果图

布局直接上代码吧，也不麻烦

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="305dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="35dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="请输入支付密码"
                android:textSize="@dimen/sp_16"/>
        </RelativeLayout>



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:clickable="false"
            android:focusable="false"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingLeft="15dp"
            android:paddingRight="15dp">

            <EditText
                android:id="@+id/ed1"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:background="@drawable/pay_bg_left"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:gravity="center"
                android:inputType="textPassword"
                />

            <EditText
                android:id="@+id/ed2"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:gravity="center"
                android:background="@drawable/pay_bg_center_left"
                android:inputType="textPassword"/>

            <EditText
                android:id="@+id/ed3"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:gravity="center"
                android:background="@drawable/pay_bg_center"
                android:inputType="textPassword"/>

            <EditText
                android:id="@+id/ed4"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:background="@drawable/pay_bg_center_left"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:gravity="center"
                android:inputType="textPassword"/>

            <EditText
                android:id="@+id/ed5"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:background="@drawable/pay_bg_center_right"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:gravity="center"
                android:inputType="textPassword"/>

            <EditText
                android:id="@+id/ed6"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:background="@drawable/pay_bg_right"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:gravity="center"
                android:inputType="textPassword"/>
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:paddingRight="15dp">

            <TextView
                android:id="@+id/fotPassword"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:gravity="right|center_vertical"
                android:text="忘记密码？"
                android:textColor="@color/title_txt"/>
        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/gray_btn_bg_color"
            android:layout_marginTop="5dp"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/black"
                android:textSize="20sp"/>

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />

            <TextView
                android:id="@+id/txt2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="2"
                android:textColor="@color/black"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txt3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="3"
                android:textColor="@color/black"
                android:textSize="20sp"/>
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/gray_btn_bg_color"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="4"
                android:textColor="@color/black"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txt5"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="5"
                android:textColor="@color/black"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txt6"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="6"
                android:textColor="@color/black"
                android:textSize="20sp"/>
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/gray_btn_bg_color"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt7"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="7"
                android:textColor="@color/black"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txt8"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="8"
                android:textColor="@color/black"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txt9"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="9"
                android:textColor="@color/black"
                android:textSize="20sp"/>
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/gray_btn_bg_color"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txtFinish"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txt0"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="0"
                android:textColor="@color/black"
                android:textSize="20sp"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_btn_bg_color"
                />
            <TextView
                android:id="@+id/txtBack"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:textColor="@color/black"/>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

我这里用的是十二个Textview做的按钮操作，大家可以尝试用GridView去操作，原理相同，下面再看看JAVA代码

我们先新建类继承PopupWindow，并添加构造器

public class TestPopWindow  extends PopupWindow{
    private Context mContext;

    public TestPopWindow(Context context){
        this.mContext=context;
    }
}

初始化控件

  public void init(Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        mPopWindow = inflater.inflate(R.layout.popwindow_password, null);
        ed1 = mPopWindow.findViewById(R.id.ed1);
        ed2 = mPopWindow.findViewById(R.id.ed2);
        ed3 = mPopWindow.findViewById(R.id.ed3);
        ed4 = mPopWindow.findViewById(R.id.ed4);
        ed5 = mPopWindow.findViewById(R.id.ed5);
        ed6 = mPopWindow.findViewById(R.id.ed6);
        password = new EditText[6];
        password[0] = ed1;
        password[1] = ed2;
        password[2] = ed3;
        password[3] = ed4;
        password[4] = ed5;
        password[5] = ed6;

        txt0 = mPopWindow.findViewById(R.id.txt0);
        txt1 = mPopWindow.findViewById(R.id.txt1);
        txt2 = mPopWindow.findViewById(R.id.txt2);
        txt3 = mPopWindow.findViewById(R.id.txt3);
        txt4 = mPopWindow.findViewById(R.id.txt4);
        txt5 = mPopWindow.findViewById(R.id.txt5);
        txt6 = mPopWindow.findViewById(R.id.txt6);
        txt7 = mPopWindow.findViewById(R.id.txt7);
        txt8 = mPopWindow.findViewById(R.id.txt8);
        txt9 = mPopWindow.findViewById(R.id.txt9);
        txtBack = mPopWindow.findViewById(R.id.txtBack);
        txtBack.setText("<<-");
        txtFinish = mPopWindow.findViewById(R.id.txtFinish);
        fotPassword = mPopWindow.findViewById(R.id.fotPassword);

        txt0.setOnClickListener(this);
        txt1.setOnClickListener(this);
        txt2.setOnClickListener(this);
        txt3.setOnClickListener(this);
        txt4.setOnClickListener(this);
        txt5.setOnClickListener(this);
        txt6.setOnClickListener(this);
        txt7.setOnClickListener(this);
        txt8.setOnClickListener(this);
        txt9.setOnClickListener(this);
        txtBack.setOnClickListener(this);
        txtFinish.setOnClickListener(this);
        fotPassword.setOnClickListener(this);
    }

然后设置PopupWindow,如窗口大小，动画效果等等

   public void setmPopWindow() {
        // 把View添加到PopWindow中
        this.setContentView(mPopWindow);
        //设置SelectPicPopupWindow弹出窗体的宽
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        //设置SelectPicPopupWindow弹出窗体的高
        this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        //  设置SelectPicPopupWindow弹出窗体可点击
        this.setFocusable(true);
        //  设置SelectPicPopupWindow弹出窗体动画效果
        this.setAnimationStyle(R.style.mypopwindow_anim_style);
        //   设置背景透明
        this.setBackgroundDrawable(new ColorDrawable(0x00000000));
    }

重写点击事件

 @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fotPassword:
                Toast.makeText(mContext, "忘记密码", Toast.LENGTH_SHORT).show();
                break;
            case R.id.txt1:
                getJudge(1);
                break;
            case R.id.txt2:
                getJudge(2);
                break;
            case R.id.txt3:
                getJudge(3);
                break;
            case R.id.txt4:
                getJudge(4);
                break;
            case R.id.txt5:
                getJudge(5);
                break;
            case R.id.txt6:
                getJudge(6);
                break;
            case R.id.txt7:
                getJudge(7);
                break;
            case R.id.txt8:
                getJudge(8);
                break;
            case R.id.txt9:
                getJudge(9);
                break;
            case R.id.txtBack:
               //增加判断，看是否清除完毕，防止数组越界
                if (currentIndex - 1 >= -1) {
                    password[currentIndex--].setText("");
                }
                break;
            case R.id.txt0:
                getJudge(1);
                break;
            case R.id.txtFinish:
                Toast.makeText(mContext, getStrPassword(), Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
   /***
     * 增加判断，看是否输入够6位，防止数组越界
     * @param num
     */
    private void getJudge(int num) {
        if (currentIndex >= -1 && currentIndex < 5) {
            password[++currentIndex].setText(num + "");
        }
    }

最后设置监听，当密码达到第六位时调用接口达成支付

    /**
     * 设置监听方法，在第6位输入完成后触发
     */
    public void setOnFinishInput(final OnPasswordInputFinish passwordInputFinish) {
        password[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 += password[i].getText().toString().trim();
                    }
                }
                passwordInputFinish.inputFinish();
            }
        });
    }

最后调用


public class MainActivity extends AppCompatActivity {
    private TextView mtest;
    private TestPopWindow mPopupWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mtest = (TextView) findViewById(R.id.test);

        mtest.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mPopupWindow = new TestPopWindow(MainActivity.this);
                mPopupWindow.showAtLocation(MainActivity.this.findViewById(R.id.testsss), Gravity.BOTTOM | Gravity
                        .CENTER_HORIZONTAL, 0, 0);
                darkenBackground(0.8f);
                mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        darkenBackground(1f);
                    }
                });
                //添加密码输入完成的响应
                mPopupWindow.setOnFinishInput(new TestPopWindow.OnPasswordInputFinish() {
                    @Override
                    public void inputFinish() {
                        //输入完成后我们简单显示一下输入的密码
                        //也就是说——>实现你的交易逻辑什么的在这里写
                        Toast.makeText(MainActivity.this, mPopupWindow.getStrPassword(), Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }


    /**
     * 改变背景颜色,灰色
     */
    private void darkenBackground(Float bgcolor) {
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.alpha = bgcolor;

        getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
        getWindow().setAttributes(lp);
    }
}

代码下载

cyt_victory
关注
专栏目录
微信小程序 - 实现气泡菜单组件，点击一个元素在附近弹出一个气泡弹框功能效果（仿微信气泡弹框显示菜单），支持自定义气泡框内的内容，自动计算气泡定位。
王佳斌
05-19 6437
微信小程序气泡菜单弹框，微信小程序实现气泡弹框菜单，微信小程序气泡框菜单列表，微信小程序类似微信气泡菜单，微信小程序仿微信气泡弹框显示菜单，微信小程序气泡菜单自动定位，微信小程序怎么实现气泡菜单，微信小程序官方气泡菜单插件，微信小程序实现微信点击加号弹出的气泡框菜单，微信小程序气泡菜单气泡框，微信小程序点击一个元素在附近弹出一个弹框，微信小程序文字提示气泡框，微信小程序实现气泡弹出形式的菜单列表，微信小程序最好用的气泡菜单组件插件，微信小程序气泡菜单详细教程，微信小程序自动定位的气泡菜单弹框，微信小程序如何
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
Android仿微信支付密码弹出层功能
08-30
最近项目中使用到了支付密码功能，感觉这类界面应该是比较常用的，涉及支付密码的输入的一般都会用到吧，所以单独地把这部分抽取出来，有需要的朋友可以拿去用用
Android仿微信支付密码弹出层
weixin_33860147的博客
04-24 300
开始 最近项目中使用到了支付密码功能，感觉这类界面应该是比较常用的，涉及支付密码的输入的一般都会用到吧，所以单独地把这部分抽取出来，有需要的朋友可以拿去用用。 预览 使用 这个弹出层是一个DialogFragment，逻辑都封装在其内部，使用起来很简单： Bundle bundle = new Bundle(); bundle.putString(PayFragment.EXTRA_CONTEN...
Android仿支付宝微信支付密码界面弹窗封装dialog
08-31
主要介绍了Android仿支付宝微信支付密码界面弹窗封装dialog的实例代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
android-使用PopupWindow实现随机排列的自定义密码键盘
www.jiav.net技术网站的加盟博客
01-25 103
效果图： MainActivity.java View keyboardView = LayoutInflater.from(this).inflate( R.layout.random_keyboard, null); Display display = getWindowManager().getDefaultDisplay(); int height...
2017年最牛逼的分类Android项目源码免费一次性打包下载！
源码分享的博客
03-29 2万+
之前发过一个帖子，但是那个帖子有点问题我就重新发一个吧，下面的源码是我从今年开始不断整理源码区和其他网站上的安卓例子源码，目前总共有810套左右，根据实现的功能被我分成了100多个类，总共接近2.5G，还在不断更新。初学者可以快速方便的找到自己想要的例子，大神也可以看一下别人的方法实现。虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的，但是既然这些例子是来自于社区那就让他们免费回归社区吧，（...
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5030
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
Android 上千实例源码分析以及开源分析
吧主
04-12 9088
Android 上千实例源码分析以及开源分析（百度云分享） 要下载的直接翻到最后吧，项目实例有点多。 首先 介绍几本书籍(下载包中)吧。 01_Android系统概述 02_Android系统的开发综述 03_Android的Linux内核与驱动程序 04_Android的底层库和程序 05_Android的JAVA虚拟机和JAVA环境 06_Android的GUI系统 07_A
iOS仿支付宝输入密码控件
10-18
这是一个模仿支付宝输入支付密码的密码框，方便开发者完成类似于支付宝输入支付密码的功能。（GitHub下载地址：https://github.com/chernyog/CYPasswordView）
简单仿支付宝Popwindo弹出框控件
11-21
自定义仿支付宝密码支付弹出框控件，注释详细，代码简单
Android自定义View仿支付宝输入六位密码功能，自定义支付密码PopupWindow
04-17
当输入六位密码完成后用回调,已经做了处理，只需要加上你自己的方法就可以请求网络
android仿微信PopupWindow示例
03-16
Android封装类似微信的顶部TitleBar弹出的PopupWindow代码，博客地址： http://blog.csdn.net/yaochangliang159/article/details/50906922 该博客有gif动画示例
Android自定义弹窗模仿微信,android自定义仿微信、支付宝 密码输入框
weixin_29306875的博客
05-25 340
效果图：截图.png直接上代码：/*** Description: 密码 输入框* Created by zouyulong on 2017/7/31.*/public class CustomPasswordInputView extends EditText {private Context mContext;/*** 第一个密码实心圆的圆心坐标*/private float mFirstCi...
自定义密码输入框(仿微信支付宝支付)
qq_35654614的博客
09-04 1639
话不多说 ,先看效果 看到这样的效果图,首先要缕清思路在动手敲代码 1.每一个输入框的格子可以使用drawRoundRect(RectF rect, float rx, float ry, Paint paint)方法画出来 2.格子中间的明文和密文的绘制,明文可以直接drawText(),密文可以直接画圆 3.点击这个View唤起软键盘,这里只能输入纯数字密码,监听输入的数字,绘制出来
仿支付宝微信支付密码界面弹窗封装dialog
Aragon_的博客
03-21 1383
一，功能效果 二，实现过程 1，先写xml文件：dialog_keyboard.xml     注意事项 （1），密码部分用的是一个线性布局中6个TextView，并设置android:inputType="numberPassword"，外框是用的一个有stroke属性的shape， （2），1-9数字是用的recycleview ，每个item的底部和右边有1dp的黑线，填充
Android付款popupWindow
yujin137的博客
12-10 335
一般项目中使用popupwindow如果只是当前页面特定的popup样式，我会直接写在当前的fragment或者activity中。如果有一个以上的地方需要展示同样的效果，我会对改popupwindow进行一个封装，也就是自定义一个popupwindow，记录下项目中用到的一个支付popupwindow这是效果图popupwindow类package com.daweiying.daweiying...
Android自定义PopWindow实现社交应用弹出菜单
"Android自定义PopWindow实现QQ、微信弹出菜单效果" 在Android开发中，PopWindow是一个非常实用的功能，它能实现各种弹出式菜单、对话框等效果，类似于iOS中的AlertController。本资源主要讲解如何在Android中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值