xCode для прототипов интерфейса

Зачем дизайнеру уметь верстать приложения для iOS? В первую очередь, это помогает наладить диалог разработчика и дизайнера. Знание нюансов и возможностей разработки помогает сэкономить время и использовать 100% возможностей платформы. Например, понимая что Launch screen работает только с iOS 8, и для iOS 7 и ниже в asset-каталог приложения нужно добавить launch image, вы сможете сделать всю нарезку за один раз.

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

 

Чтобы все отступы и размеры соответствовали дизайну, используется Auto Layout, который располагает элементы относительно друг друга. Auto Layout это технология, чей принцип строится на ограничениях (constraint) описания интерфейса. Auto Layout динамически вычисляет положение и размер всех объектов в иерархии UIView, основываясь на ограничениях, указанных для этих объектов. С помощью Auto Layout вы можете ограничить элемент так, чтобы он располагался по центру и его верхний край всегда был на 8pt ниже верхней границы View, например. И самое главное, если размеры экрана отличаются, то Auto Layout автоматически поместит графический объект в нужное место. Это важно, размеры iPhone сильно отличаются друг от друга, только посмотрите:

Для iPhone 5 / 5S, экран в портретном режиме состоит из 320 точек (или 640 пикселей) по горизонтали и 568 точек (или 1136 пикселей) по вертикали.
Для iPhone 6 / 6S, экран состоит из 375 точек (или 750 пикселей) по горизонтали и 667 точек (или 1334 пикселей) по вертикали.
Для iPhone 6 / 6с Plus, экран состоит из 414 точек (или 1242 пикселей) по горизонтали и 736 точек (или 2208 пикселей) по вертикали.
Для iPhone 4S, экран состоит из 320 точек (или 640 пикселей) и 480 точек (или 960 пикселей).

Для начала возьмем для верстки минимальную по сложности задачу: нам нужно, чтобы объект был по центру экрана и никуда не двигался. Для этого нужно отключить все направляющие. Аналогично, если View будет растянут на всю ширину и высоту экрана с отключенными направляющими, то мы получим полностью залитый фон.

 

В большинстве случаев дизайнеры рисуют макеты с фиксированными отступами и тянущимся контентом. Для реализации такого поведения используется иконка Add New Constraints (связи) из правого нижнего угла xCode. Она позволяет добавить отступы (связи) до соседних объектов либо до краев экрана. Связи обозначаются голубыми линиями. Создавать связи можно хоткеем: выделите объект, нажмите ctrl и кликните на объект, относительно которого должны быть построены направляющие.

Если связи стали желтого цвета, то посмотрите причины ошибки в желтом кружке напротив View Controller Scene в правом меню. Желтые ошибки не критичны, а вот красные не позволят вам скомпилировать проект. Допустим, вы вручную изменили размеры View и у вас появились желтые ошибки. Потребуется выбрать fix missplacement в меню желтого кружка. После нажатия на fix missplacement объект будет растянут до подобранных в визуальном редакторе размеров. Вы можете добиться того же результата с помощью Resolve Auto layout issue. Дизайнеры любят подвигать элементы на волосок влево/вправо в графическом интерфейсе, и от этого констрейны ломаются. Достаточно приплюсовать или вычесть из настроек констрейна значение, на которое вы подвинули элемент. Но удобнее нажать update constraint constant для выбранного элемента.

Рядом с кнопкой Add New Constraints есть и другие полезные кнопки:

 

 

  1. Stack — тут вы можете поместить выделенные детали интерфейса в StackView. Interface Builder сам решает, каким будет StackView в зависимости от расположения элементов. Кроме кнопки Stack, StackView можно создать перетягиванием из библиотеки объектов, как любой другой элемент.
  2. Align — тут можно настроить расположение элементов четко по сетке, будь то с боку, вертикально по центру или снизу. Вы часто используете такой подход в текстовых редакторах, когда выравниваете текст по центру или строго слева от начала страницы.
  3. Pin — основное для меня меню, позволяющее задать жесткие рамки относительно собственного размера или ближайшего предмета. В Pin можно явно указать, какой constraint вы хотите задать в том или ином направлении и установить его параметры. Также с помощью данного меню можно, к примеру, придать группе кнопок константный размер, не смотря на масштаб экрана.
  4. Resolve Auto layout issue — макет.

 

Теория.

Отступы в вашей верстке не должны строиться по прогрессивной системе: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, получается слишком много вариантов отступов. Правильнее использовать золотое сечение для создания геометрический прогрессии. У вас получится ряд отступов: 2, 4, 8, 16, 32, 64. Конечно, вы можете добавить 24 между 16 и 32, но только в качестве исключения.

