UITextField is not filing available width inside UIStackView

Question

I want to put two buttons with images on left and right edges of the screen, and insert a UITextField between them. In storyboard everything is fine, but I need to do it programmatically.

Source:

class SecondViewController: UIViewController {


override func loadView() {
    super.loadView()
    self.view.backgroundColor = .white
    let leftButton = UIButton()
    leftButton.setImage(UIImage(named: "first"), for: .normal)
    leftButton.setTitle("", for: .normal)
    
    let rightButton = UIButton()
    rightButton.setImage(UIImage(named: "second"), for: .normal)
    rightButton.setTitle("", for: .normal)
    
    let textField = UITextField()
    textField.placeholder = "clear"
    textField.borderStyle = .roundedRect
    textField.contentHorizontalAlignment = .left
    textField.contentVerticalAlignment = .center
    
    let stackView = UIStackView()
    
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.alignment = .fill
    stackView.distribution = .fill
    stackView.axis = .horizontal
    stackView.spacing = 15

    stackView.addArrangedSubview(leftButton)
    stackView.addArrangedSubview(textField)
    stackView.addArrangedSubview(rightButton)
    
    self.view.addSubview(stackView)
    
    NSLayoutConstraint(item: stackView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 15).isActive = true
    NSLayoutConstraint(item: stackView, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: -15).isActive = true
    NSLayoutConstraint(item: stackView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1.0, constant: 50).isActive = true
    
}

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
}

I need a result like on first image.

But at result, I have second.

What did I do wrong ?

score 6 · Accepted Answer · answered Jun 12 '19 at 17:36

6

You have an elementary constraint ambiguity. You could easily have discovered this just by switching to the View Debugger; you would see three exclamation marks warning you of the problem. The layout engine does not magically know which of the three views should be allowed to stretch horizontally. You have to tell it:

textField.setContentHuggingPriority(UILayoutPriority(249), for: .horizontal)

answered Jun 12 '19 at 17:36

matt

515,959
87
875
1,141

Thanks. It helped me. I am limited in some xcode instruments, because I am using Xamarin.iOS and re-write my issue to swift. P.S. That is why, i am still using semicolons :) – FezZ Jun 12 '19 at 18:00

Shehata Gamal · Answer 2 · 2019-06-12T17:26:26.163

Set constraints like

NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50),
    stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 15),
    stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -15),
    stackView.heightAnchor.constraint(equalToConstant: 45),
    leftButton.widthAnchor.constraint(equalToConstant: 30), 
    rightButton.widthAnchor.constraint(equalToConstant: 30),
])

Another small change

rightButton.imageView?.contentMode = .scaleAspectFit
leftButton.imageView?.contentMode = .scaleAspectFit

Result

Thanks, thats also works, but @matt solutions is what i am looked for — FezZ, Jun 12 '19 at 18:02

UITextField is not filing available width inside UIStackView

2 Answers2