Android实用View系列-----仿微信支付宝等风格的支付密码输入框的实现 - 简书
Android实用View系列-----仿微信支付宝等风格的支付密码输入框的实现
开始阅读本篇文章之前先来说一下使用场景吧，我们知道如今移动支付已经占据我们日常支付的90%的份额，以微信支付和支付宝支付为主，也越来越多的APP开始添加支付模块，不管使用哪种支付有一个步骤是少不了的，那就是输入支付密码(指纹支付再此就不做讨论了哦)，所以今天来给大家带来一篇自定义支付密码输入框的设计和实现方式，同时记录自己工作中遇到的问题及解决办法。
github源码地址
按照惯例我们先看看微信和支付宝支付密码输入框的样式吧
微信支付密码
支付宝支付密码
看到这样的效果相信很多开发者第一反应就是先网上搜一下看看有没有现成的（哈哈，我也不例外哦），因为这都是简单的一些view不涉及动画所以网上相关例子还是很多的，我这边总结了一下大致可以分为一下几类
1、通过布局的方式：
在布局里边放置6个EditView,在每个输入框中间再放置一个view用于设置中间分割线，每个EditVIew只允许输入一个字符，然后对每个进行监听，一个密码输入完之后让另一个EditView获取焦点，以此类推就可以大致实现图中的效果了（这样确实可以实现，实现起来也很简单，但是代码量不少，而且这种方式是不是显得逼格不够高或者没有逼格呐）
2、完全自定义view（继承View）：
这个就稍微复杂一点，大致流程是，先监听触摸事件，按下时弹出键盘，然后对软键盘进行监听，获取每次点击键盘对应的字符串，然后在onDraw方法里边画6个圆，在绘制外边框，然后是中间的分割线。这里边有个问题就是每次都要对软键盘进行监听取值等一系列操作，加上Android机型众多整不好哪块软键盘就出问题了呐。（虽然有逼格，但是不实用哦）
3、继承自EditView实现自定义view:
大致流程和上一种差不多，不过我们不需要对软键盘进行处理了,少了很多繁琐及兼容性的操作，同时又不失逼格，哈哈。
看到以上三种实现方式想必你大概已经知道我们要使用哪种方式实现了，没错就是集成EditView的自定义view,这样我们还可以使用很多EditView的属性哦
开发前先整理一下实现步骤：
1、绘制外边框（可以是直角也可以是圆角，设计师要什么我们就给他什么）
2、绘制密码之间的分割线（竖线）
3、绘制实心圆代替输入的字符
4、对输入字符进行监听，便于扩展处理
5、实现一些常用的外部接口方法调用
1、绘制外边框：
要想绘制边框我们首先要知道view的宽高，通过onSizeChanged方法去初始化宽高等数据，然后绘制圆角矩形（默认让他矩形显示直接传入圆角半径为0即可）
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
divideLineWStartX = w / maxC
startX = w / maxCount / 2; //第一个圆心的x坐标
startY = h / 2; //第一个圆心的y坐标
bottomLineLength = w / (maxCount + 2);
rectF.set(0, 0, width, height);
RectF rectF = new RectF()
rectF.set(0, 0, width, height);
canvas.drawRoundRect(rectF, rectAngle, rectAngle, borderPaint);
2、绘制密码之间的分割线：
既然是分割线肯定是等均分的，假设我们的密码最大输入maxCount=6，那么我们只需画5个分割线就可以了，分割线坐标的计算
计算分割线的起点和终点的坐标
通过循环画出每个分割线
for (int i = 0; i & maxCount - 1; i++) {
canvas.drawLine((i + 1) * divideLineWStartX,
(i + 1) * divideLineWStartX,
divideLinePaint);
完成这一步我们先运行一下看看边框效果吧
模拟器上运行效果
3、绘制实心圆代替输入的字符：
这里需要监听EditView的输入，重写onTextChanged方法获取输入字符的长度,然后计算每个圆圆心的坐标位置
//第一个圆心的x坐标
startX = w / maxCount / 2;
//第一个圆心的y坐标
startY = h / 2;
* 画密码实心圆
* @param canvas
private void drawPsdCircle(Canvas canvas) {
for (int i = 0; i & textL i++) {
canvas.drawCircle(startX + i * 2 * startX,
circlePaint);
写到这里的时候是不是感觉样式问题已经完成的差不多了，运行以来输入几个字符串一看，MD出问题了(看图说话)
Paste_Image.png
从图中可以看出是绘制了相应的实心圆，但是自带的底部线、光标、字符还在，要是拿这个去交差绝逼会被产品骂死。
产品的内心独白
出现这个问题肯定是代码的问题喽，我们根据问题去一个一个解决，首先给view设置一个透明的背景色，然后隐藏光标，再跑一下看看
this.setBackgroundColor(Color.TRANSPARENT);
this.setCursorVisible(false);
Paste_Image.png
这次底部的线和光标都见了，但是输入的字符还在，这又是什么问题？？？我们明明重写了onDraw方法，怎么还会出现原来的字符呐，等等。。。对啊，我们只是重写，他肯定还有自己的方法，我们只要把EditView内部重绘的方法干掉不就行了，想到这里喜出望外，拿跟辣条先压压惊，在ondraw方法中这样做
protected void onDraw(Canvas canvas) {
//不删除的话会默认绘制输入的文字
// super.onDraw(canvas);
你没看错，就是这一行代码注释掉就ok，
至于是为什么你肯定知道，
不注释的话在我们重写之前他已经调用了内部方法
去绘制输入的字符了，
我们在重写后虽然我们的方法生效了，
但它的方法也生效了哦。
此时压抑不住内心的小激动赶紧运行起来看看（哈哈，完美解决问题）
Paste_Image.png
至此主要功能已经完成，剩下的需要去封装一些方法供外部调用，我这里已经封装几个方法，我们知道这样设置支付密码的页面一般有两个：一个设置密码，一个重新设置密码，按照正常的逻辑我们去监听这个密码输入框，输入密码之后进行比较看是否相等就完事了，为了方便以后使用不要每次自己再去写一大堆监听方法，我们直接在内部封装好是不是对以后使用起来更方便一点呐
* 密码比较监听
public interface onPasswordListener {
void onDifference();
void onEqual(String psd);
//使用者需要调用的方法
public void setComparePassword(String comparePassword, onPasswordListener listener) {
mComparePassword = compareP
mListener =
这里就直接上代码了,代码通俗易懂
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
textLength = text.toString().length();
if (mComparePassword != null && textLength == maxCount) {
if (TextUtils.equals(mComparePassword, getPasswordString())) {
mListener.onEqual(getPasswordString());
mListener.onDifference();
invalidate();
实际使用中我们这样设置(是不是瞬间感觉用的过程简单了很多)
passwordInputView.setComparePassword("123456", new PayPsdInputView.onPasswordListener() {
public void onDifference() {
和上次输入的密码不一致
做相应的业务逻辑处理
Toast.makeText(MainActivity.this,"两次密码输入不同",Toast.LENGTH_SHORT).show();
public void onEqual(String psd) {
两次输入密码相同，那就去进行支付楼
Toast.makeText(MainActivity.this,"密码相同"+psd,Toast.LENGTH_SHORT).show();
文章到此本应该结束了，可是我们UI设计师给出的效果图不是这样子的，不按常理出牌（心中顿时飘过一万只草泥马）
来看看我们的效果图
Paste_Image.png
大哥，算了算了，还是去给他实现一下吧
他不按常量出牌，不过这也是他们一贯的作风，既然他们要这样的效果那我们就去做喽，整个流程还是一样的，唯一的不同就是外边框和密码之间的分割线变成了底部间断的线，这肯定难不倒我们啦，不就是画六条线吗，每根线的起点终点坐标和上边圆心左边计算差不多，就不多描述了看代码最实在
* 画底部显示的分割线
* @param canvas
private void drawBottomBorder(Canvas canvas) {
for (int i = 0; i & maxC i++) {
cX = startX + i * 2 * startX;
canvas.drawLine(cX - bottomLineLength / 2,
cX + bottomLineLength / 2,
height, bottomLinePaint);
项目至此完美收工，看看效果吧
MD你要的效果给你.png
以上微信支付密码和我们这种现实效果我都封装在PayPsdInputView中了，可以根据需求切换不同的样式，
Paste_Image.png
如果以后还要其他的支付密码输入的样式的话同样会添加进来的，目的只有一个---------&下次开发省时省力。
两种样式供你选择
我相信看到这里肯定有一部分小伙伴会说MDZZ,这不就是简单的画矩形、画圆、画线吗，有什么好写的，谁都会做。我想说的是你们说的没错，涉及的知识点是很简单，但是不要忘了，麻雀虽小五腑俱全，真正你去一行一行敲的时候你会发现有很多不曾注意过的问题都会浮出水面。只是单纯的会几个知识点其实没什么卵用，把所学知识点运用起来重组成一个功能模块的时候你才算真正的掌握。
来，老表，抽根烟，平复一下暴躁的心情
谨以此篇来记录自己项目中遇到的问题，献给需要类似功能的小伙伴们。如果你有好的建议欢迎评论指出，大家一起讨论、学习、进步！
公众号【码个蛋】特约作者
https://lygttpod.github.io/
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
1.概述 最近有人在问我要所有项目的代码，我在这里声明一下我不是这几个项目公司内部人员，之所以录视频和写博客也是喜欢与人分享和学习而已，最终所有的代码肯定会上传的，只不过会要等全部的效果以及设计模式搞完。在这里感谢内涵段子这个项目，感谢那些提供帮助的博客牛人，希望有一天也能...
App需要支付场景的时候，都会让用户输入密码交易框，如果用系统或者第三方键盘可能导致密码泄露。因此，比较多的App会自定义密码输入键盘来提供安全性。本文依照支付宝密码输入界面来设计，同时提供随机键盘功能。项目地址：Github 看效果图 模拟器上，会导致线条绘制模糊。真机运...
.前言 最简单的方式实现:支付宝的密码输入框.以及常规的验证码输入框 先上效果图 提供的demo有两套思路:1.使用UIKeyInput协议做的文本控件开发2.使用多个UITextField协同操作 .思路1. 1.首先声明一个类继承自UiView. @interface ...
声明，以下并不是我的思想，也是学习来的。 现在年轻一代多是从游戏中成长起来的一代人。游戏讲究个明确目标和即时反馈。 布置任务的时候尽量明确，特别是对工作没多久的同事，不能只是给个方向。要有耐心多辅导。 目标尽量拆解清楚，往小了拆解。小目标还有个好处，反馈的周期也短。可以及时...
此身是何物？缘何难相忘？ 莫说三摩地，知止难止知
今年以来，不少群体的收入已经得到提高，还有一部分群体的收入上涨已提上议事日程。 到底哪些群体收入在上涨？快跟贝姐一起来看~ 1、教师：平均工资不低于当地公务员平均工资水平 日前，中共中央办公厅、国务院办公厅印发《关于深化教育体制机制改革的意见》。 《意见》强调，要切实提高教...
修身之道，最难是养心，养心最难之处，又是慎独。 慎独，是独自一人时，亦有一双慧眼观照自己，不做出格事，不说出格话。 “慎独”一词，出自秦汉之际儒家著作《礼记·中庸》一书：“莫见乎隐，莫显乎微，故君子慎其独也。” 所谓慎独，就是在别人不能看见的时候，能慎重行事；在别人不能听到...6268 次浏览
16:37 提问
本回答由达人推荐
16:37 回答
其他回答 (8条回答)
15:30 回答
12:19 回答
16:09 回答
08:38 回答
06:17 回答
16:56 回答
16:39 回答
16:39 回答
你想知道的这里都有
已解决问题:262,111,225
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
(C) 2018 Sogou Inc. 京ICP证050897号(东丽的小点点)
(贾货铺子)
第三方登录：查看: 20616|回复: 5
微信上的支付密码是填银行卡的密码还是支付宝的密码
威望帖子听众
初一, 积分 1751, 距离下一级还需 49 积分
初一, 积分 1751, 距离下一级还需 49 积分
在线时间989 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
急求，抢了个小米3，乃么微信上支付，支付密码老是错误，到底是输支付宝支付密码还是银行卡密码啊
走自己的路，让别人说去吧！
威望帖子听众
高二, 积分 3479, 距离下一级还需 21 积分
高二, 积分 3479, 距离下一级还需 21 积分
在线时间405 小时
微信跟支付宝没有半毛钱关系啊妹纸
懶瀦瀦De釦袋店:&&http://pigsbag. t a o b a o .com
威望帖子听众
初一, 积分 1751, 距离下一级还需 49 积分
初一, 积分 1751, 距离下一级还需 49 积分
在线时间989 小时
小懶瀦 发表于
微信跟支付宝没有半毛钱关系啊妹纸
那输什么密码的
走自己的路，让别人说去吧！
威望帖子听众
高二, 积分 3479, 距离下一级还需 21 积分
高二, 积分 3479, 距离下一级还需 21 积分
在线时间405 小时
wendy1990 发表于
那输什么密码的
应该有设置过独立密码的，没设过的话，你试试QQ密码，像我就是QQ绑定的，是同一个
再不行就看你是不是用网银支付的了，是的话就是银行卡密码
懶瀦瀦De釦袋店:&&http://pigsbag. t a o b a o .com
威望帖子听众
高二, 积分 3479, 距离下一级还需 21 积分
高二, 积分 3479, 距离下一级还需 21 积分
在线时间405 小时
用什么支付就用什么密码
懶瀦瀦De釦袋店:&&http://pigsbag. t a o b a o .com
威望帖子听众
初一, 积分 1751, 距离下一级还需 49 积分
初一, 积分 1751, 距离下一级还需 49 积分
在线时间989 小时
小懶瀦 发表于
应该有设置过独立密码的，没设过的话，你试试QQ密码，像我就是QQ绑定的，是同一个
再不行就看你是不是用 ...
走自己的路，让别人说去吧！
Powered by原来现在微信支付买东西连密码都不用输入了啊？【阜阳吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：519,294贴子：
原来现在微信支付买东西连密码都不用输入了啊？收藏
直接扫一下就过去了，那手机要是被别人拿了岂不是随便刷钱吗
需要支付密码
谁说不要密码的
关键是你微信里面有钱嘛
我上次买还要啊
不需要，直接扫一下就行，
我记得在大润发，纪念日，三福扫码直接就付了， 万家福的话要确认输密码的，
条纹码不用密码
今天身上没零钱，面包店和商场用微信支付都是无需密码直接就好了，吓了一跳。上次使用还需要输入支付密码的
微信里别放那么多钱啊
如果是微信绑定的银行卡的话 要输密码的
可以在钱包那设置暂停使用
自己开免密了吧
和支付宝一样
登录百度帐号