MDC-102 Android: struktura i układ materiału (Kotlin)

1. Wprowadzenie

Material Komponenty (MDC) pomagają deweloperom wdrażać interfejs Material Design. MDC, stworzona przez zespół inżynierów i projektantów UX w Google, zawiera dziesiątki pięknych i funkcjonalnych komponentów interfejsu. Jest dostępny na Androida, iOS, internet oraz Flutter.material.io/develop

W ramach ćwiczenia w programie MDC-101 do utworzenia strony logowania wykorzystaliśmy 2 komponenty Material Komponenty (MDC) – pola tekstowe i przyciski z marszczonymi atramentem. Rozwińmy te podstawy, dodając nawigację, strukturę i dane.

Co utworzysz

W ramach tego ćwiczenia w Codelabs utworzysz ekran główny aplikacji o nazwie Shrine, która umożliwia sprzedaż odzieży i artykułów wyposażenia domu. Będą one zawierać:

• Górny pasek aplikacji
• Lista siatki pełna produktów

To 2 z 4 ćwiczeń z programowania, które przeprowadzą Cię przez proces tworzenia aplikacji dla usługi o nazwie Shrine. Zalecamy wykonanie wszystkich ćwiczeń w Codelabs w kolejności ich wykonywania po kolei.Powiązane z nimi ćwiczenia znajdziesz tutaj: MDC-101: podstawy komponentów materiałowych (MDC) MDC-103: dobór motywów Material Design z uwzględnieniem koloru, kształtu, wysokości i typu MDC-104: zaawansowane komponenty Material Design

Po zakończeniu MDC-104 aplikacja będzie wyglądać tak:

Komponenty MDC-Android w tym ćwiczeniu z programowania

• AppBarLayout
• MaterialCardView

W tym ćwiczeniu w Codelabs wykorzystasz domyślne komponenty udostępniane przez MDC-Android. O tym, jak je dostosować, dowiesz się w artykule MDC-103: Material Design Theming with Color, shape, height, and Type.

Czego potrzebujesz

• Podstawowa wiedza o programowaniu aplikacji na Androida
• Android Studio (pobierz tę aplikację stąd, jeśli jeszcze jej nie masz)
• Emulator Androida lub urządzenie (dostępne w Android Studio).
• Przykładowy kod (patrz następny krok)

Jak oceniasz swój poziom doświadczenia w tworzeniu aplikacji na Androida?

Początkujący Poziom średnio zaawansowany Biegły

2. Konfigurowanie środowiska programistycznego

Przechodzisz z MDC-101?

Jeśli masz ukończone MDC-101, Twój kod powinien być gotowy do wykonania tego ćwiczenia z programowania. Przejdź do kroku 3. Dodaj górny pasek aplikacji.

Zaczynasz od zera?

Pobierz aplikację startową z programowania

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-102-starter/kotlin. Pamiętaj, aby przed rozpoczęciem przejść do tego katalogu: cd.

...lub skopiuj je z GitHuba

Aby skopiować to ćwiczenia z programowania z GitHuba, uruchom te polecenia:

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

Aby uzyskać dodatkową pomoc: klonowanie repozytorium z GitHuba

Wczytywanie kodu startowego w Android Studio

1. Gdy kreator zakończy konfigurację i wyświetli się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym został zainstalowany przykładowy kod, i wybierz pozycję kotlin -> świątynia (lub wyszukaj na komputerze shrine), aby otworzyć projekt Shipping.
2. Poczekaj, aż Android Studio skompiluje i zsynchronizuje projekt, zgodnie ze wskaźnikami aktywności u dołu okna Android Studio.
3. W tym momencie Android Studio może zgłaszać błędy kompilacji, ponieważ brakuje w nim pakietu Android SDK lub narzędzi do kompilacji, takich jak ten poniżej. Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te aplikacje i zsynchronizować projekt.

Dodaj zależności projektu

Projekt musi być zależny od biblioteki pomocy MDC Android. Ta zależność powinna już być widoczna w pobranym przykładowym kodzie, ale warto wykonać te czynności, aby mieć pewność.

1. Przejdź do pliku build.gradle modułu app i upewnij się, że blok dependencies zawiera zależność od MDC na Androidzie:

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

