MDC-102 Android: структура и макет материала (Kotlin)

Компоненты Material (MDC) помогают разработчикам реализовывать принципы Material Design. MDC, созданный командой инженеров и UX-дизайнеров Google, включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, веб-приложений и Flutter. material.io/develop

В практической работе MDC-101 вы использовали два компонента Material (MDC) для создания страницы входа: текстовые поля и кнопки с эффектом чернильной ряби. Теперь давайте расширим эту основу, добавив навигацию, структуру и данные.

Что вы построите

В этой лабораторной работе вы создадите главный экран для приложения Shrine — приложения электронной коммерции, продающего одежду и товары для дома. Он будет содержать:

• Верхняя панель приложений
• Сетка-список, полная продуктов

Это вторая из четырёх практических работ, которые помогут вам создать приложение для продукта Shrine. Мы рекомендуем выполнять все работы по порядку, следуя пошаговому описанию задач. Соответствующие практические занятия можно найти по адресу: MDC-101: Основы компонентов материалов (MDC) MDC-103: Тематическое оформление в стиле Material Design с использованием цвета, формы, высоты и шрифта MDC-104: Расширенные компоненты Material Design .

К концу курса MDC-104 вы создадите приложение, которое будет выглядеть следующим образом:

Компоненты MDC-Android в этой лабораторной работе

• AppBarLayout
• MaterialCardView

В этой лабораторной работе вы будете использовать компоненты по умолчанию, предоставляемые MDC-Android. Вы научитесь настраивать их в рамках курса MDC-103: Тематическое оформление Material Design с использованием цвета, формы, высоты и шрифта .

Что вам понадобится

• Базовые знания разработки под Android
• Android Studio (загрузите здесь, если у вас ее еще нет)
• Эмулятор или устройство Android (доступно через Android Studio)
• Пример кода (см. следующий шаг)

Как бы вы оценили свой уровень опыта в создании приложений для Android?

Новичок Средний Опытный

Продолжение MDC-101?

Если вы прошли курс MDC-101, ваш код должен быть готов к этой практической работе. Перейдите к шагу 3: добавьте верхнюю панель приложения .

Начинаете с нуля?

Загрузите стартовое приложение Codelab

Загрузить стартовое приложение

Стартовое приложение находится в каталоге material-components-android-codelabs-102-starter/kotlin . Перед началом работы обязательно cd в этот каталог.

...или клонируйте его с GitHub

Чтобы клонировать эту кодовую лабу из GitHub, выполните следующие команды:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 102-starter

Для получения дополнительной помощи: Клонирование репозитория из GitHub

Загрузите стартовый код в Android Studio

1. После завершения работы мастера настройки и появления окна «Добро пожаловать в Android Studio» нажмите « Открыть существующий проект Android Studio» . Перейдите в каталог, куда был установлен пример кода, и выберите kotlin -> shrine (или найдите shrine на компьютере), чтобы открыть проект Shipping.
2. Подождите немного, пока Android Studio выполнит сборку и синхронизацию проекта, на что указывают индикаторы активности в нижней части окна Android Studio.
3. На этом этапе Android Studio может выдать ошибки сборки, поскольку у вас отсутствует Android SDK или инструменты сборки, например, показанные ниже. Следуйте инструкциям Android Studio, чтобы установить/обновить их и синхронизировать свой проект.

Добавить зависимости проекта

Проекту требуется зависимость от библиотеки поддержки MDC для Android . В загруженном примере кода эта зависимость уже должна быть указана, но для её обеспечения рекомендуется выполнить следующие шаги.

1. Перейдите к файлу build.gradle модуля app и убедитесь, что блок dependencies включает зависимость от MDC Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Необязательно) При необходимости отредактируйте файл 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'
}

Запустите стартовое приложение

Убедитесь, что конфигурация сборки слева от кнопки «Запустить/Воспроизвести» — app . Нажмите зеленую кнопку «Запустить/Воспроизвести», чтобы создать и запустить приложение. Если в окне «Выбор цели развертывания» в списке доступных устройств уже есть устройство Android , перейдите к шагу 8. В противном случае нажмите «Создать новое виртуальное устройство» . На экране «Выбор оборудования» выберите телефон, например Pixel 2 , а затем нажмите «Далее» . На экране «Образ системы» выберите последнюю версию Android , желательно с наивысшим уровнем API. Если она не установлена, нажмите на отобразившуюся ссылку « Загрузить» и завершите загрузку. Нажмите «Далее» . На экране виртуального устройства Android (AVD) оставьте настройки без изменений и нажмите кнопку Готово . Выберите устройство Android в диалоговом окне цели развертывания. Нажмите «ОК» . Android Studio создает приложение, развертывает его и автоматически открывает на целевом устройстве.

