1. Введение
Компоненты Material (MDC) помогают разработчикам внедрять Material Design. Созданные командой инженеров и UX-дизайнеров Google, MDC включают в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступны для Android, iOS, веб-приложений и Flutter.material.io/develop |
В практическом задании MDC-103 вы настроили цвет, рельеф и типографику компонентов Material Components (MDC) для оформления вашего приложения.
Компонент в системе Material Design выполняет набор предопределенных задач и обладает определенными характеристиками, подобно кнопке. Однако кнопка — это не просто способ выполнения действия пользователем, это также визуальное выражение формы, размера и цвета, которое сообщает пользователю о ее интерактивности и о том, что при касании или щелчке произойдет какое-либо действие.
В руководстве по Material Design описываются компоненты с точки зрения дизайнера. В нем представлен широкий спектр базовых функций, доступных на разных платформах, а также анатомические элементы, из которых состоит каждый компонент. Например, фон содержит задний слой и его содержимое, передний слой и его содержимое, правила движения и параметры отображения. Каждый из этих компонентов может быть настроен под потребности, сценарии использования и содержимое каждого приложения. В основном это традиционные представления, элементы управления и функции из SDK вашей платформы.
Хотя в рекомендациях Material Design перечислены многие компоненты, не все из них подходят для повторного использования кода и поэтому не включены в MDC. Вы можете создать эти элементы самостоятельно, чтобы добиться индивидуального стиля для своего приложения, используя при этом традиционный код.
Что вы построите
В этом практическом задании вы добавите фон к локации «Святилище» . Он будет фильтровать товары, отображаемые в асимметричной сетке, по категориям. Вам понадобится:
- Форма
- Движение
- Традиционные классы Android SDK
Компоненты MDC-Android в этом практическом занятии.
- Форма
Что вам понадобится
- Базовые знания разработки под Android.
- Android Studio (скачайте её здесь, если у вас её ещё нет).
- Эмулятор или устройство Android (доступное через Android Studio)
- Пример кода (см. следующий шаг)
Как бы вы оценили свой уровень опыта в разработке Android-приложений?
2. Настройте среду разработки.
Продолжение темы MDC-103?
Если вы прошли курс MDC-103, ваш код должен быть готов для этой практической работы. Перейдите к шагу 3.
Начинать с нуля?
Скачайте стартовое приложение Codelab.
Стартовое приложение находится в каталоге material-components-android-codelabs-104-starter/java . Перед началом работы обязательно перейдите в этот каталог 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» . Перейдите в каталог, где вы установили примеры кода, и выберите java -> shrine (или найдите shrine на своем компьютере), чтобы открыть проект Shrine.
- Подождите немного, пока Android Studio соберет и синхронизирует проект, как это отобразится в индикаторах активности в нижней части окна Android Studio.
- На этом этапе Android Studio может выдавать ошибки сборки, поскольку у вас отсутствует Android SDK или инструменты сборки, например, показанные ниже. Следуйте инструкциям в Android Studio, чтобы установить/обновить их и синхронизировать ваш проект.
Добавьте зависимости проекта
Проекту необходима зависимость от библиотеки поддержки Android MDC . В загруженном вами примере кода эта зависимость уже должна быть указана, но для уверенности рекомендуется выполнить следующие шаги.
- Перейдите к файлу
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.
3. Добавьте фоновое меню.
Фон — это самая задняя поверхность приложения, расположенная позади всего остального контента и компонентов. Он состоит из двух поверхностей: заднего слоя (на котором отображаются действия и фильтры) и переднего слоя (на котором отображается контент). Фон можно использовать для отображения интерактивной информации и действий, таких как навигация или фильтры контента.
Скрыть содержимое сетки
В 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 добавьте следующее:
styles.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>
Соберите и запустите. Ваш главный экран должен выглядеть примерно так:
Фон готов. Давайте вернем контент, который мы скрыли ранее.
4. Добавьте фигуру.
До внесения каких-либо изменений в Святилище в этом практическом задании, его основной контент располагался на самой дальней задней поверхности. Добавление фона позволило сделать этот контент более заметным, поскольку он отображается на его фоне.
Добавить новый слой
Нам следует снова отобразить слой с сеткой товаров. Удалите атрибут 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.java . Добавьте следующую логику для установки фона в конец метода onCreateView() , непосредственно перед оператором return:
ProductGridFragment.java
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}
Наконец, мы обновим ресурс цвета productGridBackgroundColor (который также используется для фона пользовательской фигуры) следующим образом:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
Соберите и запустите:
Мы придали основной поверхности Shrine уникальный стилистический вид. Благодаря возвышению поверхности пользователи могут видеть, что за передним белым слоем находится нечто особенное. Давайте добавим анимацию, чтобы пользователи могли увидеть, что там находится: меню.
5. Добавьте движение.
Анимация — это способ оживить ваше приложение. Анимация может быть масштабной и эффектной, едва заметной и минималистичной, или любой промежуточной. Тип используемой анимации должен соответствовать ситуации. Анимация, применяемая к повторяющимся регулярным действиям, должна быть небольшой и незаметной, чтобы не занимать слишком много времени. Другие ситуации, например, первое открытие приложения пользователем, могут быть более привлекательными и помочь пользователю понять, как им пользоваться.
Добавить анимацию появления к кнопке меню
Движение заключается в том, что фигура перед собой движется прямо вниз. Мы уже предоставили вам обработчик кликов, который будет выполнять анимацию перемещения для листа, в файле NavigationIconClickListener.java . Мы можем установить этот обработчик кликов внутри метода setupToolbar() файла ProductGridFragment.java :
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
Теперь ваш метод setUpToolbar() должен выглядеть следующим образом:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}
Соберите и запустите. Нажмите кнопку меню:
Повторное нажатие на значок навигационного меню должно скрыть меню.
Корректировка движения переднего слоя
Анимация — отличный способ выразить свой бренд. Давайте посмотрим, как будет выглядеть анимация появления при использовании другой кривой синхронизации.
Обновите свой код в setupToolbar() в ProductGridFragment.java чтобы передать интерполятор обработчику клика по значку навигации следующим образом:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator()));
}
Это создает совершенно другой эффект, не так ли?
6. Фирменный значок
Фирменная иконография распространяется и на знакомые значки. Давайте сделаем значок раскрытия уникальным и объединим его с заголовком для создания неповторимого фирменного стиля.
Изменить значок кнопки меню
Измените кнопку меню, чтобы она отображала значок в виде ромба. Обновите панель инструментов в файле 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" />
В файле ProductGridFragment.java обновите обработчик кликов в setupToolbar() , чтобы он принимал данные о ресурсах панели инструментов как при открытом, так и при закрытом меню, следующим образом:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator(),
getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}
Соберите и запустите:
Отлично! Когда фон становится видимым, отображается значок меню в виде ромба. Когда меню можно скрыть, вместо него отображается значок закрытия.
7. Подведение итогов
В ходе этих четырех практических занятий вы узнали, как использовать Material Components для создания уникальных, элегантных пользовательских интерфейсов, отражающих индивидуальность и стиль бренда.
Следующие шаги
Данный практический курс, MDC-104, завершает эту последовательность практических занятий. Вы можете изучить еще больше компонентов MDC-Android, посетив каталог виджетов Android .
Для более сложной задачи в рамках этого практического задания измените ваше приложение Shrine таким образом, чтобы изображения товаров отображались при выборе категории из контекстного меню.
Чтобы узнать, как подключить это приложение к Firebase для работы в качестве бэкэнда, см. Firebase Android Codelab .