如何在PhoneNumberTextField中的文本和占位符中添加插图

Question

我需要使用文本字段来让用户输入电话号码，因此我正在使用项目PhoneNumberKit中的PhoneNumberTextField。

默认情况下，这只是一个无边界的文本字段。我通过添加一个带有拐角半径的边框并在其UIButton中添加了leftView来对其进行了修改。问题在于文本/占位符显示在边框的正上方。

我尝试对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。文本/占位符被leftView部分覆盖。

还有其他解决方法吗？

Demo project

Answer 1

您需要更新您的CNPhoneNumberTextField类，如下所示，您可以从情节提要中为leftPadding提供textField。

您的课程如下：

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是演示项目。

Answer 2

您可能会像这样添加一些填充：

override func textRect(forBounds bounds: CGRect) -> CGRect {
    var rect = super.textRect(forBounds: bounds)
    rect.origin.x += 10
    return rect
}