Malzeme Bileşenleri (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'da bir mühendis ve kullanıcı deneyimi tasarımcıları ekibi tarafından oluşturulan MDC, onlarca güzel ve işlevsel kullanıcı arayüzü bileşenine sahiptir ve Android, iOS, web ve Flutter için kullanılabilir. material.io/develop |
codelab MDC-101'de giriş sayfası oluşturmak için iki Materyal Bileşeni (MDC) kullandınız: Metin alanları ve düğmeler. Şimdi de gezinme, yapı ve veri ekleyerek bu temeli genişletelim.
Geliştireceğiniz uygulama
Bu codelab'de, kıyafet ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulama için bir ana ekran oluşturacaksınız. Şunları içerir:
- En iyi uygulama çubuğu
- Ürünlerin ızgara listesi
MDC-Android bu codelab'deki bileşenler
- UygulamaBarDüzeni
- MalzemeKartı Görünümü
Gerekenler
- Android geliştirmeyle ilgili temel bilgiler
- Android Studio(henüz yoksa buradan indirin)
- Android emülatörü veya cihaz (Android Studio üzerinden kullanılabilir)
- Örnek kod (sonraki adıma bakın)
Android uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?
MDC-101'den devam ediyor musunuz?
MDC-101'i tamamladıysanız kodunuz bu codelab için hazır olmalıdır. 3. adıma geçebilirsiniz: En iyi uygulama çubuğu ekleme.
Sıfırdan mı başlıyorsunuz?
Starter codelab uygulamasını indirme
Başlangıç uygulaması, material-components-android-codelabs-102-starter/java dizininde bulunur. Başlamadan önce bu dizine cd girdiğinizden emin olun.
...veya GitHub'dan klonlayı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
Android Studio'da başlangıç kodunu yükleme
- Kurulum sihirbazı tamamlandığında ve Android Studio'ya hoş geldiniz penceresi gösterildiğinde Mevcut bir Android Studio projesini aç'ı tıklayın. Örnek kodu yüklediğiniz dizine gidin ve Heykel projesini açmak için java -> Temple'ı (veya bilgisayar üzerinde arama yapın) seçin.
- Android Studio'nun projeyi oluşturması ve senkronize etmesi için biraz bekleyin. Bu işlem, Android Studio penceresinin alt kısmındaki etkinlik göstergeleri tarafından gösterilmektedir.
- Bu aşamada Android Studio, aşağıda gösterildiği gibi Android SDK'sı veya derleme araçları eksik olduğu için bazı derleme hatalarını ortaya çıkarabilir. Bu uygulamaları 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 kodun bu bağımlılık zaten listelenmesi gerekir ancak emin olmak için aşağıdaki adımları uygulamanız önerilir.
appmodülübuild.gradledosyasına gidin vedependenciesbloğunun MDC Android'de bir 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 ve projeyi senkronize etmek için
build.gradledosyasını düzenleyin.
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'
}
Starter uygulamasını çalıştırma
|
İşlem başarılı! MDC-101 codelab'den Tapınak girişi sayfasını göreceksiniz.
Giriş ekranı iyi göründüğüne göre şimdi uygulamayı bazı ürünlerle dolduralım.
Giriş ekranı kapatıldığında ana ekran, "Bunu yaptın!" yazan bir ekranla gösterilir. Harika! Ancak şimdi kullanıcımızın herhangi bir işlem yapması veya uygulamada nerede olduğuna dair bir algısı yok. Bu konuda yardımcı olmak için gezinme ekleyelim.
Materyal Tasarım, yüksek derecede kullanılabilirlik sağlayan gezinme kalıpları sunar. En önemli gezinme bileşenlerinden biri üst sıradaki uygulama çubuğudur.
Gezinme sağlamak ve kullanıcıların diğer işlemlere hızlı bir şekilde erişmesini sağlamak için üst uygulama çubuğu ekleyelim.
AppBar widget'ı ekleme
shr_product_grid_fragment.xml içinde "Şunu yaptın!" ifadesini içeren <LinearLayout> etiketini silin. TextView öğesini aşağıdakiyle 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 alanınız 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:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>Çoğu uygulama çubuğunda başlığın yanında bir düğme bulunur. Hesabımıza menü simgesi ekleyelim.
Gezinme simgesi ekleme
shr_product_grid_fragment.xml ürünündeyken aşağıdakileri Toolbar düzeninize ekleyin (düzeninize yeni eklediğiniz):
shr_product_grid_fragment.xml
app:navigationIcon="@drawable/shr_menu"shr_product_grid_fragment.xml alanınız 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ğunun stilini belirleme
Uygulama çubuğunun sonuna da düğmeler ekleyebilirsiniz. Android'de bu düğmelere işlem düğmeleri denir.
Üst uygulama çubuğunun stilini biçimlendirip menüsüne menü simgesi için işlem düğmeleri ekleriz.
Öncelikle araç çubuğunu kurmak için bir yöntem oluşturalım. Yöntem, id etiketini kullanarak araç çubuğuna ilişkin bir referans almalı ve ayrıca, getActivity()'ı kullanarak etkinliğe atıfta bulunmalıdır. Etkinlik boş değilse Toolbar öğesini, setSupportActionBar kullanarak ActionBar olarak kullanılacak şekilde ayarlayın:
ProductGRFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}Ardından, az önce eklediğimiz setUpToolbar yönteminin hemen altında, shr_toolbar_menu.xml içeriğini araç çubuğuna eklemek için onCreateOptionsMenu kodunu geçersiz kılalım:
ProductGRFragment.java
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}Şimdi, onCreateView() yönteminin içeriğine eklediğimiz setUpToolbar yöntemine aşağıdaki bilgilerle bir çağrı ekleyin:
ProductGRFragment.java
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}Son olarak, ProductGridFragment.java öğesine bir onCreate() yöntemi ekleyin. Yöntem gövdesinde setHasOptionMenu parametresini true olarak ayarlayın.
Yöntem şu şekilde görünmelidir:
ProductGRFragment.java
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}Yukarıdaki kod, XML düzenimizdeki uygulama çubuğunu bu etkinliğin İşlem Çubuğu olacak şekilde ayarlar. Geri çağırma onCreateOptionsMenu, etkinliğe menümüz olarak ne kullanılacağını bildirir. Bu durumda, R.menu.shr_toolbar_menu menüsündeki menü öğeleri uygulama çubuğuna yerleştirilir.
Menü dosyası iki öğe içerir: "Arama ve Filtre.
shr_Araç_Menü.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.java dosyanız aşağıdaki gibi görünecektir:
ProductGRFragment.java
package com.google.codelabs.mdc.java.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 android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}Üretin ve çalıştırın. Ana ekranınız aşağıdaki gibi görünmelidir:
Artık araç çubuğunda bir gezinme simgesi, başlık ve sağ tarafta iki işlem simgesi bulunmaktadır. Araç çubuğu, yükseltiyi gölgeden farklı bir katmanda gösteren küçük bir gölge kullanarak da gösterir.
Uygulamamız artık bir yapıya sahip olduğuna göre içeriği kartlara yerleştirerek düzenleyelim.
Kart ekleme
En üstteki uygulama çubuğunun altına bir kart ekleyerek başlayalım. Kartta bir resim için bir bölge, bir başlık ve ikincil metin için bir etiket bulunmalıdır.
shr_product_grid_fragment.xml içinde , AppBarLayout altında 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>Oluşturma ve çalıştırma:
Bu önizlemede, kartın ekranın sol kenarından yerleştirildiğini ve yuvarlatılmış köşelere ve bir gölgeye (kartın yüksekliğini ifade eden) sahip olduğunu görebilirsiniz. Bu alanın tamamına "kapsayıcı" denir. Kapsayıcının yanı sıra içindeki tüm öğeler de isteğe bağlıdır.
Bir 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, az önce oluşturduğumuz kartta, kartın alt kısmına uyumlu LinearLayout şeklinde iki TextView var (biri başlık, diğeri ikincil metin için).
Kartlar genellikle başka kartlarla bir koleksiyonda gösterilir. Bu codelab'in bir sonraki bölümünde, ayarları bir ızgarada koleksiyon olarak düzenleyeceğiz.
Bir ekranda birden çok kart varsa, bunlar bir veya daha fazla koleksiyonda gruplanır. Izgara içindeki kartlar ortak plana sahiptir. Diğer bir deyişle, birbirleriyle aynı dinlenme rakımına sahiptirler (toplanmadıkları veya sürüklenmedikleri sürece, ancak bu codelab'de ele alınmayacaktır).
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 resim içeren bir kart (URL'den resimler eklememize olanak tanıyan bir NetworkImageView) ve iki TextViews bulunur.
Ardından, sizin için sunduğumuz ProductCardRecyclerViewAdapter cihazına göz atın. ProductGridFragment ile aynı pakette.
ProductCardRecyclerViewAdapter.java
package com.google.codelabs.mdc.java.shrine;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.google.codelabs.mdc.java.shrine.network.ImageRequester;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
import java.util.List;
/**
* Adapter used to show a simple grid of products.
*/
public class ProductCardRecyclerViewAdapter extends RecyclerView.Adapter<ProductCardViewHolder> {
private List<ProductEntry> productList;
private ImageRequester imageRequester;
ProductCardRecyclerViewAdapter(List<ProductEntry> productList) {
this.productList = productList;
imageRequester = ImageRequester.getInstance();
}
@NonNull
@Override
public ProductCardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.shr_product_card, parent, false);
return new ProductCardViewHolder(layoutView);
}
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
// TODO: Put ViewHolder binding code here in MDC-102
}
@Override
public int getItemCount() {
return productList.size();
}
}Yukarıdaki adaptör sınıfı, ızgaramızın içeriğini yönetir. Her bir görüntülemenin verilen içerikle ne yapması gerektiğini belirlemek için kısa süre içinde onBindViewHolder() kodunu yazacağız.
Ayrıca, aynı pakete ProductCardViewHolder göz atabilirsiniz. Bu sınıfta, kart düzenimizi etkileyen görünümler depolanır. Böylece bu görünümler daha sonra değiştirilebilir.
ProductCardViewHolder.java
package com.google.codelabs.mdc.java.shrine;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
// TODO: Find and store views from itemView
}
}Izgaramızı kurmak için önce shr_product_grid_fragment.xml yer tutucusunu MaterialCardView kaldırmamız gerekiyor. Ardından, kart ızgaramızı temsil eden bileşeni eklemeniz gerekir. Bu durumda, shr_product_grid_fragment.xml cihazınıza AppBarLayout XML bileşeninizin altına bir RecyclerView bileşeni 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 alanınız 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() öğesini setUpToolbar(view) numarasını çağırdıktan sonra ve return ifadesinden önce ProductGridFragment.java koduna ekleyin:
ProductGRFragment.java
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
...
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}Yukarıdaki kod snippet'i, RecyclerView kurulumu için gereken ilk kullanıma hazırlama adımlarını içerir. Bu, RecyclerView's düzeni yöneticisinin ayarlanmasını, RecyclerView' adaptörünün başlatılmasını ve ayarlanmasını da içerir.
ProductGridFragment.java dosyanız artık şu şekilde görünmelidir:
ProductGRFragment.java
package com.google.codelabs.mdc.java.shrine;
import android.os.Bundle;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}Üretin ve çalıştırın.
Kartlar kullanıma sunuldu. Henüz bir şey göstermedikleri için bazı ürün verileri ekleyelim.
Resim ve metin ekleme
Her kart için bir resim, ürün adı ve fiyat ekleyin. ViewHolder soyutlamamız her kartın görüntüleme sayısını içerir. ViewHolder görünümünde, üç görünümü şu şekilde ekleyin:
ProductCardViewHolder.java
package com.google.codelabs.mdc.java.shrine;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;
import com.android.volley.toolbox.NetworkImageView;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public NetworkImageView productImage;
public TextView productTitle;
public TextView productPrice;
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
productImage = itemView.findViewById(R.id.product_image);
productTitle = itemView.findViewById(R.id.product_title);
productPrice = itemView.findViewById(R.id.product_price);
}
}RecyclerView' adaptörümüzde, ViewHolder, görünümünde, her görünümdeki bilgileri ayarlamak için onBindViewHolder() yöntemini güncelleyin:
ProductCardRecyclerViewAdapter.java
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
if (productList != null && position < productList.size()) {
ProductEntry product = productList.get(position);
holder.productTitle.setText(product.title);
holder.productPrice.setText(product.price);
imageRequester.setImageFromUrl(holder.productImage, product.url);
}
}Yukarıdaki kod, RecyclerView' adaptörümüze ViewHolder kullanarak her kartla ne yapılacağını bildirir.
Burada her bir ViewHolder üzerindeki TextView için metin verilerini ayarlar ve URL'den resim almak için bir ImageRequester çağırır. ImageRequester, size kolaylık sağlamak için sağladığımız bir sınıftır ve Volley kitaplığını kullanır (bu codelab'in kapsamı dışında bir konudur ancak kodu kendiniz de keşfedebilirsiniz).
Oluşturma ve çalıştırma:
Ürünlerimiz artık uygulamada gösteriliyor.
Uygulamamız, kullanıcıyı giriş ekranından bir ana ekrana götüren ve ürünlerin görüntülenebileceği bir ana akışa sahiptir. Yalnızca birkaç satır kodla üst başlığın, üç düğmenin ve üstünün bulunduğu bir uygulama çubuğu ekledik. Uygulama içeriğimizi göstermek için de bir kart ızgarası ekledik. Artık ana ekranımız basit ve işlevsel, temel bir yapıya ve uygulanabilir içeriğe sahip.
Sonraki adımlar
Üstteki uygulama çubuğu, kart, metin alanı ve düğmeyle MDC-Android kitaplığındaki dört Materyal Tasarım bileşenini kullandık. MDC-Android Catalog MDC Android bileşenlerindeki diğer bileşenleri keşfedebilirsiniz.
Uygulamamız son derece işlevsel olsa da henüz herhangi bir markayı ifade etmemektedir. MDC-103: Renk, Şekil, Tırmanma ve Tür ile Materyal Tasarım Temalı uygulamasında canlı ve modern bir marka göstermek için bu bileşenlerin stilini özelleştireceğiz.