Хабрахабр

Material 2.0 для разработчиков. Краткий обзор новых компонентов

0.
В мае на Google I/O мы впервые увидели Material Design 2. В ней появились новые компоненты и анимации. Команда Google провела крупный рефакторинг и выпустила обновленную библиотеку дизайна. Сейчас все находится на стадии RC1, и уже скоро выйдет в релиз. Мы следим за развитием Material Components с самого начала. Под катом обзор новых и обновленных UI-компонентов для тех, кто еще не пробовал их в работе, но интересуется.

Android X вместо Support library

Я даже попробовать ее толком не успел», – сказал один мой знакомый, когда узнал о переезде Material Components в новый пакет. «Как это уже задеприкейтили? Подробнее можно почитать в их блоге. Действительно, поддержки support.design больше не будет, а на ее место придет com.google.android.material.
В рамках проекта Android X Google устроили рефакторинг всей библиотеки поддержки и архитектурных компонентов. Вот пример некоторых пакетов:

старый пакет

android.support.@
android.databinding.@
android.design.

новый пакет

androidx.@
androidx.databinding.@
com.google.android.material.

Сейчас это доступно уже в Android Studio Canary 3. К счастью, для «мягкого» переезда на новую библиотеку, в студии появится инструмент, позволяющий автоматически обновить все зависимости. Он призван автоматически находить все зависимости в импортах, в gradle файлах, в XML и в Proguard. 3.

Material library

Добавим в проект новую зависимость: Все старые UI-компоненты из Support Library переехали в Material library, а ещё появились новые компоненты.

implementation 'com.google.android.material:material:1.0.0-rc01'

Придется избавиться от всех остальных зависимостей, где встречается слово support, и заменить их на соответствующие из Android X. Обратной совместимости с Support не предполагается. Для тестовой сборки мне пришлось даже заменить Glide на Picasso, потому что первый тянет за собой android-support. Иначе проект просто не соберется из-за множества конфликтов. На большом проекте вручную это делать будет неудобно.

Несмотря на это, 28 версия Support library будет последней, и в дальнейшем ее поддержка прекратится.
Однако для тестирования Material Components можем воспользоваться support:design версии 28-beta, куда Google любезно продублировала все актуальные компоненты. А теперь давайте посмотрим на новые компоненты, и измененные старые.

BottomAppbar

Предназначен для работы внутри CoordinatorLayout.
Вот некоторые параметры, которые мы можем кастомизировать:
BottomAppbar – это что-то похожее на Appbar, только с возможностью прикрепления Floating Action Button и вырезом под него.

  • app:backgroundTint — цвет заполненного пространства
  • app:fabAlignmentMode — положение FAB
  • app:fabCradleMargin — отступ между FAB и BottomAppbar
  • app:fabCradleRoundedCornerRadius — закругление на углах выреза для FAB
  • app:fabCradleVerticalOffset
  • app:hideOnScroll

<com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/bottomAppBar"/> <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottomAppBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:fabCradleMargin="4dp"/>

Например, нельзя разместить NavigationIcon в центре по вертикали, но, наверное, это скоро допилят. На момент написания статьи, BottomAppBar доделан не до конца.

Chips

С её помощью можно удобно показывать перечисление небольших объектов.
Chip – еще одна новая View в библиотеке. По гайдлайнам Chip обладает следующими свойствами: Например, фильтры или какие-нибудь подсказки для пользователя.

  • Может иметь иконку контента (слева).
  • Может иметь иконку для удаления (справа).
  • Содержит текст.
  • Может находится в двух состояниях, как CheckBox.

Реализация в Material library представляет из себя расширенную версию AppCompatCheckBox, и может порадовать нас такими кастомизируемыми параметрами:

  • app:chipCornerRadius
  • app:chipMinHeight
  • app:chipBackgroundColor
  • app:chipStrokeColor
  • app:chipStrokeWidth
  • app:rippleColor
  • android:text
  • android:textAppearance
  • app:chipIconVisible
  • app:chipIcon
  • app:chipIconTint
  • app:chipIconSize
  • app:closeIconVisible
  • app:closeIcon
  • app:closeIconSize
  • app:closeIconTint
  • app:checkable
  • app:checkedIconVisible
  • app:checkedIcon
  • app:showMotionSpec
  • app:hideMotionSpec

Приятно удивило наличие ChipGroup, являющегося наследником FlexboxLayout, которого наконец-то включили в библиотеку дизайна.

BackDrop

Есть основной контент, который расположен на переднем плане, и дополнительная область, лежащая позади (обычно это меню навигации).
BackDrop – новый для Android паттерн навигации. Если нужно добраться до контента сзади, то передний план съезжает вниз до нужного уровня.
Состоит Backdrop из трех элементов:

  • Toolbar
  • Front layout
  • Back layout