2. (Opcjonalnie) W razie potrzeby zmodyfikuj plik build.gradle, aby dodać poniższe zależności i zsynchronizować projekt.

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'
}

Uruchamianie aplikacji startowej

Upewnij się, że konfiguracja kompilacji po lewej stronie przycisku Uruchom / Odtwórz to app. Aby skompilować i uruchomić aplikację, naciśnij zielony przycisk Uruchom / Graj. Jeśli masz już urządzenie z Androidem na liście dostępnych urządzeń, w oknie Wybierz cel wdrożenia przejdź do kroku 8. W przeciwnym razie kliknij Create New Virtual Device (Utwórz nowe urządzenie wirtualne). Na ekranie Wybierz sprzęt wybierz telefon, na przykład Pixel 2, i kliknij Dalej. Na ekranie Obraz systemu wybierz najnowszą wersję Androida, najlepiej najwyższy poziom interfejsu API. Jeśli aplikacja nie jest zainstalowana, kliknij widoczny link Pobierz i dokończ pobieranie. Kliknij Dalej. Na ekranie Urządzenie wirtualne z Androidem (AVD) pozostaw ustawienia bez zmian i kliknij Zakończ. W oknie docelowym wdrożenia wybierz urządzenie z Androidem. Kliknij OK. Android Studio kompiluje aplikację, wdraża ją i automatycznie otwiera na urządzeniu docelowym.

Jeśli nie udało Ci się dodać zależności ani uruchomić aplikacji, zatrzymaj środowisko programistyczne i rozwiąż ewentualne problemy.

Jeśli podczas kompilacji wystąpi błąd INSTALL_FAILED_INVALID_APK, spróbuj wykonać polecenie „Kompilacja”. -> „Clean Project” w Android Studio.

Gotowe! Powinna wyświetlić się strona logowania do Shrine z ćwiczenia z programowania MDC-101.

Teraz gdy ekran logowania wygląda dobrze, dodajmy do aplikacji kilka produktów.

3. Dodaj górny pasek aplikacji

Po zamknięciu strony logowania pojawia się ekran główny z komunikatem „Udało Ci się!”. Wspaniale. Jednak teraz użytkownik nie musi podejmować żadnych działań ani nie ma żadnego wglądu w to, gdzie się znajduje w aplikacji. Aby Ci w tym pomóc, dodaj nawigację.

Nawigacja odnosi się do komponentów, interakcji, wskazówek wizualnych i architektury informacji, które umożliwiają użytkownikom poruszanie się po aplikacji. Ułatwia to znalezienie treści i funkcji, co ułatwia wykonywanie zadań.

Material Design zapewnia dużą wygodę korzystania z nawigacji. Jednym z najbardziej widocznych komponentów jest pasek aplikacji u góry.

Górny pasek aplikacji może być znany jako „pasek nawigacyjny”. w iOS lub po prostu „pasek aplikacji” lub „Nagłówek”.

Aby zapewnić użytkownikom nawigację i zapewnić szybki dostęp do innych działań, dodajmy górny pasek aplikacji.

Dodawanie widżetu AppBar

W programie shr_product_grid_fragment.xml usuń blok <LinearLayout> zawierający pytanie „Udało Ci się!” TextView i zastąp go następującym:

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>

Twój shr_product_grid_fragment.xml powinien teraz wyglądać tak:

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>

Wiele pasków aplikacji ma przycisk obok tytułu. Dodajmy ikonę menu.

Dodawanie ikony nawigacji

Nie wychodząc z interfejsu shr_product_grid_fragment.xml, do komponentu XML Toolbar dodanego właśnie do układu dodaj ten kod:

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

shr_product_grid_fragment.xml powinien wyglądać tak:

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>

Dodaj przyciski poleceń i określ styl górnego paska aplikacji

Możesz też dodać przyciski na końcu paska aplikacji. Na Androidzie są one nazywane przyciskami polecenia. Automatycznie dodamy styl do górnego paska aplikacji i dodamy do jego menu przyciski poleceń.

Ważne: podczas importowania klasy Toolbar pamiętaj, aby zaimportować klasę androidx.appcompat.widget.Toolbar, a nie android.widget.Toolbar

W funkcji onCreateView funkcji ProductGridFragment.kt ustaw element Toolbar elementu activity tak, aby był używany jako ActionBar za pomocą setSupportActionBar. Możesz to zrobić po utworzeniu widoku za pomocą 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;
}

