iOS: Remove default drawing of UITextField - ios

Question

I'm trying to create a custom text field with a suffix, and I override the draw(CGRect) method to do this. I want both the text and the suffix to align center. Calculating and drawing them works as I want, however, the default text is still there and it overlaps with my newly drawn texts. So I want to completely remove the default drawing of UITextField.
Here is my implementation:
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

You don't need to call super.draw(rect) and draw your own text as textfield will always draw its text by itself. What you can do is that you can place your suffix text accordingly and it will work.
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")
}
}