PinView实战教程：5分钟打造银行卡支付风格的PIN码输入框

PinView实战教程：5分钟打造银行卡支付风格的PIN码输入框

【免费下载链接】PinViewA PIN view library for Android. Use to enter PIN/OTP/password etc.项目地址: https://gitcode.com/gh_mirrors/pin/PinView

做支付类 App 或者需要短信验证码（OTP）功能的开发者，一定对这类交互不陌生：一格一格的PIN码输入框，数字填满自动校验，视觉上安全又高级。自己从零手写？要处理输入焦点、光标、格子分隔、动画，工作量真不小。其实用开源的PinView库，5 分钟就能在 Android 项目里落地同款银行卡支付风格效果。

PinView 是一个轻量级 Android 组件库，专用于 PIN/OTP/密码输入，基于 EditText 封装，兼容 Android 4.1+（API 16），支持矩形、下划线、无边框等多种样式，还自带输入动画与密码遮蔽功能。

一、为什么选择 PinView？四个理由无法拒绝

• ✅零学习成本：PinView 继承自 EditText，所有 EditText 的 API 都能直接复用；
• ✅开箱即用：一个 XML 标签即可生成完整的 PIN 码输入框；
• ✅样式丰富：rectangle（矩形框）、line（下划线）、none（无边框）三种形态随意切换；
• ✅交互完备：支持光标闪烁、输入动画、密码隐藏、输满隐藏边框等细节。

二、快速集成：3 步引入 PinView 依赖

第 1 步：添加 Gradle 依赖

在build.gradle的 dependencies 中添加一行即可（MavenCentral 仓库）：

implementation 'io.github.chaosleung:pinview:1.4.4'

💡 小提示：旧版使用 JCenter 的com.chaos.view:pinview:1.4.4，但 JCenter 已停止服务，请优先使用 MavenCentral 版本。

第 2 步：在布局中放置 PinView

在 XML 布局中添加组件，并指定位数、尺寸与样式：

<com.chaos.view.PinView android:id="@+id/pinView" style="@style/PinWidget.PinView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="number" app:itemCount="4" app:viewType="rectangle" app:itemWidth="48dp" app:itemHeight="48dp" app:lineColor="@color/line_colors" />

第 3 步：在 Activity 中监听输入

PinView pinView = findViewById(R.id.pinView); pinView.addTextChangedListener(new TextWatcher() { @Override public void afterTextChanged(Editable s) { if (s.length() == 4) { verifyPin(s.toString()); // 输满 4 位自动发起验证 } } });

到这里，一个银行卡支付风格的 PIN 码输入框就完成了！完整示例可参考 MainActivity.java 与 activity_main.xml。

三、最全 PIN 码输入框样式定制指南

PinView 提供了丰富的自定义属性，核心定义都在 attrs.xml 中，常用的如下：

🏦 银行风：矩形方框样式

viewType="rectangle"配合圆角itemRadius与边框色lineColor，就是最经典的银行卡支付密码框。

✒️ 极简风：下划线样式

viewType="line"只显示底部横线，类似 iOS 验证码的输入体验，简洁又高级。

🕶️ 隐形风：无边框样式

viewType="none"完全隐藏边框，配合itemBackground自定义背景，自由发挥空间更大。

下面这张动图演示了 PIN 码输入过程中光标的移动与边框高亮反馈，各种样式的实际效果一目了然：

四、进阶技巧：让 PIN 码输入框更好用

✨ 一键开启输入动画

一行代码让每次输入都带平滑动画，交互体验立刻升级：

pinView.setAnimationEnable(true);

✨ 切换密码遮蔽模式

验证码或密码不想明文显示？直接开启密文：

pinView.setPasswordHidden(true); pinView.setTransformationMethod(new PasswordTransformationMethod());

✨ 当前输入位高亮引导

通过state_selected状态让正在输入的格子用不同颜色高亮，引导用户聚焦：

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/line_selected" android:state_selected="true" /> <item android:color="@color/line_default" /> </selector>

源码解析：所有绘制与动画逻辑都封装在 PinView.java 中，想深入研究的同学可以直接阅读源码。

五、常见问题与避坑指南

• 问：PinView 支持几位密码？答：itemCount任意设置，4 位、6 位、8 位都可以，动态修改也支持。
• 问：支持短信验证码自动填充吗？答：PinView 本质是 EditText，配合系统的自动填充 API 即可无缝使用。
• 问：如何本地运行示例项目？答：克隆仓库 https://gitcode.com/gh_mirrors/pin/PinView 后，用 Android Studio 打开 sample 模块直接运行，所有样式与交互一目了然。

六、总结

PinView 以极低的接入成本，帮你快速打造银行卡支付风格的PIN 码输入框。无论是支付密码、登录 PIN，还是短信验证码（OTP），一个组件全部搞定。还在等什么？赶紧在你的 Android 项目里试试吧！

【免费下载链接】PinViewA PIN view library for Android. Use to enter PIN/OTP/password etc.项目地址: https://gitcode.com/gh_mirrors/pin/PinView