Поэтому пришлось делать свою реализацию, обернув ее в библиотеку: На момент написания статьи он еще не реализован в библиотеке, и в соответствующем репозитории пока пусто.

Просто прикрепляем BackdropBehavior на нужный Front Container и передаем ему Toolbar и Back Container.

XML

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content"/> <LinearLayout android:id="@+id/backContainer" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"/> <!-- Add BackdropBehavior to this view --> <android.support.design.card.MaterialCardView android:id="@+id/foregroundContainer" app:layout_behavior="ru.semper_viventem.backdrop.BackdropBehavior" android:layout_width="match_parent" android:layout_height="match_parent"/> </android.support.design.widget.CoordinatorLayout>

Kotlin

val backdropBehavior: BackdropBehavior = foregroundContainer.findBehavior() // find behavior with(backdropBehavior) })
}

Но для моего кейса получилось удобно. Это просто один из вариантов реализации. Если вдруг есть предложения, то с радостью готов обсудить их в комментариях под статьей. Думаю, решение Google будет несколько отличаться.

MaterialButtons

У них есть следующие параметры для кастомизации:
MaterialButtons – обновленные более кастомизируемые кнопки.

  • android:inset (Left, Top, Right, Bottom) — отступ кнопки от края View
  • app:backgroundTint — цвет заполнения кнопки
  • app:backgroundTintMode
  • app:icon — можно добавить иконку, по умолчанию слева от текста
  • app:iconPadding
  • app:iconTint
  • app:iconTintMode
  • app:strokeColor — для создания кнопок с обводкой
  • app:strokeWidth
  • app:cornerRadius
  • app:rippleColor

Но теперь кастомизация кнопок хорошо работает «из коробки», и это очень удобно. Конечно, эти стили для кнопок всегда можно сделать самостоятельно.

Например, чтобы сделать кнопку с крестиком, раньше пришлось бы писать два XML файла:

Layout:

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_button" android:drawablePadding="@dimen/small_gap" android:drawableStart="@drawable/ic_close" android:paddingStart="@dimen/small_gap" android:paddingEnd="@dimen/small_gap" android:drawableTint="@color/colorAccent" android:text="Icon button"/>

bg_button.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <ripple android:color="@color/colorAccent"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="@color/white"/> <corners android:radius="16dp"/> </shape> </item> </ripple> </item> <item> <shape android:shape="rectangle"> <stroke android:color="@color/colorAccent" android:width="1dp"/> <corners android:radius="16dp"/> </shape> </item>
</layer-list>

Теперь описать кнопку можно сразу на месте:

<com.google.android.material.button.MaterialButton style="@style/Widget.MaterialComponents.Button.TextButton" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cornerRadius="16dp" app:icon="@drawable/ic_close" app:strokeColor="@color/colorAccent" app:strokeWidth="1dp" android:text="Icon button"/>

Text Fields

Теперь текстовому полю «из коробки» можно добавить обводку по контуру, сделать его залитым каким-то цветом, или закруглить отдельные углы.
Text Fields – тоже претерпел изменения.

Как и раньше, можно использовать конструкцию из InputLayout с дочерним EditText, для более удобного для отображения подсказок, ошибок и прочего выделения текста.

  • app:boxCornerRadiusTopLeft
  • app:boxCornerRadiusTopRight
  • app:boxCornerRadiusBottomLeft
  • app:boxCornerRadiusBottomRight
  • android:hint
  • app:hintEnabled
  • app:errorEnabled
  • app:setError
  • app:helperTextEnabled
  • app:helperText
  • app:passwordToggleEnabled
  • app:passwordToggleDrawable
  • app:counterEnabled
  • app:counterMaxLength

С точки зрения бизнеса, скорость разработки имеет значение, и тут Google постарались неплохо. Изменения тоже не очень существенные, но кастомные решения можно разрабатывать теперь намного быстрее.

MaterialCardView

MaterialCardView – это все старая CardView, но теперь с обводкой по контуру, как у кнопок.

  • app:strokeColor
  • app:strokeWidth

Итого

Новые механизмы кастомизации просто позволяют сделать чуточку проще то, что мы все делали и раньше. Существенных изменений не так много. Разработчикам библиотек придется переезжать на Android X, что отнимет много времени и нервов. Зато появилась проблема совместимости с Support library. Несмотря на то, что Google предоставляет инструмент для автоматизации переезда с заменой всех импортов, работает он не идеально. Особенно, если учесть, какая кодовая база сейчас support-ориентированна. Подобные переезды на своих проектах все-таки придется пережить с некоторыми трудностями.

Будем смотреть, будем пробовать. На данный момент не все заявленные Material-компоненты реализованы корректно, а некоторые не реализованы совсем.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть