Auto Layout: Введение

Введение в Auto Layout

До этого момента все наши приложения были созданы с интерфейсом для iPhone с диагональю экрана 4″ (iPhone 5, 5S, 5C или SE). Но кому необходимо ограничиваться этими моделями, когда с 2015 года Apple производит девайсы с большим экраном? Вряд ли кто захочет создавать несметное количество storyboard’ов для каждой линейки устройств в частности. Чтобы избежать всего этого, в Xcode предусмотрена функция под названием Auto Layout.

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

Создайте новый проект:

  • Product name: MyLayout;
  • Language: Swift;
  • Devices: iPhone.

Откройте Main.storyboard и, не отключая опцию Use Size Classes, добавьте кнопку на середину контроллера. Немного увеличьте её размеры и измените фон кнопки для того, чтобы было видно её границы. В качестве симулятора выберем iPhone 6s и запустим приложение. Как Вы видите, несмотря на то, что кнопка была размещена по-середине вью, в симуляторе она отображается сбоку:

Введение в Auto Layout

Кнопка без Auto Layout

Это происходит из-за того, что на данный момент размер вью контроллера в сториборде равняется 600х600 pt, в то время как размер экрана iPhone 6s — 414×736 pt. X и Y кнопки (в моём случае) равняются 240 и 278. Как Вы видите, координаты кнопки по отношению к размерам iPhone 6s правильны. Но нам по-прежнему необходимо, чтобы кнопка была центрирована, причем абсолютно для каждого устройства. Именно для этого в Xcode существует технология под названием Auto Layout.

Auto Layout

Auto Layout — это технология, основанная на понятиях ограничения (constraint) интерфейса. Она динамически вычисляет размер и положение всех графических объектов в иерархии UIView, основываясь на ограничениях, указанных для этих объектов. Например, Вы можете ограничить кнопку так, чтобы она располагалась горизонтально по центру и чтобы её верхний край всегда был на 8pt ниже верхней границы вью. Если размеры экрана отличаются, то Auto Layout автоматически расположит графический объект на нужное место.

Такой подход к проектированию позволяет создавать гибкий (flexible) интерфейс, который может динамически реагировать на внутренние и внешние изменения (например, изменяется ориентация экрана, изменяется размер одного из объектов и т.д.).

Звучит сложно и на первый взгляд Вы, возможно, не захотите пользоваться данной технологией, да и вообще она будет Вас бесить :). Но не бойтесь, всё достаточно легко и просто.

Самое основное что необходимо понимать перед тем, как приступить к проектированию интерфейса: задавая constraint для объекта, нужно предусмотреть его 4 параметра:

  • Координаты:
    • положение по оси Х;
    • положение по оси Y;
  • Размеры:
    • длину (width);
    • высоту (height).

Добавление constraint

Давайте сделаем то, что планировали изначально — заставим кнопку располагаться по центру экрана на всех устройствах. Для этого нужно добавить ограничения для кнопки. В Xcode это можно сделать несколькими способами.

Способ №1

Обратите внимание на 4 кнопки в правом-нижнем углу storyboard:

Введение в Auto Layout

Кнопки Auto Layout

Первая кнопка называется Stack. Она позволяет создавать «стек» из выделенных графических объектов, группируя их в UIStackView. Данная функция доступна только для iOS 9 и выше, поэтому на данный момент мы не будем акцентировать на ней внимание.

Вторая кнопка — Align. Она  позволяет быстро выровнять элементы в макете. Выберите элементы, которые вы хотите выровнять, а затем выберите инструмент Align. Interface Builder отобразит поповер, содержащий ряд возможных выравниваний. Именно здесь Вы можете центрировать кнопку (задать значения X и Y). Сделайте это как показано ниже:

Введение в Auto Layout

Центрирование кнопки

Третья кнопка — Pin. Нажав на неё, появляется поповер, в котором можно задать точные размеры графического объекта, либо же указать привязку к размерам определенного объекта. Начнем с простого и зададим кнопке constraint с её текущими значениями width и height:

Введение в Auto Layout

Добавление ограничений размера

Способ #2

Я предпочитаю именно этот способ. Constraint можно добавлять подобно тому, как мы добавляли связи между интерфейсом и классом. Здесь также нужно зажать правую клавишу мыши (либо ctrl + click) и протянуть связь от одного графического объекта к тому объекту, по-отношению к которому и будет работать ограничение. Мы хотим чтобы кнопка (объект №1) располагалась по центру вью (объект №2). Протягивая связь, Xcode отобразит поповер со всеми возможными опциями:

Введение в Auto Layout

Привязывание кнопки к вью

Нас интересуют пункты Center Horizontally in Container и Center Vertically in Containter, как показано на изображении выше. Протягивание таких связей между объектами заменяет функцию кнопки Align.

Для того чтобы задать размеры, протяните связь от кнопки к ней же и выберите опции width и height:

Введение в Auto Layout

Установление размеров

Можно задать несколько параметров разом. Для этого необходимо зажать клавишу Shift, выделить каждую опцию и внизу поповера нажать на пункт Add Constraints.

Резултьат

Задано все 4 значения: X, Y, Width и Height. Запустите приложение и посмотрите на результат. Теперь кнопка располагается по центру экрана. Смените ориентацию симулятора, нажав cmd + → или cmd + ←, и Вы увидите, что кнопка по-прежнему по центру.

Обратите внимание на синие полосы в сториборде, которые проходят сквозь кнопку. Это и есть те самые constraint, которые мы добавили. Выделите кнопку и откройте Size inspector. Здесь Xcode отображает все ограничения, добавленные к данному графическому объекту. Наведя мышку на любой из них, constraint выделится в сториборде. Наведите мышь на ограничение с надписью Width нажмите на надпись Edit. В появившемся поповере, можно изменить constraint, задав значение поля constant:

Введение в Auto Layout

Constraints в Size Inspector

При необходимости удалить ограничение, выделите его в сториборде и нажмите клавишу Delete.

Мы рассмотрели базовые способы добавления ограничений в Auto Layout. Какой из них использовать — решать Вам. В следующем уроке мы научимся создавать «гибкий» интерфейс.