IOS Верстка в коде (Constraints)

Термины

• TranslatesAutoresizingMaskIntoConstraints - система автоматически создает constraints на основе кадра представления и его маски.
• Anchor - это якорь Auto Layout.
• NSLayoutConstraint - ограничение (Constraints), определяющее отношения между объектами пользовательского интерфейса.
• addSubview - добавляем представление дочернего элемента к представлению родительского.

Практика 1

Создадим и закрепим кнопку

Один элемент "Button"

Шаг 1

Создаем кнопку "let button = UIButton()"

Создали кнопку

Шаг 2

Настройки кнопки делаем в методе viewDidLoad()

Поместим текст в кнопку "button.setTitle("Кнопка", for: .normal)"

Покрасим текст кнопки "button.setTitleColor(.black, for: .normal)"

Покрасим фон кнопки "button.backgroundColor = .green"

Сделали настройки по кнопке

Шаг 3

Отключаем автоматическое создание constraints

button.translatesAutoresizingMaskIntoConstraints = false

Добавляем представление к родительскому View

view.addSubview(button)

Создаем ограничения и сразу активируем их

NSLayoutConstraint.activate([ ... ])

Наша кнопка готова и настроена :)

Практика 2

Создадим и закрепим несколько элементов

Несколько элементов

Если на экране больше одного View, то используем UIStackView()

В нашем случае будет два UIStackView() горизонтальный и вертикальный как показано ниже

Синий - вертикальный стек, красный - горизонтальный стек

Шаг 1

Создадим:

1. Главный label "let mainLabel = UILabel()"
2. Title label "let titleLabel = UILabel()"
3. Кнопку "let button = UIButton()"
4. Горизонтальный стек "let horizontalStack = UIStackView()"
5. Вертикальный стек "let verticalStack = UIStackView()"

Создаем все необходимые элементы

Шаг 2

Настройки делаем в методе viewDidLoad()

Настраиваем все элементы

Шаг 3

Создаем ограничения (Constraints)

Помещаем Button и titleLabel в горизонтальный стек

Создаем горизонтальный стек

Помещаем mainLabel и горизонтальный стек в вертикальный стек

Создаем вертикальный стек

Отключаем автоматическое создание constraints

verticalStack.translatesAutoresizingMaskIntoConstraints = false

Добавляем вертикальный стек к родительскому View

view.addSubview(verticalStack)

Создаем ограничения и сразу активируем их

NSLayoutConstraint.activate([ ... ])

Создали ограничения

Весь код

Реализация