Если вам не удалось добавить зависимость или успешно запустить приложение, остановите работу среды разработки и устраните неполадки.

Если при сборке возникает ошибка INSTALL_FAILED_INVALID_APK, попробуйте выполнить « Сборка » -> « Очистить проект » в Android Studio.

Готово! Вы должны увидеть страницу входа в Shrine из лабораторной работы MDC-101.

Теперь, когда экран входа выглядит хорошо, давайте наполним приложение некоторыми продуктами.

При закрытии страницы входа открывается главный экран с надписью «Вы сделали это!». Это здорово! Но теперь пользователю не нужно ничего делать, и он не понимает, где именно в приложении он находится. Чтобы решить эту проблему, пора добавить навигацию.

Навигация относится к компонентам, взаимодействиям, визуальным подсказкам и информационной архитектуре, которые позволяют пользователям перемещаться по приложению. Она помогает сделать контент и функции легкодоступными, что упрощает выполнение задач.

Material Design предлагает шаблоны навигации, обеспечивающие высокий уровень удобства использования. Одним из наиболее заметных компонентов является верхняя панель приложений.

Верхняя панель приложений в iOS может быть вам известна как «Панель навигации» или просто «Панель приложений» или «Заголовок».

Чтобы обеспечить навигацию и дать пользователям быстрый доступ к другим действиям, давайте добавим верхнюю панель приложений.

Добавить виджет AppBar

В файле shr_product_grid_fragment.xml удалите блок <LinearLayout> , содержащий TextView «You did it!», и замените его следующим:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

Теперь ваш shr_product_grid_fragment.xml должен выглядеть следующим образом:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>

Во многих панелях приложений рядом с заголовком есть кнопка. Давайте добавим значок меню в нашу.

Добавить значок навигации

Не покидая файл shr_product_grid_fragment.xml , добавьте следующий код в компонент XML Toolbar , который вы только что добавили в свой макет:

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

Ваш shr_product_grid_fragment.xml должен выглядеть следующим образом:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">
  
   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>

Добавьте кнопки действий и оформите верхнюю панель приложений

Вы также можете добавить кнопки на край панели приложений. В Android они называются кнопками действий . Мы оформим верхнюю панель приложений и добавим кнопки действий в её меню программным способом.

Важно: при импорте класса Toolbar убедитесь, что вы импортируете androidx.appcompat.widget.Toolbar , а не android.widget.Toolbar

В функции onCreateView объекта ProductGridFragment.kt настройте использование Toolbar объекта activity в качестве ActionBar с помощью setSupportActionBar . Это можно сделать после создания представления с помощью inflater .

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   return view;
}

Важно: обязательно import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*. Это позволит нам получить доступ к представлению с идентификатором app_bar , используя синтетические свойства Kotlin, а не findViewById .

В ходе выполнения практических заданий вы можете продолжать добавлять операторы импорта по запросу Android Studio.

Далее, непосредственно под методом, который мы только что изменили для настройки панели инструментов, давайте переопределим onCreateOptionsMenu , чтобы вставить содержимое shr_toolbar_menu.xml в панель инструментов:

ProductGridFragment.kt

override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
   menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
   super.onCreateOptionsMenu(menu, menuInflater)
}

Примечание: если при написании этого кода Android Studio обнаружит ошибку «Невозможно разрешить символы» , нажмите Alt + Enter или ( Option + Return на Mac), чтобы импортировать отсутствующие символы.

Наконец, переопределите onCreate() в ProductGridFragment.kt и после вызова super() вызовите setHasOptionMenu со true :

ProductGridFragment.kt

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setHasOptionsMenu(true)
}

Приведённые выше фрагменты кода устанавливают панель приложения из нашего XML-макета в качестве панели действий для этой активности. Обратный вызов onCreateOptionsMenu сообщает активности, что использовать в качестве нашего меню. В данном случае она добавит пункты меню из R.menu.shr_toolbar_menu в панель приложения. Файл меню содержит два пункта: «Поиск» и «Фильтр».

shr_toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/search"
       android:icon="@drawable/shr_search"
       android:title="@string/shr_search_title"
       app:showAsAction="always" />
   <item
       android:id="@+id/filter"
       android:icon="@drawable/shr_filter"
       android:title="@string/shr_filter_title"
       app:showAsAction="always" />
</menu>

После внесения этих изменений ваш файл ProductGridFragment.kt должен выглядеть следующим образом:

ProductGridFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the tool bar
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

Соберите и запустите. Ваш главный экран должен выглядеть так:

Теперь на панели инструментов есть значок навигации, заголовок и два значка действий справа. Панель инструментов также отображает высоту с помощью лёгкой тени, которая показывает, что она находится на другом слое, чем содержимое.

