Как вид стека может динамически изменять расстояние между элементами, вложенными в него

Question

Уже несколько месяцев я пытаюсь обернуть голову вокруг стековых представлений и того, как они работают.По этой причине я создал проект, который имеет 4 кнопки, вложенные в представление стека с постоянной шириной и высотой.Теперь, в зависимости от размера экрана iPhone, я хочу, чтобы кнопки внутри просмотра стека сохраняли свою ширину и размер, но расстояние между ними становилось меньше или больше.Это делается идеально, если я вручную настраиваю размер стека с помощью мыши.Но в тот момент, когда я добавляю ограничения сверху и снизу, которые должны иметь одинаковый эффект, кнопки внутри стекового представления уменьшаются или странно растягиваются, даже если все они имеют постоянную высоту с приоритетом, установленным на 1000.

Вы можетеПопробуйте сами, создав вид стека с несколькими кнопками внутри, а затем установите их ширину и высоту постоянными.Затем добавьте верхние и нижние ограничения и просмотрите их на экране меньшего размера, чем тот, который вы создаете.

Предварительный просмотр на iPhone XS, и если размер экрана меньше, расстояние между кнопками должно динамически изменяться на большее или меньшее:

Предварительный просмотр на iPhone 8:

И как это должно выглядеть:

Может кто-нибудь объяснить мне, почему это происходит и как я могу достичь желаемого результата?

Answer 1

Вместо добавления нижнего ограничения вы должны добавить только ограничение высоты к UIStackView, оформите заказ в следующем примере

let buttons = [UIButton(), UIButton(), UIButton(), UIButton()]
for (index, button) in buttons.enumerated() {
    button.backgroundColor = .red
    button.setTitle("Category Button \(index)", for: .normal)
    button.setTitleColor(.black, for: .normal)
}
let stackView = UIStackView(arrangedSubviews: buttons)
stackView.axis = .vertical
stackView.distribution = .equalSpacing
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)

let salGuide = self.view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: salGuide.topAnchor, constant: 16.0),
    stackView.centerXAnchor.constraint(equalTo: salGuide.centerXAnchor, constant: 0),
    stackView.widthAnchor.constraint(equalTo: salGuide.widthAnchor, multiplier: 0.6),
    stackView.heightAnchor.constraint(equalTo: salGuide.heightAnchor, multiplier: 0.6)
])

Обратите внимание, что multiplier: 0.6 дает 60% доступной ширины и высоты для UIStackView, чтобы использовать постоянную ширину / высоту, просто измените имя параметра с multiplier на constant и предоставьте соответствующее значение параметра.

iPhone SE

iPhone Xs Max