现在很多App采用了类似下划线、方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式:
1.多个UITextField组成
这种方式好处是有光标闪烁、但是在处理删除和动画效果时,就会显得有点笨拙,OFO应该是这样实现的,要严格处理好每个UITextField的FirstResponder。
2.一个UITextField组成,使用富文本
这个方式是可行的, 使用富文本设置每个字符的间距,允许编辑富文本,有光标闪烁,缺点应该也是不好处理动画效果。
3.由一个UIView组成,使用UIKeyInput输入数字,并用重绘的方式来展示。
import UIKit
protocol DigitalPasswordViewDelegate: NSObjectProtocol {
func dpBeginInput(dpView: DigitalPasswordView)
func dpFinishedInput(dpView: DigitalPasswordView)
func passwordDidChanged(dpView: DigitalPasswordView)
}
class DigitalPasswordView: UIView, UIKeyInput, UITextInputTraits {
private var _places: Int = 6//位数
var places: Int {
get {return _places}
set {
_places = newValue
self.setNeedsDisplay()
}
}
private var _pointColor: UIColor = UIColor.black
var pointColor: UIColor {
get {return _pointColor}
set {
_pointColor = newValue
self.setNeedsDisplay()
}
}
private var _pointRadius: CGFloat = 6
var pointRadius: CGFloat {
get {return _pointRadius}
set {
_pointRadius = newValue
self.setNeedsDisplay()
}
}
private var _borderColor: UIColor = UIColor.disabled()
var borderColor: UIColor {
get {return _borderColor}
set {
_borderColor = newValue
self.layer.borderColor = _borderColor.cgColor
self.setNeedsDisplay()
}
}
var keyboardType: UIKeyboardType = UIKeyboardType.numberPad
private var _password: String = ""
var password: String {
get {return _password}
set {
_password = newValue
self.setNeedsDisplay()
}
}
var dpDelegate: DigitalPasswordViewDelegate?
static let members = "0123456789"
override init(frame: CGRect) {
super.init(frame: frame)
initializer()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initializer()
}
func initializer() {
self.backgroundColor = UIColor.white
self.layer.borderColor = _borderColor.cgColor
self.layer.borderWidth = 0.5
self.layer.masksToBounds = true
self.layer.cornerRadius = 3.0
_ = self.becomeFirstResponder()
}
override func becomeFirstResponder() -> Bool {
if dpDelegate != nil {
dpDelegate?.dpBeginInput(dpView: self)
}
return super.becomeFirstResponder()
}
override var canBecomeFirstResponder: Bool {
return true
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if !self.isFirstResponder {
_ = self.becomeFirstResponder()
}
}
override func draw(_ rect: CGRect) {
super.draw(rect)
let width = rect.width / CGFloat(_places)
let height = rect.height
let context = UIGraphicsGetCurrentContext()
context?.setLineWidth(0.5)
context?.setStrokeColor(_borderColor.cgColor)
context?.setFillColor(UIColor.blue.cgColor)
for i in 1 ..< _places {
context?.move(to: CGPoint(x: CGFloat(i)*width, y: 0))
context?.addLine(to: CGPoint(x: CGFloat(i)*width, y: height))
context?.closePath()
}
context?.drawPath(using: CGPathDrawingMode.fillStroke)
context?.setFillColor(_pointColor.cgColor)
for i in 1 ..< _password.characters.count+1 {
context?.addArc(center: CGPoint(x: CGFloat(i)*width-width/2.0, y: height/2.0), radius: pointRadius, startAngle: 0, endAngle: CGFloat.pi*2, clockwise: true)
context?.drawPath(using: CGPathDrawingMode.fill)
}
}
//REMARK --UIKeyInput
var hasText: Bool {
return _password.characters.count > 0
}
func insertText(_ text: String) {
if _password.characters.count < _places {
let cs: CharacterSet = CharacterSet(charactersIn: DigitalPasswordView.members).inverted
let filtered = text.components(separatedBy: cs).joined(separator: "")
if text == filtered {
_password.append(text)
if dpDelegate != nil {
dpDelegate?.passwordDidChanged(dpView: self)
}
if _password.characters.count == _places {
dpDelegate?.dpFinishedInput(dpView: self)
}
self.setNeedsDisplay()
}
}
}
func deleteBackward() {
if _password.characters.count > 0 {
_password.remove(at: _password.index(before: _password.endIndex))
if dpDelegate != nil {
dpDelegate?.passwordDidChanged(dpView: self)
}
self.setNeedsDisplay()
}
}
}
网友评论