Connect with us

Разработка

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

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

Опубликовано

/

     
     

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

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

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

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

Адаптивный дизайн в iOS с UIStackView Горизонтальное размещение для ландшафта

Мы хотим изменить направление стека на горизонтальное направление для ландшафтной ориентации. Концепция портретной и ландшафтной ориентации устарела еще в 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. Вот как можно изменить их:

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

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

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

Два Stack View

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

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

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

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

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

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

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

Единственное, что осталось сделать идеальной ландшафтной ориентации — это выровнять текст. Прямо сейчас расстояние между 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). Вы можете легко определить вспомогательные атрибуты, посмотрев на знак плюс (+) слева от атрибутов.

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

Источник

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement

Популярное

X

Спасибо!

Теперь редакторы в курсе.