1. Giriş
Material Components (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'daki bir mühendis ve kullanıcı deneyimi tasarımcısı ekibi tarafından oluşturulan MDC, düzinelerce güzel ve işlevsel kullanıcı arayüzü bileşeni içerir. Android, iOS, web ve Flutter.material.io/develop için kullanılabilir. |
MDC-101 adlı codelab'de, giriş sayfası oluşturmak için iki Material Components (MDC) kullandınız: mürekkep dalgalanmaları olan metin alanları ve düğmeler. Şimdi de gezinme, yapı ve veri ekleyerek bu temeli genişletelim.
Ne oluşturacaksınız?
Bu codelab'de, giyim ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulama için bir ana ekran oluşturacaksınız. Bu kartta şu bilgiler yer alır:
- Üst uygulama çubuğu
- Ürünlerle dolu bir ızgara listesi
Bu codelab'deki MDC-Android bileşenleri
- AppBarLayout
- MaterialCardView
Gerekenler
- Android geliştirme hakkında temel düzeyde bilgi
- Android Studio (Henüz yüklemediyseniz buradan indirebilirsiniz.)
- Android emülatörü veya cihazı (Android Studio üzerinden kullanılabilir)
- Örnek kod (sonraki adıma bakın)
Android uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?
2. Geliştirme ortamınızı kurma
MDC-101'den devam mı ediyorsunuz?
MDC-101'i tamamladıysanız kodunuz bu codelab'e hazır olmalıdır. 3. adıma gidin: Üst uygulama çubuğu ekleme.
Sıfırdan mı başlıyorsunuz?
Başlangıç Codelab uygulamasını indirin
Başlangıç uygulaması material-components-android-codelabs-102-starter/kotlin dizininde bulunur. Başlamadan önce bu dizine cd olduğunuzdan emin olun.
...veya GitHub'dan kopyalayın
Bu codelab'i GitHub'dan klonlamak için aşağıdaki komutları çalıştırın:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 102-starter
Başlangıç kodunu Android Studio'ya yükleme
- Kurulum sihirbazı tamamlandıktan ve Android Studio'ya Hoş Geldiniz penceresi gösterildikten sonra Mevcut bir Android Studio projesini aç'ı tıklayın. Örnek kodu yüklediğiniz dizine gidin ve Kargo projesini açmak için kotlin -> shrine'ı seçin (veya bilgisayarınızda shrine'ı arayın).
- Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde belirtildiği gibi, Android Studio'nun projeyi oluşturup senkronize etmesi için bir süre bekleyin.
- Bu noktada, Android Studio, Android SDK veya derleme araçları eksik olduğundan (örneğin, aşağıda gösterilen) bazı derleme hataları verebilir. Bunları yüklemek/güncellemek ve projenizi senkronize etmek için Android Studio'daki talimatları uygulayın.
Proje bağımlılıkları ekleme
Projenin MDC Android destek kitaplığına bağımlı olması gerekir. İndirdiğiniz örnek kodda bu bağımlılık zaten listelenmiş olmalıdır ancak emin olmak için aşağıdaki adımları uygulamanız iyi bir uygulamadır.
appmodülününbuild.gradledosyasına gidin vedependenciesbloğunun MDC Android'e bağımlılık içerdiğinden emin olun:
api 'com.google.android.material:material:1.1.0-alpha06'
- (İsteğe bağlı) Gerekirse aşağıdaki bağımlılıkları eklemek için
build.gradledosyasını düzenleyin ve projeyi senkronize edin.
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'
}
Başlangıç uygulamasını çalıştırma
|
Başarılı aktarım MDC-101 codelab'indeki Shrine giriş sayfasını görmelisiniz.
Giriş ekranı artık iyi göründüğüne göre uygulamayı bazı ürünlerle dolduralım.
3. Üst uygulama çubuğu ekleme
Giriş sayfası kapatıldığında ana ekran gösterilir ve ekranda "Başardınız!" mesajı yer alır. Harika! Ancak kullanıcımız artık herhangi bir işlem yapamıyor veya uygulamada nerede olduğunu anlayamıyor. Bu konuda yardımcı olmak için gezinme özelliği eklemenin zamanı geldi.
Materyal Tasarım, yüksek düzeyde kullanılabilirlik sağlayan gezinme kalıpları sunar. En görünür bileşenlerden biri üst uygulama çubuğudur.
Gezinme sağlamak ve kullanıcılara diğer işlemlere hızlı erişim imkanı vermek için üst uygulama çubuğu ekleyelim.
AppBar widget'ı ekleme
shr_product_grid_fragment.xml bölümünde, "Başardınız!" ifadesini içeren <LinearLayout> bloğunu silin. TextView ile değiştirin:
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 öğeniz artık aşağıdaki gibi görünecektir:
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>
Birçok uygulama çubuğunda başlığın yanında bir düğme bulunur. Bizimkine bir menü simgesi ekleyelim.
Gezinme simgesi ekleme
Hâlâ shr_product_grid_fragment.xml bölümündeyken, düzeninize yeni eklediğiniz Toolbar XML bileşenine aşağıdakileri ekleyin:
shr_product_grid_fragment.xml
app:navigationIcon="@drawable/shr_menu"
shr_product_grid_fragment.xml öğeniz aşağıdaki gibi görünmelidir:
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>
İşlem düğmeleri ekleme ve üst uygulama çubuğunu biçimlendirme
Uygulama çubuğunun son tarafına da düğme ekleyebilirsiniz. Android'de bunlara işlem düğmeleri denir. Üst uygulama çubuğunu stilize edip menüsüne programatik olarak işlem düğmeleri ekleyeceğiz.
ProductGridFragment.kt'nın onCreateView işlevinde, activity'nın Toolbar değerini setSupportActionBar kullanarak ActionBar olarak kullanılacak şekilde ayarlayın. Bunu, görünüm inflater ile oluşturulduktan sonra yapabilirsiniz.
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;
}
Ardından, araç çubuğunu ayarlamak için az önce değiştirdiğimiz yöntemin hemen altında, shr_toolbar_menu.xml içeriğini araç çubuğuna ayrıştırmak için onCreateOptionsMenu öğesini geçersiz kılalım:
ProductGridFragment.kt
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
Son olarak, onCreate()'yı ProductGridFragment.kt'de geçersiz kılın ve super()'yi aradıktan sonra true ile setHasOptionMenu'ü arayın:
ProductGridFragment.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
Yukarıdaki kod snippet'leri, XML düzenimizdeki uygulama çubuğunu bu etkinlik için işlem çubuğu olarak ayarlar. Geri çağırma onCreateOptionsMenu, etkinliğe menü olarak neyin kullanılacağını söyler. Bu durumda, R.menu.shr_toolbar_menu içindeki menü öğeleri uygulama çubuğuna yerleştirilir. Menü dosyasında iki öğe bulunur: "Ara" ve "Filtrele".
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>
Bu değişikliklerden sonra ProductGridFragment.kt dosyanız aşağıdaki gibi görünmelidir:
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)
}
}
Derleyin ve çalıştırın. Ana ekranınız aşağıdaki gibi görünmelidir:
Artık araç çubuğunda bir gezinme simgesi, bir başlık ve sağ tarafta iki işlem simgesi var. Araç çubuğunda, içerikten farklı bir katmanda olduğunu gösteren ince bir gölgeyle yükseklik de gösterilir.
4. Kart ekleyin
Uygulamamızın yapısı oluştuğuna göre içeriği kartlara yerleştirerek düzenleyelim.
Kart ekleme
Üst uygulama çubuğunun altına bir kart ekleyerek başlayalım. Kartta resim, başlık ve ikincil metin etiketi için bir bölge olmalıdır. AppBarLayout'nin altındaki shr_product_grid_fragment.xml alanına aşağıdakileri ekleyin.
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>
Derleme ve çalıştırma:
Bu önizlemede, kartın sol kenardan girintili olduğu, yuvarlak köşeleri ve gölgesi (kartın yüksekliğini ifade eder) olduğu görülüyor. Öğenin tamamına "kapsayıcı" adı verilir. Kapsayıcı dışında, içindeki tüm öğeler isteğe bağlıdır.
Kapsayıcıya şu öğeleri ekleyebilirsiniz: başlık metni, küçük resim veya avatar, alt başlık metni, ayırıcılar, hatta düğmeler ve simgeler. Örneğin, yeni oluşturduğumuz kartta, kartın alt kısmına hizalanmış bir LinearLayout içinde iki TextView (biri başlık, diğeri de ikincil metin için) bulunuyor.
Kartlar genellikle diğer kartlarla birlikte bir koleksiyonda gösterilir. Bu codelab'in sonraki bölümünde bunları bir ızgarada koleksiyon olarak düzenleyeceğiz.
5. Kartlardan oluşan bir ızgara oluşturma
Bir ekranda birden fazla kart varsa bunlar bir veya daha fazla koleksiyonda gruplandırılır. Izgaradaki kartlar eş düzlemlidir. Yani, birbirleriyle aynı dinlenme yüksekliğini paylaşırlar (alınmadıkları veya sürüklenmedikleri sürece, ancak bu konuyu bu codelab'de ele almayacağız).
Kart ızgarasını ayarlama
Sizin için sağladığımız shr_product_card.xml dosyasına göz atın:
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>
Bu kart düzeninde bir resim içeren bir kart (bu örnekte, URL'den resim yükleyip göstermemize olanak tanıyan bir NetworkImageView) ve iki TextViews yer alır.
Ardından, sizin için sağladığımız ProductCardRecyclerViewAdapter göz atın. ProductGridFragment ile aynı pakettedir.
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
}
}
Yukarıdaki bağdaştırıcı sınıfı, ızgaramızın içeriğini yönetir. Her görünümün, kendisine verilen içerikle ne yapması gerektiğini belirlemek için yakında onBindViewHolder() kodunu yazacağız.
Aynı pakette ProductCardViewHolder bölümüne de göz atabilirsiniz. Bu sınıf, kart düzenimizi etkileyen görünümleri depolar. Böylece bunları daha sonra değiştirebiliriz.
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)
Izgaramızı oluşturmak için öncelikle shr_product_grid_fragment.xml içindeki yer tutucuyu MaterialCardView kaldırmamız gerekir. Ardından, kart ızgaramızı temsil eden bileşeni eklemelisiniz. Bu örnekte bir RecyclerView kullanacağız. RecyclerView bileşenini shr_product_grid_fragment.xml öğenizin altına, AppBarLayout XML bileşeninizin altına ekleyin:
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 öğeniz aşağıdaki gibi görünmelidir:
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>
Son olarak, onCreateView() içinde RecyclerView başlatma kodunu setUpToolbar(view) işlevini çağırdıktan sonra ve return ifadesinden önce ProductGridFragment.kt içine ekleyin:
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;
}
Yukarıdaki kod snippet'i, RecyclerView oluşturmak için gerekli başlatma adımlarını içerir. RecyclerView'nın düzen yöneticisini ayarlamanın yanı sıra RecyclerView'nın bağdaştırıcısını başlatma ve ayarlama da buna dahildir.
ProductGridFragment.kt dosyanız artık aşağıdaki gibi görünmelidir:
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)
}
}
Derleme ve çalıştırma:
Kartlar artık kullanılabilir. Henüz hiçbir şey gösterilmiyor. Bu nedenle, biraz ürün verisi ekleyelim.
Resim ve metin ekleme
Her kart için resim, ürün adı ve fiyat ekleyin. ViewHolder soyutlamamız, her kartın görüntülemelerini tutar. ViewHolder içinde üç görünümü aşağıdaki gibi ekleyin.
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)
}
Her ürün görünümü için başlığı, fiyatı ve ürün resmini aşağıdaki gibi ayarlamak üzere ProductCardRecyclerViewAdapter içindeki onBindViewHolder() yöntemini güncelleyin:
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)
}
}
Yukarıdaki kod, RecyclerView adaptörümüze her kartla ne yapması gerektiğini ViewHolder kullanarak söyler.
Burada, her bir ViewHolder öğesindeki metin verileri ayarlanır ve bir URL'den resim almak için ImageRequester çağrılır.TextView ImageRequester, size kolaylık sağlamak için sunduğumuz bir sınıftır ve Volley kitaplığını kullanır (Bu, bu kod laboratuvarının kapsamı dışındaki bir konudur ancak kodu kendi başınıza inceleyebilirsiniz).
Derleme ve çalıştırma:
Ürünlerimiz artık uygulamada gösteriliyor.
6. Özet
Uygulamamızda, kullanıcıyı giriş ekranından ürünlerin görüntülenebildiği ana ekrana yönlendiren temel bir akış var. Yalnızca birkaç satır kodla başlık ve üç düğme içeren bir üst uygulama çubuğu ve uygulamamızın içeriğini sunmak için bir kart ızgarası ekledik. Ana ekranımız artık basit ve işlevsel olup temel bir yapıya ve üzerinde işlem yapılabilecek içeriklere sahip.
Sonraki adımlar
Üst uygulama çubuğu, kart, metin alanı ve düğme ile artık MDC-Android kitaplığındaki dört temel Materyal Tasarım bileşenini kullandık. MDC-Android Kataloğu'nu ziyaret ederek daha da fazla bileşeni keşfedebilirsiniz.
Uygulamamız tamamen işlevsel olsa da henüz belirli bir markayı veya stili yansıtmıyor. MDC-103: Materyal Tasarım Renk, Şekil, Yükseklik ve Tür ile Temalandırma (MDC-103: Renk, Şekil, Yükseklik ve Tür ile Materyal Tasarım Temalandırma) başlıklı dokümanda, bu bileşenlerin stilini canlı ve modern bir markayı ifade edecek şekilde özelleştireceğiz.