Вы находитесь на странице: 1из 10

RESPONSIVE

DESIGN
Responsive
• Responsive Design – отзывчивый дизайн, реагирует на изменения экрана

• При изменении размера или ориентации – внешний вид приложения должен сохранять правильные пропорции и
оптимально отображать компоненты

• Понятия (относится не только к iOS, но и к другим ОС Apple):


• Auto Layout – механизм автоматического выравнивания
• Constraints – выравнивание (отступы) относительно других компонентов или контейнера
• Align – выравнивание относительно контейнера (по центру, вертикали, горизонтали и пр.)

• Механизм «якорей» (anchor), который также присутствует в других фреймворках

• Главное правило – сначала делаем компоненты рабочими, только потом выравниваем между собой и добавляем
дизайн
Points
• Для компонентов вместо px (pixel) используется pt (points)

• Как происходит конечная отрисовка:


• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

• Для Responsive Design можно настроить свойства компонентов:


• Autoshrink – автоматическое уменьшение шрифта
• Line Break – урезать слово в начале, в середине, в конце

• Подробно с этим будем работать в следующих уроках


Constraints
• Служит для автоматического упорядочивания компонентов в
разных размерах экранов

• ВАЖНО! Сразу правильно понять механизм последовательности


и значений (многие новички пропускают эту тему)

• https://developer.apple.com/library/content/documentation/UserExp
erience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html

• Лучше начать изучать на практике, чем в теории

• Не оставляйте ни один из компонентов без constraint, иначе


нет гарантии правильного расположения
Constraints
• Последовательность указания компонентов важна (кто от кого зависит)

• Если правая часть (BlueView) изменит расположение или размеры – RedView автоматически “подстроится”
под изменения

• Нужно смотреть на формулу, а не на расположение


LaunchScreen
• Выравнивание компонентов launchscreen:

• По центру по вертикали

• Отступы между надписями и иконкой

• Футер – всегда внизу с отступом от нижнего края

• Проверяйте вкладку «Build time» в XCode – там будут указываться все


конфликты constraints

0 X

Y
XCode
• Не запуская приложение в XCode можно проверить UI на разных размерах и ориентации
Добавление

• Как добавлять constraints:


• Быстрое добавление: Ctrl + перетаскивание компонентов друг на друга
• Кнопка “Add new constraint”
• Меню «Add missing constraints»
Заметки

• В зависимости от того, какой компонент берется за основу – для других компонентов, чтобы расположить выше
или ниже – нужно выставлять правильный знак значения constraint: плюс или минус

• Выставляйте приоритеты - выше для более главных constraints

• Значения: Greater Then or Equal, Less Than or Equal - для того, чтобы компонент мог «плавать» в пределах
значений (а не имел строгое расположение)

• Не забывайте про направленность осей – увеличение значений слева направо и сверху вниз

0 X

Y
Домашнее задание
• Изменить принцип выравнивания компонентов в LaunchScreen:
• За основу возьмите иконку галочки (должна находиться по центру
экрана), от которой будут строиться все надписи выше и ниже
• Проверить, что в обоих ориентациях окно отображается корректно
• Запускать в разных версиях устройств (эмуляторах)

• Добавить в закладки:
• https://developer.apple.com/design/adaptivity/
• https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/A
utolayoutPG

• Постепенно изучать и смотреть видео