Основи Auto Layout — Концепція, будова, застосування

Auto Layout займається динамічним обчисленням позиції і розміру всіх view view ієрархії, на основі constraints — правил заданих для того чи іншого view. Найбільший і очевидний плюс для розробника у використанні Auto Layout в тому, що зникає необхідність у підгонки розмірів додатки під певні пристрої — Auto Layout робить це за вас, динамічно змінюючи інтерфейс залежно від зовнішніх або внутрішніх змін.

Прикладом зовнішніх змін може бути: Зміна розміру вікна в macOS, зміна орієнтації екрану, різні розміри екранів.

Приклад внутрішніх змін: Зміна вмісту у вікні, зміни в залежності від мови і т. д.

Створити свій інтерфейс можна 3-ма способами: програмно, на основі маски, яка автоматично підлаштовується під зміни або використовувати Auto Layout.

Відмінність Auto Layout від інших способів в тому, що вам більше не потрібно писати код, який змінює інтерфейс в залежності від розміру вікна та інших елементів, замість цього Auto Layout самостійно обчислює розташування елемента інтерфейсу в додатку і змінює його відносно оточення.

Auto Layout без обмежень
Якщо ви з якихось причин не хочете використовувати правила(constraints) або ваш інтерфейс містить у собі безліч елементів розташування яких можна змінювати нескінченно, вам на допомогу прийде Stack View.

Stack View — це ваша паличка-виручалочка при створенні комплексних інтерфейсів. Він може розставляти елементи всередині себе з даними параметрами:

axis (тільки UIStackView) — визначає орієнтацію, горизонтально або вертикально;
orientation (тільки NSStackView) — теж що і axis UIStackView;
distribution — визначає розташування елементів в даній орієнтації;
alignment — визначає розташування елементів перпендикулярно орієнтації StackView;
spacing — визначає відстань між сусідніми елементами;

Для отримання максимально задовільних результатів ви можете використовувати constraints в самому StackView або вкладати кілька StackView в StackView і потім використовувати constraints наприклад для вирівнювання по центру екрана.

Анатомія Constraint
Вся суть правил зводиться до створення обчислення у якого може бути лише одна відповідь — розташування елемента інтерфейсу.

Виглядає це приблизно так:

Кнопка.Верх = ВысшаяТочкаИнтерфейса.Низ + 100

За даним висловом зрозуміло що воно означає і яке правило встановлює для view. Як вже було сказано, обчислення Auto Layout завжди відбуваються відносно найближчих елементів, будь це межа екрану або сусідня кнопка.

У своїх обчисленнях constraints використовують множники, найближчі об'єкти та константи начебто + 100 з прикладу вище. Так само при створенні правил не обов'язково, щоб це були рівності, ви можете використовувати >= або<=.

При створенні layout бажано вказувати два правила для кожного виміру на елемент. Але не забувайте про StackView, який вам дуже допоможе при створенні інтерфейсу.

Найцікавішим фактом є те, що при створенні constraints ви можете встановлювати пріоритетність самих constraints. При обчисленні, Auto Layout намагається задовольнити всі constraint'и в порядку пріоритетності. Пріоритет = 1000 — обов'язковий. Всі інші, менш пріоритетні правила ви можете встановлювати для надання чіткості обробці розташування елементів вашого інтерфейсу. У разі, якщо один з constraint'ов буде не правильно обчислений, Auto Layout використовує найближчий constraint і почне відштовхуватися від нього. Тим не менш, настійно рекомендую не перевантажувати інтерфейс різними правилами і використовувати додатки тільки для досягнення потрібного результату.

Створення Auto Layout і його складових
Ви можете створювати constraint'и 3-ма способами:

1. CTRL + Перетягування, наприклад, від label до верхньої межі.
2. Використовуючи Stack, Align, Pin і Resolve Tools.
3. Надати Interface Builder побудувати constraints замість вас.

Серед даних пунктів найважливіший саме 2-й, так як використання цієї панелі є основним інструментом при створенні розмітки.

Stack — власне та сама кнопка, за допомогою якої ви можете помістити виділені деталі інтерфейсу в StackView. Interface Builder сам вирішує яким буде StackView в залежності від розташування елементів. Крім кнопки Stack, StackView можна створити перетягуванням з бібліотеки об'єктів, як будь-який інший елемент.

Align — меню, яке дозволить вам встановити елементи чітко визначеної лінії, чи то з боку, вертикально по центру або знизу. Ви часто використовуєте такий підхід, коли вирівнюєте текст по центру або строго зліва від початку сторінки в текстових редакторах.

Pin — меню, що дозволяє вам задати жорсткі рамки щодо свого розміру або найближчого предмета. В ньому ви вибираєте який constraint ви хочете задати в тому чи іншому напрямку і встановити його параметри. Також за допомогою цього меню можна, наприклад, додати групі однаковий розмір, не змінюється, не дивлячись на масштаб екрану.

Resolve Tools — найкращий помічник у налагодженні constraint'ів. Основні можливості цього меню: прибрати всі правила, додати приблизні constraints(Interface Builder побудує всі правила за вас), додати відсутні constraints оновити constraints або фреймів(положення об'єктів).
Як ви бачите, тут досить багато важливих пунктів і вони покликані полегшити всі тяготи розробника.

Редагувати constraint'и можна натиснувши на них у Interface Builder, знайти в Size Inspector або в списку Document Outline. При редагуванні параметрів ви можете задавати ідентифікатори для більш легкого розуміння і знаходження їх в логах і консолі при виконанні різних отладок.

Важливим аспектом при встановленні правил для елементів, є параметри CHCR (Content-Hugging and Compression-Resistance Priorities) — ці параметри впливають на зміну самого елемента в залежності від вищестоящого view. Грубо кажучи Hugging — це небажання елемента збільшуватися, а Compression-Resistance — небажання зменшуватися. За допомогою параметрів CHCR можна приміром змінювати співвідношення стиснення-розширення елементів в StackView в залежності від розмірів знаходяться в ньому елементів.

Будьте уважні — macOS і iOS розраховують layout's по-різному: В macOS, Auto Layout може змінювати розмір вікна і розмір вмісту, а в iOS він може змінювати розмір вмісту, так як система сама визначає розмір та межі програми.

При написанні статті я ґрунтувався на матеріалах офіційного гайда Auto Layout
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.