Material Design 3 для Android

Автор статті: Команда Stfalcon
Android Material Design

Сьогодні ми хочемо поговорити про інновації в Material Design. Під час Google I/O було представлено «Material You», що демонструє найпривабливіші атрибути персоналізації в останній версії системи Material Design, відомої як Material Design 3. Матеріал 3 представляє останню ітерацію системи Google з відкритим вихідним кодом. Це дає вам змогу створювати та розробляти красиві, функціональні продукти, які дотримуються принципів матеріального дизайну. Це оновлення не лише підтримує динамічні кольори, але й покращує різні матеріальні компоненти.

У нас також є докладний допис у блозі про Android Material Design які вам може бути цікаво перевірити.

Material 3 містить оновлені теми, компоненти та елементи персоналізації Material You, зокрема динамічний колір. Його ретельно розроблено, щоб ідеально гармоніювати з оновленим візуальним стилем і системним інтерфейсом користувача в Android 12 і наступних версіях.

Матеріальна тема

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

Ці свіжі колірні простори забезпечують динамічне вираження кольорів. Візуалізація динамічних кольорів і перехід до нашої нової системи кольорів тепер є простим процесом за допомогою Material Theme Builder, доступного як онлайн, так і в Figma. Коли ці проміжні значення кольорів генеруються за допомогою наших інструментів, можна встановити лише за допомогою одного вхідного кольору.

Інтеграція Dynamic Color

Щоб включити динамічний колір, клас DynamicColors у бібліотеці Material використовує зворотні виклики життєвого циклу активності, щоб визначити, коли та як застосовувати кольорові накладання. Використовуючи надані виклики API, у вас є можливість застосовувати динамічний колір до окремих розділів або до всієї програми. Ви також можете контролювати, коли та де застосовувати динамічний колір.

Щоб уникнути небажаних наслідків, дуже важливо, щоб ваш код програми посилався на атрибути теми, а не на жорстко закодовані кольори (наприклад, HEX-коди або "@color/").

Для програми, яка використовує тему Material3 з компонентами MDC, мінімальний код, необхідний для ввімкнення динамічного кольору, зазвичай додається в метод onCreate вашого класу Application: 

  java
Copy code
import android.app.Application;
import com.google.android.material.color.DynamicColors;


public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    // This is all you need.
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

Типографіка

Стилі типографіки зазнали спрощення. В епоху PreMaterial 3 існували різноманітні варіації заголовків, параметрів субтитрів, стилів основного тексту, тексту кнопки, тексту підпису та тексту накладки.

У Матеріалі 3 систему типографіки було вдосконалено, щоб представити більш спрощений набір варіантів для кожної категорії, зокрема Small, Medium і Large.

Більшість свіжих стилів TextAppearance безпосередньо узгоджуються зі стилями, створеними до Матеріалу 3. У MDC-Android назви властивостей дотримуються узгодженого шаблону: вони починаються з "textAppearance", а потім включають {Display, Headline, Title, Body , Label} разом із {Large, Medium, Small} як частину їхніх назв.

Оновлення компонентів

Новий компонент «Карусель» пропонує різноманітні функції, дозволяючи вам створювати захоплюючі враження, наприклад фотогалереї та взаємодіяти зі списками елементів більш гнучко, ніж за допомогою RecyclerView.

Ключові характеристики:

Використовує RecyclerView в основі, забезпечуючи оптимальну продуктивність і повну інтеграцію з вашими проектами.

Перехід до каруселі:

Щоб реалізувати карусель, ви можете почати з існуючого RecyclerView та змінити файли макета елементів, обернувши їх за допомогою MaskableFrameLayout. Ці макети нададуть інструкції Каруселі щодо того, як розташувати елементи відносно один одного. Ось приклад: 


<com.google.android.material.carousel.MaskableFrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/carousel_item_container"
  android:layout_width="130dp"
  android:layout_height="match_parent"
  android:layout_marginStart="4dp"
  android:layout_marginEnd="4dp"
  android:foreground="?attr/selectableItemBackground"
  app:shapeAppearance="?attr/shapeAppearanceCornerExtraLarge">
  <!-- Your item content here, e.g., ImageView -->
</com.google.android.material.carousel.MaskableFrameLayout>

Замість використання LinearLayoutManager використовуйте CarouselLayoutManager для RecyclerView.

