MDC-102 Android: Malzeme Yapısı ve Düzen (Java)

logo_components_color_2x_web_96dp.png

Material Bileşenleri (MDC), geliştiricilerin Material Design'ı 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 ve Android, iOS, web ve Flutter için kullanılabilir.

material.io/develop

MDC-101 adlı codelab'de, giriş sayfası oluşturmak için iki Material Components (MDC) kullandınız: 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ünlerin ızgara listesi

Bu codelab'deki MDC-Android bileşenleri

  • AppBarLayout
  • MaterialCardView

Gerekenler

  • Android geliştirme hakkında temel bilgiler
  • 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?

Başlangıç Orta İleri

MDC-101'den devam mı ediyorsunuz?

MDC-101'i tamamladıysanız kodunuz bu codelab'e hazır olmalıdır. 3. adıma (Üst uygulama çubuğu ekleme) geçebilirsiniz.

Sıfırdan mı başlıyorsunuz?

Başlangıç Codelab uygulamasını indirin

Başlangıç uygulamasını indirin

Başlangıç uygulaması, material-components-android-codelabs-102-starter/java 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

  1. 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 Shrine projesini açmak için java -> shrine'ı seçin(veya bilgisayarınızda shrine'ı arayın).
  2. 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.
  3. Bu noktada, Android Studio, Android SDK veya derleme araçları eksik olduğundan (ör. 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.

  1. app modülünün build.gradle dosyasına gidin ve dependencies bloğunun MDC Android'e bağımlılık içerdiğinden emin olun:
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (İsteğe bağlı) Gerekirse aşağıdaki bağımlılıkları eklemek için build.gradle dosyası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

  1. Çalıştır / Oynat düğmesinin solundaki derleme yapılandırmasının app olduğundan emin olun.
  2. Uygulamayı oluşturup çalıştırmak için yeşil Çalıştır / Oynat düğmesine basın.
  3. Select Deployment Target (Dağıtım Hedefini Seç) penceresinde, kullanılabilir cihazlarınızda listelenen bir Android cihazınız varsa 8. Adım'a geçin. Aksi takdirde Yeni Sanal Cihaz Oluştur'u tıklayın.
  4. Donanım Seçin ekranında Pixel 2 gibi bir telefon cihazı seçin ve Sonraki'yi tıklayın.
  5. Sistem Görüntüsü ekranında, tercihen en yüksek API düzeyine sahip bir son Android sürümünü seçin. Yüklü değilse gösterilen İndir bağlantısını tıklayın ve indirme işlemini tamamlayın.
  6. İleri'yi tıklayın.
  7. Android Virtual Device (AVD) ekranında ayarları olduğu gibi bırakın ve Finish'i (Sonlandır) tıklayın.
  8. Dağıtım hedefi iletişim kutusundan bir Android cihaz seçin.
  9. Ok'i (Tamam) tıklayın.
  10. Android Studio, uygulamayı oluşturur, dağıtır ve hedef cihazda otomatik olarak açar.

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.

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 bilmiyor. Bu konuda yardımcı olmak için gezinme özelliği ekleyelim.

Materyal Tasarım, yüksek düzeyde kullanılabilirlik sağlayan gezinme kalıpları sunar. En dikkat çekici gezinme bileşenlerinden 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> etiketini 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 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>

Birçok uygulama çubuğunda başlığın yanında bir düğme bulunur. Biz de menü simgesi ekleyelim.

Gezinme simgesi ekleme

Hâlâ shr_product_grid_fragment.xml bölümündeyken Toolbar XML bileşenine (düzeninize yeni eklediğiniz) 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 adı verilir.

Üst uygulama çubuğunu stilize edip menüsüne programatik olarak işlem düğmeleri ekleyeceğiz.

İlk olarak, araç çubuğunu ayarlamak için bir yöntem oluşturalım. Yöntem, id kullanarak araç çubuğuna ve getActivity() kullanarak etkinliğe referans almalıdır. Etkinlik boş değilse Toolbar öğesini setSupportActionBar kullanarak ActionBar olarak kullanılacak şekilde ayarlayın:

ProductGridFragment.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 yöntemini geçersiz kılalım:

ProductGridFragment.java

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
   menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
   super.onCreateOptionsMenu(menu, menuInflater);
}