Ważne: upewnij się, że wybrano import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.. Pozwoli nam to uzyskać dostęp do widoku o identyfikatorze app_bar za pomocą właściwości syntetycznych kotlina, a nie findViewById.

W trakcie ćwiczeń w Codelabs możesz dodawać instrukcje importowania, gdy pojawi się prośba w Android Studio.

Następnie, bezpośrednio pod metodą, którą właśnie zmieniliśmy, by skonfigurować pasek narzędzi, zastąp onCreateOptionsMenu, aby rozszerzyć zawartość elementu shr_toolbar_menu.xml na pasek narzędzi:

ProductGridFragment.kt

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

Uwaga: jeśli podczas pisania tego kodu Android Studio napotka błędy Nie można usunąć symboli, naciśnij Alt + Enter lub (Option + Return na Macu), aby zaimportować brakujące symbole.

Na koniec zastąp ustawienie onCreate() w zasadzie ProductGridFragment.kt, a po wywołaniu funkcji super() wywołaj setHasOptionMenu, wpisując true:

ProductGridFragment.kt

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

Powyższe fragmenty kodu ustawiają pasek aplikacji z naszego układu XML w pasek działań dla tej aktywności. Wywołanie zwrotne onCreateOptionsMenu informuje aktywność, której wartości użyć jako menu. W takim przypadku na pasku aplikacji zostaną umieszczone pozycje menu z R.menu.shr_toolbar_menu. Plik menu zawiera 2 elementy: „Szukaj” i „Filtruj”.

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>

Po wprowadzeniu tych zmian plik ProductGridFragment.kt powinien wyglądać tak:

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)
   }
}

Twórz i uruchamiaj. Twój ekran główny powinien wyglądać tak:

Teraz na pasku narzędzi są ikona nawigacji, tytuł i dwie ikony działań po prawej stronie. Na pasku narzędzi widoczna jest również wysokość. Wyraźny cień wskazuje, że znajduje się ona w innej warstwie niż treść.

Pasek stanu u góry wygląda trochę ogólnie. Na razie nie musisz się tym przejmować, bo poprawimy to przy dołączaniu kolorów w formacie MDC-103.

4. Dodaj kartę

Aplikacja ma już strukturę, więc uporządkujmy treści, umieszczając je na kartach.

Karty

Karty to niezależne elementy, które wyświetlają treści i działania związane z jednym tematem. Jest to elastyczny sposób na prezentowanie podobnych treści jako kolekcji.

Dodaj kartę

Zacznijmy od dodania jednej karty poniżej górnego paska aplikacji. Karta powinna zawierać obszar na obraz, tytuł i etykietę dodatkowego tekstu. Dodaj ten kod w polu shr_product_grid_fragment.xml poniżej 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>

Kompilacja i uruchamianie:

Na tym podglądzie widać, że karta jest wstawiona od lewej krawędzi, ma zaokrąglone rogi i cień (odzwierciedlający wysokość karty). Cały element jest nazywany „kontenerem”. Poza kontenerem wszystkie elementy w nim są opcjonalne.

Do kontenera możesz dodać te elementy: tekst nagłówka, miniaturę lub awatar, tekst podtytułu, separatory, a nawet przyciski i ikony. Na przykład utworzona przez nas karta zawiera dwa elementy TextView (jeden dla tytułu, a drugi dla tekstu dodatkowego) w polu LinearLayout wyrównanym do dołu karty.

Karty zwykle wyświetlają się w kolekcji razem z innymi kartami. W następnej sekcji tego ćwiczenia z programowania umieścimy je jako kolekcję w siatce.

5. Utwórz siatkę kart

Gdy na ekranie znajduje się wiele kart, są one zgrupowane w jedną lub więcej kolekcji. Karty w siatce są w tej samej płaszczyźnie, co oznacza, że znajdują się na tej samej wysokości spoczynkowej co karty (chyba że zostaną wyciągnięte lub przeciągnięte, ale nie będziemy tego omawiać w tym ćwiczeniu).

Konfigurowanie siatki kart

Spójrz na nasz plik 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>

Ten układ karty zawiera kartę z obrazem (w tym przypadku NetworkImageView, który pozwala nam wczytywać i pokazywać obrazy z adresu URL) oraz 2 elementy TextViews.