Вы заметите, что строка состояния вверху выглядит несколько стандартно. Не беспокойтесь об этом сейчас, мы исправим это, когда займёмся цветовой темой в MDC-103.

Теперь, когда наше приложение имеет определенную структуру, давайте организуем контент, разместив его в карточках.

Карты

Карточки — это независимые элементы, отображающие контент и действия, связанные с одной темой. Они представляют собой гибкий способ представления схожего контента в виде коллекции.

Добавить карту

Начнём с добавления одной карточки под верхнюю панель приложения. Карточка должна содержать область для изображения, заголовок и метку для дополнительного текста. Добавьте следующий код в файл shr_product_grid_fragment.xml под AppBarLayout .

shr_product_grid_fragment.xml

<com.google.android.material.card.MaterialCardView
   android:layout_width="160dp"
   android:layout_height="180dp"
   android:layout_marginBottom="16dp"
   android:layout_marginLeft="16dp"
   android:layout_marginRight="16dp"
   android:layout_marginTop="70dp"
   app:cardBackgroundColor="?attr/colorPrimaryDark"
   app:cardCornerRadius="4dp">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
       android:background="#FFFFFF"
       android:orientation="vertical"
       android:padding="8dp">

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_title"
           android:textAppearance="?attr/textAppearanceHeadline6" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_description"
           android:textAppearance="?attr/textAppearanceBody2" />
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Сборка и запуск:

На этом предварительном просмотре видно, что карта вставлена с левого края, имеет скруглённые углы и тень (что подчёркивает её высоту). Весь элемент называется «контейнером». За исключением контейнера, все элементы внутри него необязательны.

В контейнер можно добавить следующие элементы: текст заголовка, миниатюру или аватар, текст подзаголовка, разделители и даже кнопки и значки. Например, карточка, которую мы только что создали, содержит два элемента TextView (один для заголовка и один для дополнительного текста) в LinearLayout , выровненных по нижнему краю карточки.

Карточки обычно отображаются в виде коллекции с другими карточками. В следующем разделе этой лабораторной работы мы разместим их в виде коллекции в сетке.

Когда на экране отображается несколько карт, они группируются в одну или несколько коллекций. Карты в сетке копланарны, то есть находятся на одной и той же высоте (если только их не поднимают или не перетаскивают, но в этой практической работе мы это рассматривать не будем).

Настройте сетку карт

Взгляните на файл shr_product_card.xml , который мы вам предоставили:

shr_product_card.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/white"
   app:cardElevation="2dp"
   app:cardPreventCornerOverlap="true">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">

       <com.android.volley.toolbox.NetworkImageView
           android:id="@+id/product_image"
           android:layout_width="match_parent"
           android:layout_height="@dimen/shr_product_card_image_height"
           android:background="?attr/colorPrimaryDark"
           android:scaleType="centerCrop" />

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           android:padding="16dp">

           <TextView
               android:id="@+id/product_title"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_title"
               android:textAppearance="?attr/textAppearanceHeadline6" />

           <TextView
               android:id="@+id/product_price"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_description"
               android:textAppearance="?attr/textAppearanceBody2" />
       </LinearLayout>
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Этот макет карточки содержит карточку с изображением (в данном случае NetworkImageView , которое позволяет загружать и показывать изображения из URL) и два TextViews .

Далее, обратите внимание на предоставленный нами ProductCardRecyclerViewAdapter . Он находится в том же пакете, что и ProductGridFragment .

ProductCardRecyclerViewAdapter.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry

/**
* Adapter used to show a simple grid of products.
*/
class ProductCardRecyclerViewAdapter(private val productList: List<ProductEntry>) : RecyclerView.Adapter<ProductCardViewHolder>() {

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductCardViewHolder {
       val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.shr_product_card, parent, false)
       return ProductCardViewHolder(layoutView)
   }

   override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
       // TODO: Put ViewHolder binding code here in MDC-102
   }

   override fun getItemCount(): Int {
       return productList.size
   }
}

Приведённый выше класс адаптера управляет содержимым нашей сетки. Чтобы определить, что каждое представление должно делать с заданным содержимым, мы вскоре напишем код для onBindViewHolder() .

В этом же пакете вы также можете взглянуть на ProductCardViewHolder . Этот класс хранит представления, влияющие на макет нашей карточки, чтобы мы могли изменить их позже.

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import androidx.recyclerview.widget.RecyclerView

class ProductCardViewHolder(itemView: View) //TODO: Find and store views from itemView
   : RecyclerView.ViewHolder(itemView)

