Компоненты Material (MDC) помогают разработчикам реализовывать принципы Material Design. MDC, созданный командой инженеров и UX-дизайнеров Google, включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, веб-приложений и Flutter. material.io/develop |
В лабораторной работе MDC-103 вы настроили цвет, высоту и типографику компонентов материалов (MDC) для стилизации своего приложения.
Компонент в системе Material Design выполняет набор предопределённых задач и обладает определёнными характеристиками, подобно кнопке. Однако кнопка — это не просто способ выполнить действие, это также визуальное выражение формы, размера и цвета, которое даёт пользователю понять, что она интерактивна и что при касании или щелчке по ней произойдёт какое-то действие.
Руководящие принципы Material Design описывают компоненты с точки зрения дизайнера. Они описывают широкий спектр базовых функций, доступных на разных платформах, а также анатомические элементы, из которых состоит каждый компонент. Например, фон содержит задний слой и его содержимое, передний слой и его содержимое, правила движения и параметры отображения. Каждый из этих компонентов можно настроить в соответствии с потребностями, вариантами использования и содержимым конкретного приложения. Эти элементы, по большей части, представляют собой традиционные представления, элементы управления и функции из SDK вашей платформы.
Хотя в рекомендациях Material Design упоминается множество компонентов, не все из них подходят для повторного использования кода и поэтому не представлены в MDC. Вы можете создать эти компоненты самостоятельно, чтобы придать своему приложению индивидуальный стиль, используя традиционный код.
Что вы построите
В этой лабораторной работе вы добавите фон к Shrine . Он будет фильтровать товары, отображаемые в асимметричной сетке, по категориям. Вам понадобится:
- Форма
- Движение
- Традиционные классы Android SDK
Компоненты MDC-Android в этой лабораторной работе
- Форма
Что вам понадобится
- Базовые знания разработки под Android
- Android Studio (загрузите здесь, если у вас ее еще нет)
- Эмулятор или устройство Android (доступно через Android Studio)
- Пример кода (см. следующий шаг)
Как бы вы оценили свой уровень опыта в создании приложений для Android?
Продолжение MDC-103?
Если вы прошли курс MDC-103, ваш код должен быть готов к этой практической работе. Перейдите к шагу 3.
Начинаете с нуля?
Загрузите стартовое приложение Codelab
Стартовое приложение находится в каталоге material-components-android-codelabs-104-starter/kotlin . Перед началом работы обязательно cd в этот каталог.
...или клонируйте его с GitHub
Чтобы клонировать эту кодовую лабу из GitHub, выполните следующие команды:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
Загрузите стартовый код в Android Studio
- После завершения работы мастера настройки и появления окна «Добро пожаловать в Android Studio» нажмите « Открыть существующий проект Android Studio» . Перейдите в каталог, куда был установлен пример кода, и выберите kotlin -> shrine (или найдите shrine на компьютере), чтобы открыть проект Shipping.
- Подождите немного, пока Android Studio выполнит сборку и синхронизацию проекта, на что указывают индикаторы активности в нижней части окна Android Studio.
- На этом этапе Android Studio может выдать ошибки сборки, поскольку у вас отсутствует Android SDK или инструменты сборки, например, показанные ниже. Следуйте инструкциям Android Studio, чтобы установить/обновить их и синхронизировать свой проект.
Добавить зависимости проекта
Проекту требуется зависимость от библиотеки поддержки MDC для Android . В загруженном примере кода эта зависимость уже должна быть указана, но для её обеспечения рекомендуется выполнить следующие шаги.
- Перейдите к файлу
build.gradleмодуляappи убедитесь, что блокdependenciesвключает зависимость от MDC Android:
api 'com.google.android.material:material:1.1.0-alpha06'
- (Необязательно) При необходимости отредактируйте файл
build.gradle, чтобы добавить следующие зависимости и синхронизировать проект.
dependencies {
api 'com.google.android.material:material:1.1.0-alpha06'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.android.volley:volley:1.1.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:core:1.1.0'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}Запустите стартовое приложение
|
Успешно! Приложение Shrine должно запуститься на вашем устройстве.
Фон — это самая дальняя задняя поверхность приложения, которая отображается за всем остальным содержимым и компонентами. Он состоит из двух поверхностей: заднего слоя (где отображаются действия и фильтры) и переднего слоя (где отображается контент). Фон можно использовать для отображения интерактивной информации и действий, таких как навигация или фильтры контента.
Скрыть содержимое сетки
В shr_product_grid_fragment.xml добавьте атрибут android:visibility="gone" к вашему NestedScrollView , чтобы временно удалить содержимое продукта:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Мы установим фон в этой области. Чтобы избежать разделения между верхней панелью приложений и содержимым меню, отображаемым на фоне, мы сделаем фон того же цвета, что и верхняя панель приложений.
В shr_product_grid_fragment.xml добавьте следующее в качестве первого элемента корневого FrameLayout перед AppBarLayout :
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout> В styles.xml добавьте следующее:
стили.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>Молодец! Ты добавил красивый фон в интерфейс Shrine. Теперь добавим меню.
Добавить меню
Меню — это, по сути, список текстовых кнопок. Мы добавим одну из них сюда.
Создайте новый файл макета с именем shr_backdrop.xml в каталоге res -> layout и добавьте следующее:
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge> И добавьте этот список в LinearLayout который вы только что добавили в shr_product_grid_fragment.xml , используя тег <include> :
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>Соберите и запустите. Ваш главный экран должен выглядеть так:
Итак, мы настроили фон. Давайте вернём то, что мы скрыли ранее.
До того, как мы внесли какие-либо изменения в Shrine в этой лабораторной работе, основной контент продукта располагался на дальней задней поверхности. Благодаря добавлению фона этот контент стал более заметным, поскольку отображается на переднем плане.
Добавить новый слой
Нам нужно снова отобразить слой сетки товаров. Удалите атрибут android:visibility="gone" из NestedScrollView :
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Давайте добавим к переднему слою выемку в левом верхнем углу. В Material Design этот тип кастомизации называется «формой». Поверхности из материалов могут иметь различные формы. Формы добавляют выразительности и стиля поверхностям и могут использоваться для брендинга. Материальные формы могут иметь изогнутые или скошенные углы и края, а также любое количество сторон. Они могут быть симметричными или неровными.
Добавить форму
Измените форму сетки. Мы предоставили настраиваемый фон фигуры, но он корректно отображается только на Android Marshmallow и более поздних версиях. Фон shr_product_grid_background_shape можно установить для NestedScrollView только на Android Marshmallow и более поздних версиях. Сначала добавьте id к NestedScrollView , чтобы можно было ссылаться на него в коде, как показано ниже:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Затем программно установите фон в ProductGridFragment.kt . Добавьте следующую логику для установки фона в конец метода onCreateView() , непосредственно перед оператором return:
ProductGridFragment.kt
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}Наконец, мы обновим цветовой ресурс productGridBackgroundColor (также используемый фоном пользовательской фигуры) следующим образом:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>Сборка и запуск:
Мы придали Shrine стилизованную форму его основной поверхности. Благодаря возвышенности поверхности пользователи могут видеть, что за передним белым слоем что-то находится. Давайте добавим движение, чтобы пользователи могли видеть, что там находится: меню.
Движение — это способ оживить ваше приложение. Движение может быть масштабным и драматичным, едва заметным и минималистичным, или чем-то средним. Тип используемого движения должен соответствовать ситуации. Движения, применяемые к повторяющимся действиям, должны быть небольшими и едва заметными, чтобы не занимать слишком много времени. Другие ситуации, например, первый запуск приложения пользователем, могут быть более привлекательными и помочь пользователю освоить ваше приложение.
Добавить движение раскрытия к кнопке меню
Движение — это движение фигуры на переднем плане прямо вниз. Мы уже предоставили обработчик щелчков, который будет запускать анимацию перемещения листа, в NavigationIconClickListener.kt . Этот обработчик щелчков можно настроить в onCreateView() объекта ProductGridFragement , в разделе, отвечающем за настройку панели инструментов. Добавьте следующую строку, чтобы настроить обработчик щелчков на значке меню панели инструментов:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))Теперь раздел должен выглядеть следующим образом:
ProductGridFragment.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))Сборка и запуск. Нажмите кнопку меню:
Повторное нажатие на значок меню навигации должно скрыть его.
Изменить движение переднего слоя
Движение — отличный способ выразить свой бренд. Давайте посмотрим, как выглядит анимация появления с использованием другой временной кривой.
Обновите прослушиватель щелчков в ProductGridFragment.kt , чтобы передать Interpolator прослушивателю щелчков значка навигации, как показано ниже:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))
Это создает другой эффект, не правда ли?
Фирменная иконография распространяется и на привычные значки. Давайте создадим уникальный значок раскрытия и объединим его с нашим заголовком для создания уникального фирменного стиля.
Изменить значок кнопки меню
Измените кнопку меню так, чтобы отображался значок с ромбовидным узором. Обновите панель инструментов в файле shr_product_grid_fragment.xml , используя новый фирменный значок, который мы вам предоставили ( shr_branded_menu ), и настройте атрибуты app:contentInsetStart и android:padding , чтобы панель инструментов лучше соответствовала требованиям вашего дизайнера:
shr_product_grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
Мы еще раз обновим наш прослушиватель щелчков в onCreateView() в ProductGridFragment.kt , чтобы принять рисуемые элементы для панели инструментов, когда меню открыто и когда оно закрыто, следующим образом:
ProductGridFragment .kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
activity!!,
view.product_grid,
AccelerateDecelerateInterpolator(),
ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close iconСборка и запуск:
Отлично! Когда фон можно открыть, отображается значок меню в виде ромба. Когда меню можно скрыть, отображается значок закрытия.
В ходе этих четырех практических занятий вы увидели, как использовать Material Components для создания уникального и элегантного пользовательского опыта, выражающего индивидуальность и стиль бренда.
Следующие шаги
Данная лабораторная работа, MDC-104, завершает серию практических работ. Вы можете изучить ещё больше компонентов MDC-Android, посетив каталог компонентов MDC-Android .
Чтобы усложнить задачу в рамках этой лабораторной работы, измените приложение Shrine, чтобы изменить изображения продуктов, отображаемые при выборе категории в меню фона.
Чтобы узнать, как подключить это приложение к Firebase для получения работающего бэкэнда, см. Firebase Android Codelab .