Що нового в ConstraintLayout 1.1

 

ConstraintLayout спрощує створення складних макетів в Android, дозволяючи створювати більшу частину вашого користувацького інтерфейсу з допомогою візуального редактора в Android Studio. Його часто називають більш потужним RelativeLayout. З допомогою ConstraintLayout ви можете уникати безлічі рівнів вкладеності при верстці складних екранів.

 

Нещодавно була випущена стабільна версія ConstraintLayout 1.1, і тепер він виглядає дуже зріло. Повна його оптимізація ще більше збільшує його продуктивність, а нові елементи, такі як бар’єри і групи, перетворюють створення по-справжньому крутого дизайну в досить тривіальну задачу.

 

Android Gradle

 

Щоб використовувати нові функції в проекті, необхідно додати ConstraintLayout 1.1 в проект в якості залежності:

 

dependencies {
 implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}

 

Новий функціонал 1.1

 

Відсотки

 

Для того, щоб View займала певний відсоток екрану, ConstraintLayout 1.0 було необхідно наявність як мінімум двох залежностей. У ConstraintLayout 1.1 рішення цієї задачі було спрощено до простого зазначення відсотка ширини або висоти.

 

Ширина кнопки задана у відсотках, і вона займає весь вільний простір і зберігає свій зовнішній вигляд:

 

 

Всі View-компоненти підтримують атрибути layout_constraintWidth_percent і layout_constraintHeight_percent. Вони дозволяють обмежити View-компонент процентним значенням в рамках всього доступного простору. Таким чином, щоб кнопка розтягнулася на 70% в рамках вільного для неї місця, необхідно всього кілька рядків:

 

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
 app:layout_constraintWidth_percent="0.7" />

 

Ланцюжки

 

При позиціонуванні декількох компонентів за допомогою ланцюжка є можливість управління простором між ними. В 1.1 було виправлено декілька помилок з ланцюжками і тепер вони можуть працювати з великою кількістю View-компонентів. Щоб створити ланцюжок, необхідно додати залежності в обидві сторони від View-компонента:

 

 

Читайте також  Дизайн-система в Figma. Погляд на інтерфейс через компоненти

У головного (head) View-компонента з ланцюжка доступно властивість app:layout_constraintVertical_chainStyle, яке можна встановити в spread, spread_inside або packed.

 

  • spread рівномірно розподіляє всі View-компоненти в ланцюжку
  • spread_inside має перший і останній компоненти по краях і рівномірно розподіляє інші
  • packed групує всі компоненти в центрі ланцюжка

 

Бар’єри

 

Коли у вас є кілька View-компонентів, які можуть динамічно змінювати розмір, можна використовувати бар’єр для їх обмеження. Бар’єр можна розташувати на початку, в кінці, зверху або знизу декількох компонентів. Це дуже схоже на створення віртуальної групи компонентів. Віртуальною, тому що цієї групи не існує фізично, і, отже, вона не ускладнює ієрархію компонентів.

 

Бар’єри дійсно корисні, коли ви створюєте локалізовані рядка або отображаете контент, створений користувачем, розмір якого ви не можете передбачити.

 

Бар’єри дозволяють створити залежності від декількох View-компонентів:

 

 

Бар’єр завжди знаходиться безпосередньо за межами віртуальної групи, і його можна використовувати для побудови залежностей з іншими View-компонентами. У цьому прикладі View-компонент справа завжди знаходиться у кінці найдовшого компонента з віртуальної групи.

 

Групи

 

Іноді вам необхідно показувати або приховувати відразу кілька компонентів. Саме для цього в ConstraintLayout були додані групи.

 

Група не додає додаткового рівня вкладеності в ієрархію View-компонентів. Група — це просто спосіб віртуального об’єднання. У прикладі нижче ми об’єднуємо profile_name і profile_image під одним id — profile.

 

Це корисно, коли у вас є кілька компонентів, які відображаються або ховаються разом.

 

<android.support.constraint.Group
android:id="@+id/profile"
 app:constraint_referenced_ids="profile_name,profile_image" />

 

Після того як ви створили групу profile, ви можете змінювати видимість цілій групі, і вона буде застосовуватися як до profile_name, так і до profile_image.

Читайте також  Тонкощі продуктового дизайну

 

profile.visibility = GONE

profile.visibility = VISIBLE

 

Кругові залежності

 

У ConstraintLayout більшість залежностей і обмежень задаються розмірами екрану – горизонтальними і вертикальними. У Constraint Layout 1.1 з’явився новий тип залежності – constraintCircle, який дозволяє вказувати залежності по колу. Замість горизонтальних і вертикальних відступів можна вказати кут і радіус кола. Це зручно для View-компонентів, зміщених під кутом, таких як радіальне меню!

 

 

При створенні кругових залежностей кути починаються зверху і змінюються за годинниковою стрілкою. Наприклад, таким чином потрібно описати середню кнопку у прикладі вище:

 

<android.support.design.widget.FloatingActionButton
android:id="@+id/middle_expanded_fab"
app:layout_constraintCircle="@+id/fab"
app:layout_constraintCircleRadius="50dp"
 app:layout_constraintCircleAngle="315" />

 

Анімація з ConstraintSet

 

ConstraintLayout можна використовувати разом з ConstraintSet для одночасного анимирования декількох елементів. ConstraintSet працює тільки з залежностями з ConstraintLayout. ConstraintSet можна створити в коді або додати прямо в xml-файл.

 

Для початку анімації використовуйте TransitionManager.beginDelayedTransition()` з support library. Ця функція запустить всі анімації визначені в ConstraintSet**.

 

У цьому відео можна дізнатися трохи більше по цій темі:

Нові оптимізації

 

ConstraintLayout 1.1 додає кілька нових оптимізацій, які підвищують його продуктивність. Оптимізації виконуються для того, щоб зменшити кількість залежностей, необхідних для розташування View-компонентів на екрані.

 

Суть оптимізації полягає в позбавленні від надлишкових констант в макетах.

 

З’явився новий атрибут — layout_optimizationLevel, який налаштовує рівень оптимізації. Йому можна задати такі значення:

 

  • barriers визначає місце розташування бар’єрів і замінює їх простішими залежностями
  • direct оптимізує компоненти, безпосередньо підключені до інших фіксованим компонентів, наприклад сторонах екрану, і продовжує оптимізувати будь-які компоненти, що безпосередньо пов’язані з ними
  • standard — це оптимізація за промовчанням, яка включає в себе barriers і direct
  • dimensions в даний час є експериментальною оптимізацією і може приводити до деяких проблем. Оптимізує макет шляхом обчислення розмірів
  • chains в даний час також на експериментальній стадії. Оптимізує побудову ланцюжків компонентів з фіксованими розмірами
Читайте також  10 прийомів по створенню гарних бізнес презентацій з 2017 року

 

Якщо ви хочете випробувати експериментальні оптимізації dimensions і chains, вам необхідно включити їх в ConstraintLayout з допомогою

 

<android.support.constraint.ConstraintLayout 
 app:layout_optimizationLevel="standard|dimensions|chains"

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *