CODEWITHSUNDEEP
iosswiftuitextfield
Jefferson Setiawan
Jefferson Setiawan

Reputation: 536

Custom UITextField with UILabel multiline support for error text

I want to create custom UITextField with error label on bottom of it. I want the label to be multiline, I tried numberOfLines = 0. But it is not working.

Here is my snippet for the class

public class MyTextField: UITextField {
private let helperTextLabel: UILabel = {
    let label = UILabel()
    label.font = UIFont.systemFont(ofSize: 12.0, weight: UIFont.Weight.regular)
    label.textColor = helperTextColor
    label.numberOfLines = 0

    return label
}()

    public override init(frame: CGRect) {
    super.init(frame: frame)
    self.addSubview(errorTextLabel)
}

public required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.addSubview(errorTextLabel)
}

public override func layoutSubviews() {
    super.layoutSubviews()

    errorTextLabel.frame = CGRect(x: bounds.minX, y: bounds.maxY - 20, width: bounds.width, height: 20)
}
public override var intrinsicContentSize: CGSize {
    return CGSize(width: 240.0, height: 68.0)
}

public override func sizeThatFits(_ size: CGSize) -> CGSize {
    return intrinsicContentSize
}
}

I think the root cause is because I set height to 20, but how can I set the height dynamically based on the errorTextLabel.text value?

Upvotes: 0

Views: 938

Answers (2)

Scriptable
Scriptable

Reputation: 19750

You are giving your label a fixed size.

Not using AutoLayout and giving the textfield and label room to expand it's size when needed.

Personally, if creating this particular control, I would create a UIView with a textfield and a label inside a UIStackView. That way if the label is hidden when there is no error the stackview will automatically adjust the height for you. Then when you unhide it, the view will expand to fit both controls.

A basic example:

//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport

class LabelledTextView: UIView {

    private let label = UILabel()
    private let textfield = UITextField()
    private let stackView = UIStackView()


    override init(frame: CGRect) {
        super.init(frame: frame)

        backgroundColor = .white
        addSubview(stackView)

        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        stackView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
        stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        stackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

        stackView.alignment = .leading
        stackView.axis = .vertical
        stackView.distribution = .fillEqually
        stackView.addArrangedSubview(textfield)
        stackView.addArrangedSubview(label)

        textfield.placeholder = "Please enter some text"
        label.numberOfLines = 0
        label.text = "Text did not pass validation, Text did not pass validation, Text did not pass validation, Text did not pass validation"
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

let labelledTextView = LabelledTextView(frame: CGRect(x: 50, y: 300, width: 300, height: 60))

let vc = UIViewController()
vc.view.addSubview(labelledTextView)
labelledTextView.translatesAutoresizingMaskIntoConstraints = false
labelledTextView.topAnchor.constraint(equalTo: vc.view.topAnchor).isActive = true
labelledTextView.leftAnchor.constraint(equalTo: vc.view.leftAnchor).isActive = true
labelledTextView.widthAnchor.constraint(equalToConstant: 300).isActive = true
labelledTextView.heightAnchor.constraint(greaterThanOrEqualToConstant: 60).isActive = true
PlaygroundPage.current.liveView = vc.view

Upvotes: 2

Jogendar Choudhary
Jogendar Choudhary

Reputation: 3494

You need to use sizeToFit():

    errorTextLabel.sizeToFit()

Upvotes: 0

Related Questions