Маскування та спеціальні об’єкти:

Маскування в MaskableFrameLayout коливається від 0% до 100%. Коли потрібне маскування, менеджер макета обчислює маскувальний прямокутник. Переконайтеся, що настроювані об’єкти, наприклад зображення з настроюваними матрицями або текстові компоненти, гармонійно працюють із маскуванням Каруселі. Ви можете дозволити їм реагувати на зміни розміру маски за допомогою OnMaskChangedListener у вашому MaskableFrameLayout.

Стратегія MultiBrowseCarousel:

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

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

Щоб дізнатися більше про інтеграцію нового компонента Carousel у вашу програму, зверніться до повного документація розробника.

Верхня панель програм

Верхні панелі додатків отримали зміни Material You, щоб ефективніше гармоніювати з кольоровими схемами. До Material You верхні панелі додатків покладалися на тіні, щоб відрізнити їх від вмісту. Тепер нові тони поверхні роблять колір основним показником висоти.

Навігаційна панель/Нижня панель навігації

Перегляд нижньої навігації отримав візуальне оновлення та додав нові можливості. Кожен пункт меню в нижній панелі навігації тепер складається з піктограми та текстової мітки. Коли пункт призначення вибрано, і піктограма, і мітка змінять колір на інший, ніж у неактивному стані.

У Material Design 3 неактивні пункти призначення представлені окресленою версією значка, якщо це можливо. Активні пункти призначення позначаються значком із заливкою, що міститься в контейнері у формі таблетки.

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

Плаваюча кнопка дії

Кнопка FloatingActionButton (FAB) зазнала редизайну. За відсутності явної теми або використання застарілої теми Widget.Design.FloatingActionButton новий дизайн автоматично застосовується в темі Theme.Material3.*.

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

 @style/Widget.MaterialComponents.FloatingActionButton.

Крім того, представлено новий великий варіант FAB.

Кнопки

У Material Design 3 і заповнена, і окреслена кнопки мають повністю закруглені кути. Віджети кнопок автоматично приймуть кнопку Material Button і застосують стиль Material3, якщо розмістити їх у темі, отриманій від Theme.Material3.*. Щоб отримати додаткові вказівки щодо впровадження кнопок, включаючи додаткові приклади та фрагменти коду, зверніться до документації.

Фішки

У Material Design 2 у Chips були повністю закруглені кути, але в Material Design 3 вони отримали візуальне оновлення, тепер із закругленими кутами на 8 dp. Усі мікросхеми тепер дотримуються цього кутового радіуса 8 dp у Material Design 3. Щоб отримати вичерпні вказівки щодо впровадження мікросхем, включаючи додаткові приклади та фрагменти коду, зверніться до документації.

Значки

Нижня область навігації тепер дозволяє відображати пов’язані значки у вигляді заповненої форми або з міткою. Ви можете прикріпити значок до одного з чотирьох кутів піктограми, налаштувавши його силу тяжіння за допомогою констант, оголошених у BadgeDrawable.BadgeGravity: 

  
TOP_START
TOP_END
BOTTOM_START
BOTTOM_END

Нижче наведено приклад коду, який ілюструє, як додати значки до елементів меню BottomNavigationView: 

  
java
Copy code
BottomNavigationView bn = //... reference to your items.


// Retrieve the first menu item and increment the badge label
MenuItem menuItem = bn.getMenu().getItem(0);


int menuItemId = menuItem.getItemId();
BadgeDrawable badgeDrawable = bn.getOrCreateBadge(menuItemId);

// If the first menu item is selected and the badge was previously hidden,
// use BadgeDrawable.setVisible(true) to ensure the badge becomes visible.
badgeDrawable.setVisible(true);
badgeDrawable.setNumber(badgeDrawable.getNumber() + 1);

Цей фрагмент коду демонструє, як додати значки до елементів меню вашого BottomNavigationView.

Висновок

Ми настійно рекомендуємо оновити залежності вашої програми, щоб повністю зрозуміти та вивчити нові можливості, які пропонує Material Design 3, дозволяючи підвищити рівень взаємодії з користувачем завдяки розширеним можливостям кольору. Якщо вас цікавить створення програми для Android, не соромтеся, зв'яжіться з нами, ми з радістю допоможемо реалізувати вашу ідею.