CODEWITHSUNDEEP
iosswiftautolayoutstoryboarduitextfield
Julian
Julian

Reputation: 98

iOS: How can I prevent a UITextField from going off screen

I am currently developing an application which has two UILabels inside a Vertical StackView, two UITextFields inside a Vertical StackView, and both of those Vertical StackViews inside one Horizontal StackView as such:

enter image description here

I have constraints put in place. When the application runs on bigger devices such as an iPhone 11, it looks perfect as you can see here:

enter image description here

But if I switch to a smaller device like the iPhone 8 you can see the lines hug the edge of the phone as such:

enter image description here

The way I make the underline for the TextField is by using a class I created called StyledTextField. It looks like this:

class StyledTextField: UITextField {

var bottomLine = CALayer()

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

required init?(coder: NSCoder) {
    super.init(coder: coder)
    styleTextField()
}

private func styleTextField() {
    font = UIFont(name: "Quicksand", size: UIFont.labelFontSize)
    
    // Create the bottom line
    bottomLine.frame = CGRect(x: 0, y: frame.height - 2, width: frame.width, height: 2)
    
    bottomLine.backgroundColor = Environment.Colours.primary.cgColor
    
    // Remove border on text field
    borderStyle = .none
    
    // Add the line to the text field
    layer.addSublayer(bottomLine)
}

func makeUnderlineLight() {
    bottomLine.backgroundColor = Environment.Colours.primaryAssisted.cgColor
}
}

In the Storyboard, I assign the UITextField class to be that of the "StyledTextField".

Additionally, in my viewDidLoad function on the Controller that deals with the UITextFields, I call the setUpUI() function which does the following:

func setUpUI() {
    title = "Add Task"
    
    taskNameTextField.attributedPlaceholder = NSAttributedString(string: "Name", attributes: [NSAttributedString.Key.foregroundColor: Environment.Colours.lightGray])
    moreInfoTextField.attributedPlaceholder = NSAttributedString(string: "(Optional)", attributes: [NSAttributedString.Key.foregroundColor: Environment.Colours.lightGray])
    
    setUpDatePicker()
    moreInfoTextField.makeUnderlineLight()
    
    if isEditing() {
        showTaskToEdit()
    }
    view.backgroundColor = Environment.Colours.secondary
}

As you can see, I call the makeUnderlineLight() StyledTextField function once inside there.

Thank you!

Upvotes: 0

Views: 848

Answers (2)

matt
matt

Reputation: 535989

Simple two-step solution:

  • Rewrite styleTextField so that it keeps a reference to the underline layer and removes the underline layer if it already exists, before making a new one.

  • Move the call to styleTextField() to layoutSubviews. (Don't forget to call super.)

Upvotes: 1

Kstin
Kstin

Reputation: 679

select Your "More Info:" label and set horizontal compress resistanse priority to 1000

it ca be found here: enter image description here

Upvotes: 0

Related Questions