Крок 1: Додавання Auto layout

Виберіть кілька елементів (наприклад, іконку та текст), клацніть правою кнопкою миші та оберіть Додати Auto Layout, або скористайтеся комбінацією клавіш Shift + A. Також можна натиснути іконку Auto Layout у панелі Design під розділом Layout.

Крок 2: Визначення фрейму Auto layout

Іконка фрейму у панелі Layers зміниться, вказуючи, що це Auto Layout фрейм. Це означає, що фрейм тепер динамічно підлаштовується під свої дочірні об'єкти.

Крок 3: Налаштування параметрів фрейму

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

Крок 4: Налаштування напрямку та відступів

Змініть напрямок розташування (горизонтальний, вертикальний або wrap). Відрегулюйте горизонтальний проміжок між елементами або додайте відступи, щоб створити негативний простір навколо елементів.

Крок 5: Забезпечення адаптивності кнопки

Кнопки, створені за допомогою Auto Layout, автоматично розширюються або стискаються під час введення тексту, забезпечуючи адаптивність. Це ідеально підходить для дизайнів, які потребують гнучкості.

Крок 6: Створення стеків та групування елементів

Розмістіть елементи один над одним, потім застосуйте Auto Layout для їх групування. Це дозволяє створювати організовані, адаптивні дизайни.

Крок 7: Зміна розширених налаштувань

Налаштуйте параметри Auto Layout для контролю поведінки обводок і стекування всередині фрейму Auto Layout. Змініть поведінку стекування, щоб дозволити об'єктам накладатися один на одного за потреби.

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