- PVSM.RU - https://www.pvsm.ru -
В мае на Google I/O мы впервые увидели Material Design 2.0. Команда Google провела крупный рефакторинг и выпустила обновленную библиотеку дизайна. В ней появились новые компоненты и анимации. Мы следим за развитием Material Components с самого начала. Сейчас все находится на стадии RC1, и уже скоро выйдет в релиз. Под катом обзор новых и обновленных UI-компонентов для тех, кто еще не пробовал их в работе, но интересуется.
«Как это уже задеприкейтили? Я даже попробовать ее толком не успел», – сказал один мой знакомый, когда узнал о переезде Material Components в новый пакет. Действительно, поддержки support.design больше не будет, а на ее место придет com.google.android.material.
В рамках проекта Android X Google устроили рефакторинг всей библиотеки поддержки и архитектурных компонентов. Подробнее можно почитать в их блоге [1]. Вот пример некоторых пакетов:
старый пакет
android.support.@
android.databinding.@
android.design.@
новый пакет
androidx.@
androidx.databinding.@
com.google.android.material.@
К счастью, для «мягкого» переезда на новую библиотеку, в студии появится инструмент, позволяющий автоматически обновить все зависимости. Сейчас это доступно уже в Android Studio Canary 3.3 [2]. Он призван автоматически находить все зависимости в импортах, в gradle файлах, в XML и в Proguard.
Все старые UI-компоненты из Support Library переехали в Material library, а ещё появились новые компоненты. Добавим в проект новую зависимость:
implementation 'com.google.android.material:material:1.0.0-rc01'
Обратной совместимости с Support не предполагается. Придется избавиться от всех остальных зависимостей, где встречается слово support, и заменить их на соответствующие [3] из Android X. Иначе проект просто не соберется из-за множества конфликтов. Для тестовой сборки мне пришлось даже заменить Glide на Picasso, потому что первый тянет за собой android-support. На большом проекте вручную это делать будет неудобно.
Однако для тестирования Material Components можем воспользоваться support:design версии 28-beta, куда Google любезно продублировала все актуальные компоненты. Несмотря на это, 28 версия Support library будет последней, и в дальнейшем ее поддержка прекратится. А теперь давайте посмотрим на новые компоненты, и измененные старые.
BottomAppbar [4] – это что-то похожее на Appbar, только с возможностью прикрепления Floating Action Button и вырезом под него. Предназначен для работы внутри CoordinatorLayout.
Вот некоторые параметры, которые мы можем кастомизировать:
<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"/>
На момент написания статьи, BottomAppBar доделан не до конца. Например, нельзя разместить NavigationIcon в центре по вертикали, но, наверное, это скоро допилят.
Chip [5] – еще одна новая View в библиотеке. С её помощью можно удобно показывать перечисление небольших объектов. Например, фильтры или какие-нибудь подсказки для пользователя. По гайдлайнам Chip обладает следующими свойствами:
Реализация в Material library представляет из себя расширенную версию AppCompatCheckBox, и может порадовать нас такими кастомизируемыми параметрами:
Приятно удивило наличие ChipGroup, являющегося наследником FlexboxLayout [6], которого наконец-то включили в библиотеку дизайна.
BackDrop [7] – новый для Android паттерн навигации. Есть основной контент, который расположен на переднем плане, и дополнительная область, лежащая позади (обычно это меню навигации). Если нужно добраться до контента сзади, то передний план съезжает вниз до нужного уровня.
Состоит Backdrop из трех элементов:
На момент написания статьи он еще не реализован в библиотеке, и в соответствующем репозитории [8] пока пусто. Поэтому пришлось делать свою реализацию, обернув ее в библиотеку [9]:
Просто прикрепляем 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) {
attachBackContainer(R.id.backContainer) // set back container
attachToolbar(R.id.toolbar) // set toolbar
// set navigation icons for toolbar
setClosedIcon(R.drawable.ic_menu)
setOpenedIcon(R.drawable.ic_close)
// add listener
addOnDropListener(object : BackdropBehavior.OnDropListener {
override fun onDrop(dropState: BackdropBehavior.DropState, fromUser: Boolean) {
// TODO: handle listener
}
})
}
Это просто один из вариантов реализации. Но для моего кейса получилось удобно. Думаю, решение Google будет несколько отличаться. Если вдруг есть предложения, то с радостью готов обсудить их в комментариях под статьей.
MaterialButtons [10] – обновленные более кастомизируемые кнопки. У них есть следующие параметры для кастомизации:
Конечно, эти стили для кнопок всегда можно сделать самостоятельно. Но теперь кастомизация кнопок хорошо работает «из коробки», и это очень удобно.
Например, чтобы сделать кнопку с крестиком, раньше пришлось бы писать два 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 [11] – тоже претерпел изменения. Теперь текстовому полю «из коробки» можно добавить обводку по контуру, сделать его залитым каким-то цветом, или закруглить отдельные углы.
Как и раньше, можно использовать конструкцию из InputLayout с дочерним EditText, для более удобного для отображения подсказок, ошибок и прочего выделения текста.
Изменения тоже не очень существенные, но кастомные решения можно разрабатывать теперь намного быстрее. С точки зрения бизнеса, скорость разработки имеет значение, и тут Google постарались неплохо.
MaterialCardView [12] – это все старая CardView, но теперь с обводкой по контуру, как у кнопок.
Существенных изменений не так много. Новые механизмы кастомизации просто позволяют сделать чуточку проще то, что мы все делали и раньше. Зато появилась проблема совместимости с Support library. Разработчикам библиотек придется переезжать на Android X, что отнимет много времени и нервов. Особенно, если учесть, какая кодовая база сейчас support-ориентированна. Несмотря на то, что Google предоставляет инструмент для автоматизации переезда с заменой всех импортов, работает он не идеально. Подобные переезды на своих проектах все-таки придется пережить с некоторыми трудностями.
На данный момент не все заявленные Material-компоненты реализованы корректно, а некоторые не реализованы совсем. Будем смотреть, будем пробовать.
Автор: Semper-Viventem
Источник [13]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ui/290596
Ссылки в тексте:
[1] блоге: https://android-developers.googleblog.com/2018/05/hello-world-androidx.html
[2] Android Studio Canary 3.3: https://developer.android.com/studio/preview/
[3] соответствующие: https://developer.android.com/topic/libraries/support-library/refactor
[4] BottomAppbar: https://material.io/design/components/app-bars-bottom.html
[5] Chip: https://material.io/develop/android/components/chip/
[6] FlexboxLayout: https://github.com/google/flexbox-layout
[7] BackDrop: https://material.io/design/components/backdrop.html
[8] репозитории: https://github.com/material-components/material-components-android/blob/master/docs/components/Backdrop.md
[9] библиотеку: https://github.com/Semper-Viventem/Material-backdrop
[10] MaterialButtons: https://material.io/develop/android/components/material-button/
[11] Text Fields: https://material.io/develop/android/components/text-input-layout/
[12] MaterialCardView: https://material.io/design/components/cards.html
[13] Источник: https://habr.com/post/419545/?utm_campaign=419545
Нажмите здесь для печати.