Чтобы настроить сетку, сначала нужно удалить заглушку MaterialCardView из shr_product_grid_fragment.xml . Затем необходимо добавить компонент, представляющий нашу сетку карточек. В данном случае мы будем использовать RecyclerView. Добавьте компонент RecyclerView в файл shr_product_grid_fragment.xml под XML-компонентом AppBarLayout :

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:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Ваш shr_product_grid_fragment.xml должен выглядеть следующим образом:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>

   <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="56dp"
       android:background="@color/productGridBackgroundColor"
       android:paddingStart="@dimen/shr_product_grid_spacing"
       android:paddingEnd="@dimen/shr_product_grid_spacing"
       app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/recycler_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

   </androidx.core.widget.NestedScrollView>

</FrameLayout>

Наконец, в onCreateView() добавьте код инициализации RecyclerView в ProductGridFragment.kt после вызова setUpToolbar(view) и перед оператором return :

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   // Set up the RecyclerView
   view.recycler_view.setHasFixedSize(true)
   view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
   val adapter = ProductCardRecyclerViewAdapter(
           ProductEntry.initProductEntryList(resources))
   view.recycler_view.adapter = adapter
   val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
   val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
   view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

   return view;
}

Приведённый выше фрагмент кода содержит необходимые шаги инициализации для настройки RecyclerView . Это включает в себя настройку менеджера макета RecyclerView , а также инициализацию и настройку адаптера RecyclerView .

Теперь ваш файл ProductGridFragment.kt должен выглядеть следующим образом:

ProductGridFragment .kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the toolbar.
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       // Set up the RecyclerView
       view.recycler_view.setHasFixedSize(true)
       view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
       val adapter = ProductCardRecyclerViewAdapter(
               ProductEntry.initProductEntryList(resources))
       view.recycler_view.adapter = adapter
       val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
       val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
       view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

Сборка и запуск:

Карточки готовы! Пока ничего не показывают, поэтому давайте добавим данные о продукте.

Добавить изображения и текст

Для каждой карточки добавьте изображение, название товара и цену. Наша абстракция ViewHolder хранит представления для каждой карточки. В нашем ViewHolder добавьте три представления следующим образом.

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

import com.android.volley.toolbox.NetworkImageView

class ProductCardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

   var productImage: NetworkImageView = itemView.findViewById(R.id.product_image)
   var productTitle: TextView = itemView.findViewById(R.id.product_title)
   var productPrice: TextView = itemView.findViewById(R.id.product_price)
}

Обновите метод onBindViewHolder() в ProductCardRecyclerViewAdapter , чтобы задать название, цену и изображение продукта для каждого представления продукта, как показано ниже:

ProductCardRecyclerViewAdapter.kt

override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
   if (position < productList.size) {
       val product = productList[position]
       holder.productTitle.text = product.title
       holder.productPrice.text = product.price
       ImageRequester.setImageFromUrl(holder.productImage, product.url)
   }
}

Приведенный выше код сообщает нашему адаптеру RecyclerView , что делать с каждой картой, используя ViewHolder .

Здесь он устанавливает текстовые данные для каждого из объектов TextView объекта ViewHolder и вызывает метод ImageRequester для получения изображения по URL-адресу. ImageRequester — это класс, предоставленный нами для вашего удобства, и он использует библиотеку Volley (это тема, выходящая за рамки данной практической работы, но вы можете изучить код самостоятельно).

Сборка и запуск:

Наши продукты теперь отображаются в приложении!

В нашем приложении реализован базовый процесс, который переносит пользователя с экрана входа на главный экран, где можно просматривать товары. Всего несколькими строками кода мы добавили верхнюю панель приложения с заголовком и тремя кнопками, а также сетку карточек для представления контента приложения. Наш главный экран теперь прост и функционален, имеет базовую структуру и интерактивный контент.

Готовое приложение MDC 102 можно получить, загрузив готовую лабораторную работу или изучив 102-complete с помощью git: git checkout 102-complete .

Вы можете протестировать свою версию приложения, сравнив ее с приложением в этой ветке.

Следующие шаги

В верхней панели приложения, карточке, текстовом поле и кнопке мы использовали четыре основных компонента Material Design из библиотеки MDC-Android! Вы можете ознакомиться с ещё большим количеством компонентов в каталоге MDC-Android.

Несмотря на полную функциональность, наше приложение пока не отражает какой-либо конкретный бренд или стиль. В курсе MDC-103: «Материальный дизайн: темы, цвета, формы, рельеф и шрифты » мы настроим стиль этих компонентов, чтобы отразить яркий, современный бренд.

Мне удалось завершить эту лабораторную работу, затратив разумное количество времени и усилий.

Полностью согласен Соглашаться Нейтральный Не согласен Категорически не согласен

Я хотел бы продолжить использовать Material Components в будущем.

Полностью согласен Соглашаться Нейтральный Не согласен Категорически не согласен