如何向 PhoneNumberTextField 中的文本和占位符添加插图
How can I add an inset to the text and placeholder in PhoneNumberTextField
我需要使用文本字段让用户输入 phone 数字,所以我使用的是项目 PhoneNumberKit.
中的 PhoneNumberTextField
默认情况下,它只是一个无边框文本字段。我修改了它,添加了一个带有圆角半径的边框,并在其 leftView
中添加了一个 UIButton
。问题是 text/placeholder 显示在边界上。
我尝试子类化 PhoneNumberTextField
并像这样添加文本插入功能。
@IBDesignable
class CNPhoneNumberTextField: PhoneNumberTextField {
@IBInspectable var inset: CGFloat = 0
override func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
}
这里的问题是它现在没有考虑 leftView
。 text/placeholder 被 leftView
部分覆盖。
还有其他方法可以解决这个问题吗?
您可能会像这样添加一些填充:
override func textRect(forBounds bounds: CGRect) -> CGRect {
var rect = super.textRect(forBounds: bounds)
rect.origin.x += 10
return rect
}
您需要更新您的 CNPhoneNumberTextField
class,如下所示,您可以从情节提要中为您的 textField
提供 leftPadding
。
您的 class 将如下所示:
import UIKit
import PhoneNumberKit
@IBDesignable
class CNPhoneNumberTextField: PhoneNumberTextField {
@IBInspectable var leftPadding: CGFloat = 0
override open func textRect(forBounds bounds: CGRect) -> CGRect {
let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
return bounds.inset(by: padding)
}
override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
return bounds.inset(by: padding)
}
override open func editingRect(forBounds bounds: CGRect) -> CGRect {
let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
return bounds.inset(by: padding)
}
}
从带有属性检查器部分的情节提要中,您可以分配左填充,例如:
你的结果将是:
参考自 THIS 答案。
编辑:
HERE 是演示项目。
我需要使用文本字段让用户输入 phone 数字,所以我使用的是项目 PhoneNumberKit.
中的PhoneNumberTextField
默认情况下,它只是一个无边框文本字段。我修改了它,添加了一个带有圆角半径的边框,并在其 leftView
中添加了一个 UIButton
。问题是 text/placeholder 显示在边界上。
我尝试子类化 PhoneNumberTextField
并像这样添加文本插入功能。
@IBDesignable
class CNPhoneNumberTextField: PhoneNumberTextField {
@IBInspectable var inset: CGFloat = 0
override func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
}
这里的问题是它现在没有考虑 leftView
。 text/placeholder 被 leftView
部分覆盖。
还有其他方法可以解决这个问题吗?
您可能会像这样添加一些填充:
override func textRect(forBounds bounds: CGRect) -> CGRect {
var rect = super.textRect(forBounds: bounds)
rect.origin.x += 10
return rect
}
您需要更新您的 CNPhoneNumberTextField
class,如下所示,您可以从情节提要中为您的 textField
提供 leftPadding
。
您的 class 将如下所示:
import UIKit
import PhoneNumberKit
@IBDesignable
class CNPhoneNumberTextField: PhoneNumberTextField {
@IBInspectable var leftPadding: CGFloat = 0
override open func textRect(forBounds bounds: CGRect) -> CGRect {
let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
return bounds.inset(by: padding)
}
override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
return bounds.inset(by: padding)
}
override open func editingRect(forBounds bounds: CGRect) -> CGRect {
let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
return bounds.inset(by: padding)
}
}
从带有属性检查器部分的情节提要中,您可以分配左填充,例如:
你的结果将是:
参考自 THIS 答案。
编辑:
HERE 是演示项目。