1. Введение
Компоненты Material (MDC) помогают разработчикам внедрять Material Design. Созданные командой инженеров и UX-дизайнеров Google, MDC включают в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступны для Android, iOS, веб-приложений и Flutter.material.io/develop |
Material Components for Android (MDC Android) — это не новая система или фреймворк, требующий кардинального изменения дизайна вашего приложения. MDC Android построен на тех же классах и API, которые вам уже знакомы в Android, таких как кнопки AppCompat и текстовые поля. Компоненты, предоставляемые MDC Android, можно использовать по мере необходимости, и они сразу же улучшат дизайн вашего существующего приложения.
Что вы построите
В этом практическом задании вы замените некоторые существующие компоненты в форме новыми, созданными с помощью MDC.
Компоненты MDC-Android в этом практическом занятии.
- Текстовые поля
- Кнопки
- Меню
Что вам понадобится
- Базовые знания разработки под Android.
- Android Studio (скачайте её здесь, если у вас её ещё нет).
- Эмулятор или устройство Android (доступное через Android Studio)
- Пример кода (см. следующий шаг)
Как бы вы оценили свой уровень опыта в разработке Android-приложений?
2. Настройте среду разработки.
Скачайте стартовое приложение Codelab.
Стартовое приложение находится в каталоге material-components-android-codelabs-111-starter/kotlin . Перед началом работы обязательно перейдите в этот каталог с cd .
...или клонируйте его с GitHub
Чтобы клонировать этот код с GitHub, выполните следующие команды:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Загрузите стартовый код в Android Studio.
- После завершения работы мастера установки и появления окна «Добро пожаловать в Android Studio» нажмите « Открыть существующий проект Android Studio» . Перейдите в каталог, где вы установили примеры кода, и выберите Kotlin -> Shipping (или найдите Shipping на своем компьютере), чтобы открыть проект Shipping.
- Подождите немного, пока Android Studio соберет и синхронизирует проект, как это отобразится в индикаторах активности в нижней части окна Android Studio.
- На этом этапе Android Studio может выдавать ошибки сборки, поскольку у вас отсутствует Android SDK или инструменты сборки, например, показанные ниже. Следуйте инструкциям в Android Studio, чтобы установить/обновить их и синхронизировать ваш проект.
Запустите стартовое приложение
|
|
Успех! Вы должны увидеть приложение и его форму.
3. Обновите текстовые поля.
Текстовые поля в стиле Material Design значительно превосходят по удобству использования обычные текстовые поля. Определив зону нажатия с помощью контура или фоновой заливки, пользователи с большей вероятностью будут взаимодействовать с вашей формой или идентифицировать текстовые поля в более сложном контенте.
Импортировать MDC-Android
Перейдите к файлу build.gradle модуля app и убедитесь, что блок dependencies включает зависимость от MDC Android:
api 'com.google.android.material:material:1.1.0-alpha05'
Заменить стили текстового поля
В файле shipping_info_activity.xml добавьте следующий стиль ко всем XML-компонентам TextInputLayout :
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Каждый TextInputLayout должен выглядеть следующим образом:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Соберите и запустите:
Все текстовые поля обновлены в соответствии с новыми стандартами дизайна MDC.
Добавить ошибку
В текстовых полях MDC встроен механизм отображения ошибок. MDC добавляет красный текст под текстовым полем и обновляет элементы оформления, делая их также красными.
В ShippingInfoActivity.kt обновите onCreate() , чтобы он проверял текстовое поле ввода и устанавливал соответствующие ошибки. Это должно выглядеть примерно так:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Соберите и запустите. Нажмите СОХРАНИТЬ, но оставьте хотя бы одно текстовое поле пустым:
Пустые текстовые поля выделены красным цветом, а под ними отображается сообщение об ошибке.
4. Обновите кнопку.
MDC имеет кнопки со следующими функциями:
- Чернильные волны
- Закругленные углы
- Поддержка тем оформления
- Идеальная верстка и типографика.
- Создано на основе класса AppCompatButton (стандартный класс кнопок Android), поэтому вы знаете, как использовать их в своем коде.
При желании можно заменить класс кнопки.
По умолчанию библиотека Material автоматически преобразует обычные кнопки в кнопки MDC. Однако вы можете дополнительно заменить все ссылки на Button на MaterialButton, чтобы получить доступ к дополнительным методам, доступным только в MaterialButton, например, к изменению радиуса скругления углов. Кнопки MDC — это простой компонент, работающий по принципу «подключи и работай». Вам нужно всего лишь заменить имя XML-компонента Button на MaterialButton и применить к MaterialButton стиль MaterialButton по умолчанию.
В файле shipping_info_activity.xml измените название кнопки следующим образом:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
К:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Соберите и запустите:
5. Добавить карту
MaterialCardView — это компонент, построенный на основе CardView с использованием следующих компонентов:
- Правильный фасад и стиль
- Атрибуты толщины линии и цвета
Упаковка содержимого в открытку.
Оберните компонент MaterialCardView в ваш LinearLayout , содержащий контент из файла shipping_info_activity.xml , следующим образом:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Соберите и запустите. Вся форма должна быть заключена в карточку:
Компонент Material Card View — это знакомый, но в то же время новый способ легко оформить контент в виде карточки.
6. Подведение итогов
Вы заменили некоторые распространенные компоненты, чтобы продемонстрировать ощутимую пользу: текстовые поля, кнопки, карточки, и вам не пришлось полностью переделывать дизайн приложения. Другие компоненты также могут существенно изменить ситуацию, например, верхняя панель приложения и TabLayout.
Следующие шаги
Вы можете ознакомиться с еще большим количеством компонентов MDC-Android, посетив каталог виджетов Android .