1. Введение
Material Components (MDC) помогают разработчикам реализовать Material Design. Созданный командой инженеров и UX-дизайнеров Google, MDC включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, Интернета и Flutter.material.io/develop. |
Material Components для 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 (или найдите на своем компьютере « доставка» ), чтобы открыть проект «Доставка».
- Подождите, пока 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), поэтому вы знаете, как использовать их в своем коде.
Необязательно Заменить класс кнопки
По умолчанию библиотека материалов автоматически преобразует обычные кнопки в кнопки MDC. Однако при желании вы можете заменить все ссылки на Button на MaterialButton, чтобы получить доступ к дополнительным методам, доступным только в MaterialButton, например, к изменению углового радиуса. Кнопки MDC представляют собой простой компонент plug-and-play. Вы просто заменяете имя компонента 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 с:
- Правильная высота и стиль
- Ширина обводки и атрибуты цвета
Упаковка содержимого в карточку
Оберните LinearLayout содержащий ваш контент в shipping_info_activity.xml с помощью компонента MaterialCardView , как показано ниже:
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 .