iOS：删除 UITextField 的默认绘图

Question

我正在尝试创建一个带有后缀的自定义文本字段，并且我重写了 draw(CGRect) 方法来执行此操作。我希望文本和后缀都对齐中心。计算和绘制它们可以按我的意愿工作，但是，默认文本仍然存在，并且与我新绘制的文本重叠。所以想彻底去掉UITextField的默认绘图。

这是我的实现：

class SuffixTextField: UITextField {
    
    private let suffix: String
    private let suffixAttributes: [NSAttributedString.Key : Any]
    private let spacing: CGFloat
    
    /// Create a text field with suffix text
    /// - Parameters:
    ///   - suffix: The suffix text
    ///   - suffixAttributes: Attributes to apply to the suffix
    ///   - spacing: Spacing between the content and the suffix
    init(suffix: String, suffixAttributes: [NSAttributedString.Key : Any], spacing: CGFloat) {
        self.suffix = suffix
        self.suffixAttributes = suffixAttributes
        self.spacing = spacing
        
        super.init(frame: .zero)
        
        addTarget(self,
                  action: #selector(textFieldDidChange),
                  for: UIControl.Event.editingChanged)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        guard !suffix.isEmpty else {
            super.draw(rect)
            return
        }

        let text = (self.text ?? "") as NSString
        let textSize = text.size(withAttributes: typingAttributes)
        let fieldSize = frame.size
        let suffixSize = (suffix as NSString).size(withAttributes: suffixAttributes)

        func drawSuffix(xPosition: CGFloat) {
            let suffixYPosition = (fieldSize.height / 2) - (suffixSize.height / 2)
            let rect = CGRect(origin: .init(x: xPosition, y: suffixYPosition),
                              size: suffixSize)
            (suffix as NSString).draw(in: rect, withAttributes: suffixAttributes)
        }

        switch textAlignment {
        case .left:
            super.draw(rect)
            drawSuffix(xPosition: textSize.width + spacing)
        case .center:
            let textXPosition = (fieldSize.width - textSize.width - spacing - suffixSize.width) / 2
            let textYPosition = (fieldSize.height - textSize.height) / 2
            text.draw(in: CGRect(origin: .init(x: textXPosition, y: textYPosition), size: textSize),
                      withAttributes: typingAttributes)

            let suffixXPosition = textXPosition + textSize.width + spacing
            drawSuffix(xPosition: suffixXPosition)
        default:
            fatalError("Cannot handle other allignment, please implement here")
        }
    }
    
    @objc private func textFieldDidChange() {
        setNeedsDisplay()
    }
}

Answer 1

您无需调用super.draw(rect) 并绘制自己的文本，因为文本字段始终会自行绘制其文本。你可以做的是，你可以相应地放置你的后缀文本，它会起作用。

override func draw(_ rect: CGRect) {
    guard !suffix.isEmpty else {
        return
    }

    let text = (self.text ?? "") as NSString
    let textSize = text.size(withAttributes: typingAttributes)
    let fieldSize = frame.size
    let suffixSize = (suffix as NSString).size(withAttributes: suffixAttributes)

    func drawSuffix(xPosition: CGFloat) {
        let suffixYPosition = (fieldSize.height / 2) - (suffixSize.height / 2)
        let rect = CGRect(origin: .init(x: xPosition, y: suffixYPosition),
                          size: suffixSize)
        (suffix as NSString).draw(in: rect, withAttributes: suffixAttributes)
    }

    switch textAlignment {
    case .left:
        drawSuffix(xPosition: textSize.width + spacing)
    case .center:
        let textXPosition = (fieldSize.width - textSize.width - spacing - suffixSize.width) / 2
        let suffixXPosition = textXPosition + textSize.width + spacing
        drawSuffix(xPosition: suffixXPosition)
    default:
        fatalError("Cannot handle other allignment, please implement here")
    }
}