Następnie zapoznaj się z przygotowanymi przez nas ProductCardRecyclerViewAdapter. Jest w tym samym pakiecie co 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
   }
}

Powyższa klasa adaptera zarządza zawartością naszej siatki. Aby określić, co każdy widok powinien robić z daną treścią, wkrótce napiszemy kod dla onBindViewHolder().

W tym samym pakiecie możesz również przyjrzeć się ProductCardViewHolder. Te zajęcia przechowuje widoki, które wpływają na układ karty, dzięki czemu możemy je później modyfikować.

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)

Aby skonfigurować siatkę, najpierw usuń obiekt zastępczy MaterialCardView z elementu shr_product_grid_fragment.xml. Następnie dodaj komponent reprezentujący naszą siatkę kart. W tym przypadku użyjemy obiektu RecyclerView. Dodaj komponent RecyclerView do elementu shr_product_grid_fragment.xml pod komponentem 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 powinien wyglądać tak:

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>

Na koniec w onCreateView() dodaj kod inicjowania RecyclerView do ProductGridFragment.kt po wywołaniu setUpToolbar(view) i przed instrukcją 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;
}

Powyższy fragment kodu zawiera kroki inicjowania niezbędne do skonfigurowania RecyclerView. Obejmuje to wybór menedżera układu RecyclerView oraz zainicjowanie i ustawienie adaptera RecyclerView.

Twój plik ProductGridFragment.kt powinien teraz wyglądać tak:

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)
   }
}

Kompilacja i uruchamianie:

Karty już są! Nic jeszcze nie wyświetla, więc dodajmy dane o produktach.

Dodawanie obrazów i tekstu

Do każdej karty dodaj zdjęcie, nazwę produktu i cenę. Nasz abstrakcja ViewHolder obejmuje wyświetlenia każdej karty. W ViewHolder dodaj te 3 widoki w następujący sposób.

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)
}

Zaktualizuj metodę onBindViewHolder() w ProductCardRecyclerViewAdapter, aby ustawić tytuł, cenę i zdjęcie produktu dla każdego widoku produktu, jak pokazano poniżej:

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)
   }
}

Powyższy kod informuje adapter naszego RecyclerView, co zrobić z każdą kartą przy użyciu ViewHolder.

Ustawia tutaj dane tekstowe w TextViewViewHolder i wywołuje funkcję ImageRequester, by pobrać obraz z adresu URL. ImageRequester to zajęcia, które udostępniliśmy dla wygody użytkowników i korzystają z biblioteki Volley (temat wykracza poza zakres tego ćwiczenia w programowaniu, ale możesz samodzielnie zapoznać się z kodem).

Kompilacja i uruchamianie:

Nasze produkty wyświetlają się teraz w aplikacji.

6. Podsumowanie

Nasza aplikacja ma podstawowa procedurę, która przenosi użytkownika z ekranu logowania na ekran główny, na którym można zobaczyć produkty. W zaledwie kilku linijkach kodu dodaliśmy górny pasek aplikacji z tytułem i 3 przyciskami oraz siatkę kart prezentujących zawartość aplikacji. Nasz ekran główny jest teraz prosty i funkcjonalny, ma podstawową strukturę i zawiera przydatne treści.

Ukończona aplikacja MDC 102 jest dostępna po pobraniu ukończonych ćwiczeń z programowania lub na stronach 102-complete na git: git checkout 102-complete.

Możesz przetestować swoją wersję aplikacji w porównaniu z aplikacją w tej gałęzi.

Dalsze kroki

Użyliśmy 4 głównych komponentów Material Design z biblioteki MDC-Android na górnym pasku aplikacji, karcie, polu tekstowym i przycisku. Więcej komponentów znajdziesz w katalogu MDC-Android.

Aplikacja jest w pełni funkcjonalna, ale nie podkreśla jeszcze żadnej marki ani stylu. W poradniku MDC-103: Material Design Theming with Color, shape, Elevation and Type, dostosujemy styl tych komponentów, aby podkreślić żywą, nowoczesną markę.

Udało mi się ukończyć to ćwiczenia z programowania w rozsądny sposób i w rozsądny sposób

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam

Chcę w przyszłości nadal używać komponentów Material Komponenty

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam