AutoLayout. Часть первая. – MAD Studio | iOS, Android, Backend, Blockchain

Всем привет! Меня зовут Андрей. Я работаю iOS разработчиком в MAD Studio чуть больше года. Если вы только начинаете свой путь в iOS разработке, то этот блог для вас. Здесь я хочу поделиться полученным опытом с начинающими (как и я) iOS разработчиками, а также раскрывать темы, которые вас больше всего интересуют, поэтому в конце каждого блога будет опрос для того чтобы выбрать следующую тему обсуждения (Juniors Talks).

Открываю серию блогов на тему: “Прохождение тернистого пути к заветной мечте – Senior разработчик”.

Если вы уже опытный разработчик, то вам дальше, ничего нового уже не узнаете 🙂 Хотя, если вы все-таки будете читать, то будем рады услышать ваши советы.

Первое с чего стоит начать, если вы вообще ничего не знаете в этой области, это изучение данных ресурсов:

https://swiftbook.ru/contents/doc/ – переведенная на русский язык английская документация от Apple;
https://www.raywenderlich.com/ios/ – на самом интернет ресурсе есть много полезных уроков, а также стоит сначала обратить внимание на книжки, мне в свое время помогла «iOS Apprentice».

Любой экран в первую очередь начинается с создания интерфейса (верстки), поэтому и мы эту серию блогов начнем с верстки.

Разберем два способа создания интерфейса:

Работая в Interface builder;
Программно.

В обоих случаях используются constraints (ограничения).

Когда вы используете ограничения, то вам больше не надо переживать на каком размере экрана будет отображаться ваш интерфейс. Auto Layout динамически вычисляет размер и позицию всех views в иерархии superview, работая с теми ограничениями, которые вы установили для каждого элемента интерфейса.

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

Всем скучно читать теорию, поэтому перейдем к практике.

Допустим, у нас задача расположить на экране 7 одинаковых по размеру элементов, как на рисунке ниже.

Переходим в interface builder, добавляем 7 новых UIView и выполняем следующие действия:

Стараемся расположить элементы согласно дизайну, пока не привязывая их;
Все 7 views должны быть привязаны друг к другу по trailing & leading space constraints. Крайние должны быть привязаны к superView.
Каждый элемент должен быть равен другому, в этом нам поможет Equal Width & Equal Height, которые проставляются друг на друга. Если вам нужна неизменная высота, то установите height constraint;
Берем любую view и привязываем Equal Width к superView, элементы будут обладать шириной равной ширине экрана, но в нашем примере view должна обладать шириной равной 1/7 от ширины экрана. Для этого переходим в редактирование добавленного ограничения и в поле multiplier устанавливаем значение 1 : 7;
Элементы должны располагаться на одном уровне, для этого соседние элементы должны быть привязаны по vertically in container constraint.

Я покажу, как программно реализовать такую же логику, только уже для 2х UIView.

// 1    
lazy var firstView: UIView = {        
  let view = UIView()        
  view.translatesAutoresizingMaskIntoConstraints = false        
  view.backgroundColor = .red        
  return view    
}()        
lazy var secondView: UIView = {        
  let view = UIView()        
  view.translatesAutoresizingMaskIntoConstraints = false        
  view.backgroundColor = .blue        
  return view    
}()        
override func awakeFromNib() {        
  super.awakeFromNib()        
  //2        
  addSubview(firstView)        
  addSubview(secondView)        
  //3        
  translatesAutoresizingMaskIntoConstraints = false        
  //4        
  let constraints = [            
                    firstView.topAnchor.constraint(equalTo: self.topAnchor),            
                    firstView.bottomAnchor.constraint(equalTo: self.bottomAnchor),            
                    firstView.leftAnchor.constraint(equalTo: self.leftAnchor),            
                    firstView.rightAnchor.constraint(equalTo: secondView.leftAnchor),                        
                    secondView.rightAnchor.constraint(equalTo: self.rightAnchor),                        
                    firstView.widthAnchor.constraint(equalTo: secondView.widthAnchor),             
                    firstView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 1/2),                        
                    firstView.heightAnchor.constraint(equalTo: secondView.heightAnchor),                                    
                    firstView.centerYAnchor.constraint(equalTo: secondView.centerYAnchor),                        
                    firstView.heightAnchor.constraint(equalToConstant: 40)        
                    ]        
  NSLayoutConstraint.activate(constraints)

Объявляем две новые views. При объявлении задавайте нужные вам свойства, но обязательное свойство translatesAutoresizingMaskIntoConstraints устанавливается false иначе вы не увидите желаемого результата;

Добавляем объявленные views;
У корневого view также отключаем транслирование автоизменения размера;
Создаем массив ограничений.

Результаты:

В этой статье мы узнали (кто-то повторил) что такое constraints и как ими пользоваться в реальной жизни. Увидели, что нет ничего страшного верстать программно, только не забывайте про отключать translatesAutoresizingMask.

Интересные ресурсы для прочтения и просмотра: