При добавлении нескольких элементов в представление прокрутки во время выполнения может оказаться гораздо проще использовать UIStackView ... при правильной настройке он будет автоматически увеличиваться по высоте с каждым добавленным объектом.
В качестве простого примера ...
1) Начните с добавления UIScrollView (я выделил синий фон, чтобы его было легче увидеть). Ограничьте его нулем со всех четырех сторон:
Обратите внимание, что мы видим «красный круг», указывающий на отсутствующие / конфликтующие ограничения. Пока проигнорируйте это.
2) Добавьте UIView в качестве «представления содержимого» к представлению прокрутки (я дал ему системный желтый фон, чтобы его было легче видеть). Ограничьте его нулем со всех 4 сторон до Руководства по макету содержимого - это (в конечном итоге) определит размер содержимого представления прокрутки. Также ограничьте его равной шириной и высотой для Руководства по компоновке рамы :
Важный шаг: Выберите ограничение высоты и на панели Size Inspector установите флажок Placeholder - Remove at build time. Это удовлетворит автоматической компоновке в IB во время разработки, но позволит высоте этого вида уменьшаться / увеличиваться по мере необходимости.
3) Добавьте Вертикаль UIStackView к «представлению содержимого». Ограничить его до нуля со всех 4 сторон. Настройте его свойства для Fill / Fill / 8 (как показано ниже):
4) Добавьте соединение @IBOutlet в представление стека в вашем контроллере представления учебный класс. Теперь, во время выполнения, когда вы добавляете элементы пользовательского интерфейса в представление стека, вся ваша «прокручиваемость» будет обрабатываться автоматическим макетом.
Вот пример класса:
class DynaScrollViewController: UIViewController {
@IBOutlet var theStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
// local var so we can reuse it
var theLabel = UILabel()
var theImageView = UIImageView()
// create a new label
theLabel = UILabel()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theLabel.translatesAutoresizingMaskIntoConstraints = false
// multi-line
theLabel.numberOfLines = 0
// cyan background to make it easy to see
theLabel.backgroundColor = .cyan
// add 9 lines of text to the label
theLabel.text = (1...9).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .yellow
// add 5 lines of text to the label
theLabel.text = (1...5).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// create a new UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load an image for it - I have one named background
if let img = UIImage(named: "background") {
theImageView.image = img
}
// let's give the image view a 4:3 width:height ratio
theImageView.widthAnchor.constraint(equalTo: theImageView.heightAnchor, multiplier: 4.0/3.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .green
// add 2 lines of text to the label
theLabel.text = (1...2).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load a different image for it - I have one named AquariumBG
if let img = UIImage(named: "AquariumBG") {
theImageView.image = img
}
// let's give this image view a 1:1 width:height ratio
theImageView.heightAnchor.constraint(equalTo: theImageView.widthAnchor, multiplier: 1.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
}
}
Если шаги были выполнены, вы должны получить следующие выходные данные:
и, после прокрутки вниз:
