Разработка
Адаптивный дизайн в iOS с UIStackView
UIStackView — мой выбор, когда дело касается упаковки View в Auto layout. Хорошо в UIStackView то, что с его помощью можно просто сделать адаптивный дизайн. В этой статье я расскажу о том, как адаптировать UIStackView к разным размерам экрана.
UIStackView — мой выбор, когда дело касается упаковки View в Auto layout. Хорошо в UIStackView то, что с его помощью можно просто сделать адаптивный дизайн. В этой статье я расскажу о том, как адаптировать UIStackView к разным размерам экрана.
Давайте начнем с простого UIStackView с тремя элементами — одним UIImageView и двумя UILabel.
Если его повернуть, то получится так:
Горизонтальное размещение для ландшафта
Горизонтальное размещение для ландшафтаМы хотим изменить направление стека на горизонтальное направление для ландшафтной ориентации. Концепция портретной и ландшафтной ориентации устарела еще в iOS 8, ее заменили на классы Size (Размеры), где ширина и высота делятся на два класса: обычный и компактный. Итак, когда мы хотим сделать корректировку для ландшафтной ориентации, на самом деле мы хотим сделать изменение для “компактной” высоты.
Размеры устройств в разной ориентации
| Устройство | Портрет | Ландшафт |
|---|---|---|
| 12.9″ iPad Pro | Regular width, regular height | Regular width, regular height |
| 11″ iPad Pro | Regular width, regular height | Regular width, regular height |
| 10.5″ iPad Pro | Regular width, regular height | Regular width, regular height |
| 9.7″ iPad | Regular width, regular height | Regular width, regular height |
| 7.9″ iPad mini 4 | Regular width, regular height | Regular width, regular height |
| iPhone XS Max | Compact width, regular height | Regular width, compact height |
| iPhone XS | Compact width, regular height | Compact width, compact height |
| iPhone XR | Compact width, regular height | Regular width, compact height |
| iPhone X | Compact width, regular height | Compact width, compact height |
| iPhone 8 Plus | Compact width, regular height | Regular width, compact height |
| iPhone 8 | Compact width, regular height | Compact width, compact height |
| iPhone 7 Plus | Compact width, regular height | Regular width, compact height |
| iPhone 7 | Compact width, regular height | Compact width, compact height |
| iPhone 6s Plus | Compact width, regular height | Regular width, compact height |
| iPhone 6s | Compact width, regular height | Compact width, compact height |
| iPhone SE | Compact width, regular height | Compact width, compact height |
Apple сильно упростила использование этих настроек при использовании Storyboard. Вот как можно изменить их:
- Откройте Storyboard и выберите Stack View, в который вы хотите внести изменения.
- В инспекторе атрибутов щелкните значок плюса (+) слева от атрибута Axis.
- Так как мы хотим изменить расположение для компактной высоты, установите Width и Gamut в Any, а Height в Compact.
- Кликните Add Variation и у вас появится новая строчка hC (height Compact).
- Отредактируйте ее в Horizontal.
Это все, что вам нужно сделать, чтобы стек стал горизонтальным. Запустите приложение, и вы получите это.
Два Stack View
Мы на полпути. Осталось поработать с текстом. Прямо сейчас все элементы делят один и тот же Stack View, но мы хотим, чтобы два текста были выровнены по вертикали независимо от их размеров. Итак, мы создадим еще одно представление для хранения этих двух строк.
Вот результат.
Внешний стек становится горизонтальным в ландшафте, а внутренний продолжает поддерживает вертикальную разметку.
Выравнивание
Единственное, что осталось сделать идеальной ландшафтной ориентации — это выровнять текст. Прямо сейчас расстояние между Label слишком велико. Это потому, что alignment для нашего стека стоит как fill. Чтобы исправить это, мы изменим выравнивание на center для компактной высоты.
Надо повторить все шаги, которые мы сделали, но на этот раз сделать это на атрибуте Alignment.
- Откройте Storyboard и выберите Stack View, в который вы хотите внести изменения.
- В инспекторе атрибутов щелкните значок плюса (+) слева от атрибута Alignment.
- Установите Width и Gamut на Any, а Height на compact.
- Нажмите Add Variation, и вы увидите новую строку с меткой hC (height Compact).
- Отредактируйте эту новую строку на Center.
Вот результат.
Вот верстка. Внутренний стек теперь в компактной высоте находится по центру.
Выводы
Добавление вариаций, основанных на размере и гамме, доступны не только для стека. Это функция Storyboard, которую вы можете использовать в любых элементов UIKit (даже для NSLayoutConstraint). Вы можете легко определить вспомогательные атрибуты, посмотрев на знак плюс (+) слева от атрибутов.
Вот и все, что вам нужно, чтобы сделать ваш дизайн адаптивным!