По умолчанию, Interface Builder установлен для предварительного просмотра пользовательского интерфейса на iPhone 6с. Собственно, и макеты от Apple сделаны под этот размер.

Для людей, активно работающих с графикой, есть полезная горячая клавиша Cmd + =, позволяет вернуть размеры height и weight в эталонные.

В симуляторе вы можете масштабировать интерфейс с помощью Windows -> Scale. Важно задать максимальные размеры в Interface Builder.

Интерфейс xCode

Элементы интерфейса используют три основные модели: active, static (inactive), и passive. Кнопка это активный элемент управления, изображение это статичный элемент. Пассивный элемент это текстовое поле. В зависимости от модели, будет доступен разный набор возможностей в Utility Area.

У каждой связи есть свойства, найти их можно на вкладке Size Inspector (элемент должен быть выбран). Если пройти в View -> Utilities -> Attributes Inspector), вы встретите следующие свойства:

  • Relation (Отношение) к свойству Constant,
  • Constant (Постоянное значение), позволяет менять размеры объекта.
  • Priority (Приоритет), имеет диапазон от 1 до 1000. Значение 1000 дает максимальный приоритет контрейну.

 

 

 

 

Multiplier при значении 1 означает, что размер элемента будет 1:1 или 100%. Если изменить значение на 2, мы получим 2:1 или увеличение на 200%. Используя множитель, констрейн смотрит на все доступное ему пространство. При значении 3:1 все доступное пространство будет разделено на 3. И 1 часть этого места назначается элементу. Если указать значение 4:3, то все доступное пространство делится на 4, и элементу будет назначен масштаб 3. Размеры 16:9 и 4:3 помогают адаптировать контент для iPad и iPhone. Для понимания, 6:1 = 6, замените : на / и все встанет на свои места.

 

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

 

Констрейны позволяют масштабировать объекты. Например, добавив констрейн на Height в Segmented Control, вы сможете увеличить его высоту.

Одно из стандартных дизайнерских пожеланий это масштабировать кнопки и отступы пропорционально экрану. С помощью Equal Widths и Equal Heights это можно сделать. Auto Layout поможет ограничить ширину или высоту. Зажмите Ctrl и тяните линию от одного текстового блока к второму, в появившемся окне выберите Equal Widths.

Попрактиковались, а теперь давайте пытаться понять, что же происходит. У каждого контрола есть позиция и размер. Если вы обратите внимание на подсказку «spacing to nearest neighbor» при создании констрейнов, то поймете, что отступы могут быть как от основного view, так и от ближайших объектов. Если добавить UIView, вы можете регулировать его размеры не только за счет констрейнов height и width, но и за счет констрейнов позиции. Важно понимать, что каждый констрейн взаимодействует с объектом, который находится выше в иерархии слоев.

  • Vertical Spacing to Layout Guide (ограничивает верхней части изображения в верхней части окна)
  • Leading Space to Container Margin (левая сторона изображения остается «прибитой» к левой части окна)
  • Trailing Space to Container Margin (правая сторона изображения остается «прибитой» к правой стороне окна)
  • Vertical Spacing (вертикальное расстояние между изображением и этикетки)

Зная эти нюансы, вы сможете делать сложную верстку. Например, вам нужно увеличить расстояние между вертикальными элементами. Для этого в Autolayout добавляете vertical spacing constraint, и добавляете ему атрибут greater/less than equal.

Все описанное выше было про плашки и стандартные контролы. Но с текстом может возникнуть куда больше проблем. Создадим в UIView два текста Label. Выберем верхний label и применим к нему следующие настройки:

Для нижнего Label примените аналогичные настройки, но вместо Top Space задайте Bottom Space. При переключении между девайсами вы заметите, что текст вышел за пределы отведенной ему области. Уменьшить размер шрифта не вариант, ведь размер шрифта для iPad Pro 9.7 вполне может быть слишком большим для iPhone 4. Я неоднократно встречал мнение среди дизайнеров, что в мобильных приложениях лучше не менять размер шрифта в зависимости от контента. Нельзя предвидеть всех проблем и непонятно, как это спроектировать, а рисовать все возможные варианты никто не хочет.

На помощь приходит Adaptive Layout. Один универсальный Storyboard для всего интерфейса это прекрасное решение, все экраны в одной верстке куда проще поддерживать, чем множество разных вариантов верстки одного экрана. Поэтому ViewController в xCode существует в среде Сlass Size с заданной шириной и высотой. При этом, Сlass Size бывает двух видов: Compact и Regular, подробнее можно прочитать тут. При этом, в AutoLayout вы можете включать и отключать констрейны в текущем Class Size. Их мы и будем использовать для решения описанных выше проблем с текстом.

1. В Attributes Inspector нужно нажать на небольшой + слева от поля Font. Выберите Compact для Width и Any для Height. Появится второй Font selector с атрибутом wC, в котором мы можем уменьшить размер шрифта. Проделайте это для всех текстовых блоков.

2. Теперь нажмите кнопку Vary for Traits и проверьте верстку в режиме Compact. Вы можете заметить, что все iPad в портретной или ландшафтной ориентации рисуют ширину и высоту как Regular. wR и hR обозначают Regular Width и Regular Height. wC и hR отвечают за Compact Width и Regular Height.

3. Если поменять в Regular высоту iPad, это повлияет на портретную ориентацию смартфона. Чтобы внести изменения только в iPad, нужно работать только с шириной. Отдельной болью считается iPhone Plus, который имеет wR и hC.

4. Также, в инспекторе найдите поле AutoShrink и выберите значение Minimum Font Scale, добавив чуть ниже значение 0.5. Благодаря этому блок текста будет автоматически сжиматься. Да-да, вы сможете тестировать масштабирование текста с помощью Autoshrink -> Maximum Font Scale (0.4) для сжатия размера текста в зависимости от количества символов в блоке.

Теперь вы можете сверстать простые экраны, но без переходов они не представляют ценности. Вы можете создать сколько угодно новых экранов (View Controller), и создавать переходы между ними с помощью Segue, это способ смены экранов. В xCode будут отрисованы стрелочки между экранами, и вы сможете легко понять, какой из экранов следует за каким. Например, Push это классическая смена экрана справа налево. Имея полученные знания, вы уже сможете создать такой прототип. Этого будет достаточно для теста гипотезы.

На будущее.

У вас наверняка возник вопрос, а что делать когда артбордов станет слишком много и вы сами запутаетесь в своем прототипе? Зажмите cmd и нажмите на границы экранов, появится голубая обводка. После этого проследуйте в Editor -> Refactor To Storyboard. Вам будет предложено создать новый сториборд из выделенных. после создания вы будете переброшены в новый сториборд, в котором увидите сигвеи и новые артборды. Перенесенные экраны в основном сториборде станут ссылкой. Поздравляю, вы сделали рефакторинг!

 

2 комментария

  1. Igor Kambarov

    Можете подсказать, в каком размере или в каких вариантах размеров экрана нужно рисовать дизайн для iOS? Если рисовать из заготовленных в скече размеров экранов, то на небольших айфонах получается скролл. Дизайнер или разработчик должен решать эту проблему? Если дизайнер должен решать эту проблему, то как, рисовать под четвертый айон? И должны ли быть все размеры Pixel Perfect?

    • Цветков Максим (Author)

      Попробуйте мыслить более абстрактно. Вы, как дизайнер, не рисуете интерфейс, а описываете интерфейс логикой размеров. Разные верстки под разные экраны уместны только для отделения iPhone от iPad. Допустим, вы нарисовали кнопку, вы должны описать все расстояния по краям от кнопки.

      Скролл это нормальное явление. По ширине интерфейс растягивается, по высоте скролл. Если требуется сделать без скролла, то разработчик должен проходиться по констрейнам и умножать их на UIScreen.main.bounds.height / 568.0. Что даст дополнительную нагрузку на старые девайсы. Но если требуется, то масштабировать интерфейс пропорционально высоте экрана возможно.

      Если вы нарисуете дизайн под каждое разрешение, то разработчику придется добавлять UIScreen.main.bounds.size.height == < значение> и верстать каждый экран отдельно. Отдельный форм-фактор для каждого разрешения и ориентации это очень долго. Если остановиться на определенном размере экрана, то я рисую под пятерку. Потому что масштабировать в бОльшую сторону проще, чем заложиться в экран с большим размером и в дальнейшем пытаться это ужать для меньших размеров экрана. Для проверки дизайна на всех разрешениях хорошо работают констрейны с плагином от анимы.

      Если вы все же решили рисовать в крупном размере, который забит по умолчанию в графические редакторы, то лучше использовать iPhone 8 в 1x масштабе (375х667) с констрейнами.

      Pixel Perfect на iOS умер с выходом 5.5″, в том же iPhone 7+ не получится сделать идеальную линию в 1px, даже если задать ее явно. Разве что задать нечто вроде 0.3333 дюйма.

«Нажимая на кнопку Submit Comment, я даю согласие на обработку персональных данных»