Адаптивный дизайн в iOS с UIStackView

UIStackView — мой выбор, когда дело касается упаковки View в Auto layout. Хорошо в UIStackView то, что с его помощью можно просто сделать адаптивный дизайн. В этой статье я расскажу о том, как адаптировать UIStackView к разным размерам экрана.

Давайте начнем с простого UIStackView с тремя элементами — одним UIImageView и двумя UILabel.

Если его повернуть, то получится так:

Горизонтальное размещение для ландшафта

Мы хотим изменить направление стека на горизонтальное направление для ландшафтной ориентации. Концепция портретной и ландшафтной ориентации устарела еще в iOS 8, ее заменили на классы Size (Размеры), где ширина и высота делятся на два класса: обычный и компактный. Итак, когда мы хотим сделать корректировку для ландшафтной ориентации, на самом деле мы хотим сделать изменение для “компактной” высоты.

Размеры устройств в разной ориентации

Apple сильно упростила использование этих настроек при использовании Storyboard. Вот как можно изменить их:

1. Откройте Storyboard и выберите Stack View, в который вы хотите внести изменения.
2. В инспекторе атрибутов щелкните значок плюса (+) слева от атрибута Axis.
   
3. Так как мы хотим изменить расположение для компактной высоты, установите Width и Gamut в Any, а Height в Compact.
   
4. Кликните Add Variation и у вас появится новая строчка hC (height Compact).
5. Отредактируйте ее в Horizontal.
   

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

Два Stack View

Мы на полпути. Осталось поработать с текстом. Прямо сейчас все элементы делят один и тот же Stack View, но мы хотим, чтобы два текста были выровнены по вертикали независимо от их размеров. Итак, мы создадим еще одно представление для хранения этих двух строк.

Вот результат.

Внешний стек становится горизонтальным в ландшафте, а внутренний продолжает поддерживает вертикальную разметку.

Выравнивание

Единственное, что осталось сделать идеальной ландшафтной ориентации — это выровнять текст. Прямо сейчас расстояние между Label слишком велико. Это потому, что alignment для нашего стека стоит как fill. Чтобы исправить это, мы изменим выравнивание на center для компактной высоты.

Надо повторить все шаги, которые мы сделали, но на этот раз сделать это на атрибуте Alignment.

1. Откройте Storyboard и выберите Stack View, в который вы хотите внести изменения.
2. В инспекторе атрибутов щелкните значок плюса (+) слева от атрибута Alignment.
3. Установите Width и Gamut на Any, а Height на compact.
4. Нажмите Add Variation, и вы увидите новую строку с меткой hC (height Compact).
5. Отредактируйте эту новую строку на Center.
   

Вот результат.

Вот верстка. Внутренний стек теперь в компактной высоте находится по центру.

Выводы

Добавление вариаций, основанных на размере и гамме, доступны не только для стека. Это функция Storyboard, которую вы можете использовать в любых элементов UIKit (даже для NSLayoutConstraint). Вы можете легко определить вспомогательные атрибуты, посмотрев на знак плюс (+) слева от атрибутов.

Вот и все, что вам нужно, чтобы сделать ваш дизайн адаптивным!

Источник