Şimdi setUpToolbar yöntemine, onCreateView() yönteminin içeriğine eklediğimiz yönteme aşağıdaki değerlerle bir çağrı ekleyin:

ProductGridFragment.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, onCreate() yöntemini ProductGridFragment.java'e ekleyin. Yöntem gövdesinde, setHasOptionMenu parametresini true olarak ayarlayın.

Yöntem şu şekilde görünmelidir:

ProductGridFragment.java

@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setHasOptionsMenu(true);
}

Yukarıdaki kod, XML düzenimizdeki uygulama çubuğunu bu etkinlik için işlem çubuğu olarak ayarlar. Geri çağırma onCreateOptionsMenu, etkinliğe menümüz 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.java dosyanız aşağıdaki gibi görünmelidir:

ProductGridFragment.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);
   }

}

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ğu, içeriğin farklı bir katmanında olduğunu göstermek için yüksekliği ince bir gölgeyle de gösterir.

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.

shr_product_grid_fragment.xml alanında , AppBarLayout altı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 ekranın sol kenarından girintili olduğunu, yuvarlak köşelere ve gölgeye (kartın yüksekliğini ifade eder) sahip olduğunu görebilirsiniz. Alanların tamamına "kapsayıcı" adı verilir. Kapsayıcının kendisi 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.

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, resim içeren bir kart (burada NetworkImageView, URL'den resim eklememize olanak tanır) ve iki TextViews bulunur.

Ardından, sizin için sağladığımız ProductCardRecyclerViewAdapter göz atın. ProductGridFragment ile aynı pakette yer alıyor.

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 bağdaştırıcı sınıfı, ızgaramızın içeriğini yönetir. Her görünümün 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.

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ı oluşturmak için önce shr_product_grid_fragment.xml içindeki yer tutucu MaterialCardView öğesini kaldırmamız gerekir. Ardından, kart ızgaramızı temsil eden bileşeni eklemelisiniz. Bu durumda, shr_product_grid_fragment.xml öğenize 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 öğ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 setUpToolbar(view) işlevini çağırdıktan sonra ve return ifadesinden önce RecyclerView başlatma kodunu ProductGridFragment.java içine ekleyin:

ProductGridFragment.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 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.java dosyanız artık aşağıdaki gibi görünmelidir:

ProductGridFragment.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);
   }

}

Derleyin ve çalıştırın.

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ünümlerini tutar. ViewHolder içinde üç görünümü aşağıdaki ş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 bağdaştırıcımızda, ViewHolder, içinde onBindViewHolder() yöntemini her görünümdeki bilgileri ayarlayacak şekilde 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, ViewHolder kullanarak RecyclerView bağdaştırıcımıza her kartla ne yapması gerektiğini söyler.

Burada, her bir ViewHolder'daki TextView'lere metin verileri ayarlanır ve bir URL'den resim almak için ImageRequester çağrılır. 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.

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 harekete geçirici mesaj içeren içeriğe sahip.

Sonraki adımlar

Üst uygulama çubuğu, kart, metin alanı ve düğme ile artık MDC-Android kitaplığındaki dört temel Material Design bileşenini kullandık. MDC-Android Kataloğu'ndaki MDC Android bileşenleri bölümünde daha fazla bileşeni inceleyebilirsiniz.

Uygulamamız tamamen işlevsel olsa da henüz belirli bir markayı temsil etmiyor. MDC-103: Material Design Theming with Color, Shape, Elevation and Type (MDC-103: Renk, Şekil, Yükseklik ve Tür ile Material Design Temalandırma) başlıklı dokümanda, bu bileşenlerin stilini canlı ve modern bir markayı ifade edecek şekilde özelleştireceğiz.

Bu codelab'i makul bir süre ve çabayla tamamlayabildim

Kesinlikle katılıyorum Katılıyorum Ne katılıyorum ne katılmıyorum Katılmıyorum Kesinlikle katılmıyorum

Gelecekte Material Components'ı kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Ne katılıyorum ne katılmıyorum Katılmıyorum Kesinlikle katılmıyorum