EN:
A segmented verification code or password input control that allows customization of size, input digits, and selected border color, among other options. Similar to the verification code input feature in the Uber app. If you have any questions or suggestions, feel free to add me on WeChat: KpengS.
Chinese:
一个按格分割的验证码或者密码输入控件，可以自定义大小和输入位数以及选中边框颜色等。类似uberAPP的验证码输入功能，有什么问题或者建议可以加我Vx：KpengS
- Objective-C compatibility
- Swift 5 Support
- Supports CocoaPods
- Supports Custom Styling
- Supports Horizontal Line Input Style
- Quick Setup
- Continuous Updates
| 格子输入框 | 动效 |
|---|---|
 |
 |
| 横线输入框 | 动效 |
|---|---|
 |
 |
| 下划线输入框 | 动效 |
|---|---|
 |
 |
- iOS 12.0+
- Xcode 15+
- Download and drop
/Sourcesfolder in your project. - Congratulations!
target '<Your Target Name>' do
pod 'PZXCodeTextField'
end
Objective-C
_cellView = [[PZXVerificationCodeView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 60)];
_cellView.selectedColor = [UIColor blackColor];
// _pzxView.center = self.view.center;
// _pzxView.deselectColor = [UIColor cyanColor];
_cellView.VerificationCodeNum = 6;
// _pzxView.isSecure = YES;//密文
_cellView.Spacing = 0;//每个格子间距属性
[self.view addSubview:_cellView];Swift
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let codeView = PZXVerificationCodeView.init(frame: CGRect(x: 0, y: 100, width: SCREEN_WIDTH, height: 60))
codeView.selectedColor = .black
codeView.verificationCodeNum = 4
codeView.spacing = 8
self.view.addSubview(codeView)
let codeInputView = PZXCodeInputView(numberOfFields: 4)
codeInputView.translatesAutoresizingMaskIntoConstraints = false
codeInputView.delegate = self
view.addSubview(codeInputView)
NSLayoutConstraint.activate([
codeInputView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
codeInputView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
codeInputView.heightAnchor.constraint(equalToConstant: 50),
codeInputView.widthAnchor.constraint(equalToConstant: 300)
])
}
func codeInputViewDidFinishInput(_ inputView: PZXCodeInputView, code: String) {
print("Code entered: \(code)")
// 在这里处理输入完成后的逻辑
// Handle the logic after input completion here
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent