Найти в Дзене
 Just IOS 
10 подписчиков

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

370
1 мин
Термины Практика 1 Создадим и закрепим кнопку Шаг 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 Создадим: Шаг 2 Настройки делаем в методе viewDidLoad() Шаг 3 Создаем ограничения (Constraints) Помещаем Button и titleLabel в горизонтальный стек Помещаем mainLabel и горизонтальный стек в вертикал
Оглавление

Термины

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

Практика 1

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

Один элемент "Button"
Один элемент "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([ ... ])
Создали ограничения
Создали ограничения

Весь код

Реализация
Реализация