Ограничение макета iOS: прикрепление вниз или поток контента, когда контент достигает дна

Question

У меня есть UIScrollView с вертикальным представлением стека, в котором есть метка и кнопка, я хочу, чтобы кнопка оставалась в нижней части экрана, и как только текст метки увеличится и достигнет кнопки, кнопка будетоставайтесь ниже ярлыка, и они прокручиваются вместе.

Я думаю о:

let lableFit = self.label.systemLayoutSizeFitting(targetSize)
let buttonFit = self.button.systemLayoutSizeFitting(targetSize)

if labelFit.height + buttonFit.height > contentHeight {
    button.bottomAnchor.constrain(equalTo:scrollView.contentLayoutGuide.bottomAnchor)
} else {
    button.bottomAnchor.constrain(equalTo:scrollView.frameLayoutGuide.bottomAnchor)
}

Может ли это сработать?И какой должен быть целевой размер для подгонки надписи и кнопки?

Спасибо!

Answer 1

Звучит так, как вы хотите:

Мы собираемся настроить его так:

Нам нужно настроить представление стека, чтобы разрешить переменное количество пустого пространства между меткой и кнопкой.Мы можем сделать это, установив «Распределение» стекового представления в «Равный интервал».Затем установите для «Spacing» представления стека минимальное количество отступов между меткой и кнопкой.Для моей демонстрации я установил значение 12.

Как только у нас будет эта иерархия представлений, нам нужно создать соответствующие ограничения.Давайте сформулируем вашу цель по-другому: мы хотим, чтобы представление стека (которое содержит метку и кнопку) было бы как минимум таким же высоким, как и экран.Какие ограничения нам нужны?

Представлению прокрутки всегда нужны ограничения между всеми четырьмя его ребрами и его дочерними элементами, потому что эти ограничения сообщают представлению прокрутки, как установить contentSize.В этом случае мы можем ограничить четыре ребра вида прокрутки соответствующими ребрами вида стека.Это ограничения «Stack View.xxx = xxx» и «xxx = Stack View.xxx» на снимке экрана.

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

Мы хотим, чтобы представление стека было таким же широким, как и экран, поэтому мы ограничиваем ширину представления стека равной ширине безопасной области корневого представления.Это ограничение «Stack View.width = Safe Area.width».

Мы хотим, чтобы размер стека был по крайней мере такой же высоты, как экран, но мы хотим, чтобы онбыть выше, поэтому мы ограничиваем высоту представления стека, чтобы она была больше или равна высоте безопасной области корневого представления.Это ограничение «Stack View.height ≥ Safe Area.height».

Мы хотим, чтобы представление прокрутки заполняло экран, поэтому мы ограничиваем его края краями безопасной области корневого представления.Это ограничения «Safe Area.xxx = Scroll View.xxx» на снимке экрана.

Чтобы гарантировать, что метка обернет текст соответствующим образом, ограничьте ширину метки равной ширине представления стека.,Это ограничение «Label.width = width» на снимке экрана.

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

Content Hugging Priority
    Horizontal: 800
    Vertical: 800
Content Compression Resistance Priority
    Horizontal: 1000
    Vertical: 1000

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

Для демонстрации я подключил раскадровку к этому контроллеру представления:

import UIKit

class ViewController: UIViewController {

    @IBOutlet var label: UILabel!
    @IBOutlet var scrollView: UIScrollView!

    @IBAction func buttonWasTapped() {
        label.text = (label.text ?? "") + "\n\nhere is\nmore text\nfor demo\npurposes"
        scrollView.layoutIfNeeded()
        scrollView.scrollRectToVisible(CGRect(x: 0, y: scrollView.contentSize.height - 1, width: 1, height: 1), animated: true)
    }

}