Автор: Команда 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. Эти макеты предоставят инструкции Карусели по поводу того, как расположить элементы относительно друг друга. Вот пример: 


&ltcom.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">
  &lt!-- Your item content here, e.g., ImageView --&gt
&lt/com.google.android.material.carousel.MaskableFrameLayout&gt

Вместо использования 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, не стесняйтесь, свяжитесь с нами, мы с радостью поможем реализовать вашу идею.