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
Komponenty MDC-Android w tym ćwiczeniu z programowania
- AppBarLayout
- MaterialCardView
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?
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
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
Wczytywanie kodu startowego w Android Studio
- 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.
- Poczekaj, aż Android Studio skompiluje i zsynchronizuje projekt, zgodnie ze wskaźnikami aktywności u dołu okna Android Studio.
- 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ść.
- Przejdź do pliku
build.gradle
modułuapp
i upewnij się, że blokdependencies
zawiera zależność od MDC na Androidzie:
api 'com.google.android.material:material:1.1.0-alpha06'
- (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
|
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ę.
Material Design zapewnia dużą wygodę korzystania z nawigacji. Jednym z najbardziej widocznych komponentów jest pasek aplikacji u góry.
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ń.
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;
}
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)
}
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ść.
4. Dodaj kartę
Aplikacja ma już strukturę, więc uporządkujmy treści, umieszczając je na kartach.
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ć.
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 TextView
ViewHolder
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.
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ę.