UITextField 未在 UIStackView 中提交可用宽度

Question

我想在屏幕的左右边缘放置两个带有图像的按钮，并在它们之间插入一个 UITextField。在 storyboard 中一切都很好，但我需要以编程方式进行。

来源：

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.
}

我需要像第一张图片那样的结果。

但结果，我得了第二名。

我做错了什么？

Answer 1

像

这样设置约束

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),
])

另一个小变化

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

结果

Answer 2

你有一个基本的约束歧义。只要切换到 View Debugger，您就可以很容易地发现这一点；您会看到三个感叹号，警告您存在此问题。布局引擎不会神奇地知道应该允许三个视图中的哪一个水平拉伸。你必须告诉它：

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

UITextField 未在 UIStackView 中提交可用宽度

UITextField is not filing available width inside UIStackView

uitextfield

uikit

ios

swift

uistackview