Блог

Я использую горизонталь UIStackView , которая может содержать до 3 UIButton секунд. (может быть только 1, может быть 2 или 3)

Я хочу, чтобы они были центрированы с одинаковым промежутком между каждым из них, вот так:

Кажется, я не могу это сделать… Я перепробовал все комбинации Distribution и Alignment , но не могу сделать это правильно.

Вот stackView ограничения:

 fileprivate func setupStackViewConstraints() {
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        stackView.topAnchor.constraint(equalToConstant: 60),
        stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
    ])
}
  

И вот ограничения кнопок:

 fileprivate func setupFacebookButton() {
    let facebookButton = UIButton()
    
    facebookButton.setImage(UIImage(named: "facebookSocialIcon"), for: .normal)
    facebookButton.imageView?.contentMode = .scaleAspectFit
    facebookButton.addTarget(self, action: #selector(facebookButtonWasTapped), for: .touchUpInside)
    
    // -----------------------------------
    
    facebookButton.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        facebookButton.widthAnchor.constraint(equalToConstant: 40),
        facebookButton.heightAnchor.constraint(equalToConstant: 40)
    ])
    
    // -----------------------------------
    
    stackView.addArrangedSubview(facebookButton)
}
  

Есть идеи?

Распределение и выравнивание здесь очевидны. Вы хотите «Равный интервал» и «По центру». Вы также должны установить подходящий spacing .

«Сложный момент» заключается в том, как заставить упорядоченные представления выравниваться по горизонтали посередине, поскольку alignment свойство касается только выравнивания перпендикулярно axis .

Ключ в том, чтобы позволить стековому представлению иметь гибкую ширину и выровнять его по горизонтали по центру. Это означает удаление начальных и конечных ограничений и добавление ограничения center X.

Таким образом, это ограничения для вашего стекового представления:

 NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalToConstant: 60),
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
])
  

Обратите внимание, что представление стека увеличит свою ширину, чтобы вместить все упорядоченные подвиды в нем. Это означает, что если у вас слишком много упорядоченных вложенных представлений, некоторые из них могут пропасть за кадром. Если вы хотите, чтобы они «переносились» на следующую строку, рассмотрите возможность использования a UICollectionView вместо этого

Попробуйте ограничить свой StackView только по центру x и y (не ограничивая его начальные и конечные привязки):

 NSLayoutConstraint.activate([
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])
  

И затем вы можете оставить значение распределения по умолчанию и установить значение интервала на то, что вы хотите:

 stackView.spacing = // 16px
  

Таким образом, ширина стека будет равна ширине содержимого.