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

1. Giriş

logo_components_color_2x_web_96dp.png

Material Bileşenleri (MDC), geliştiricilerin Material Design'u uygulamalarına yardımcı olur. Google'daki bir mühendis ve kullanıcı deneyimi tasarımcısı 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'da kullanılabilir.material.io/develop

MDC-101 kod laboratuvarında, giriş sayfası oluşturmak için iki Material bileşeni (MDC) kullandınız: metin alanları ve düğmeler. Şimdi gezinme, yapı ve veri ekleyerek bu temeli genişletelim.

Oluşturacaklarınız

Bu codelab'de, giyim ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine için bir ana ekran oluşturacaksınız. Şunları içerecektir:

  • Üst uygulama çubuğu
  • Ürünlerin ızgara listesi

249db074eff043f4.png

Bu codelab'deki MDC-Android bileşenleri

  • AppBarLayout
  • MaterialCardView

Gerekenler

  • Android geliştirme hakkında temel düzeyde bilgi
  • Android Studio (yoksa buradan indirin)
  • Android emülatörü veya cihaz (Android Studio üzerinden kullanılabilir)
  • Örnek kod (sonraki adıma bakın)

Android uygulaması geliştirme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Seviye Uzman

2. Geliştirme ortamınızı ayarlama

MDC-101'den devam mı ediyorsunuz?

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

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

Başlangıç Codelab uygulamasını indirin

Başlangıç uygulaması material-components-android-codelabs-102-starter/java dizininde bulunur. Başlamadan önce bu dizine cd eklediğinizden emin olun.

...veya GitHub'dan klonlayın

Bu kod laboratuvarını GitHub'dan kopyalamak 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

  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 araması yapın).
  2. Android Studio'nun projeyi oluşturup senkronize etmesi için biraz bekleyin. Bunu, Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde de görebilirsiniz.
  3. Bu noktada Android Studio, Android SDK'sı veya aşağıda gösterilen gibi derleme araçları eksik olduğu için bazı derleme hataları oluşturabilir. Bunları yüklemek/güncellemek ve projenizi senkronize etmek için Android Studio'daki talimatları uygulayın.

F5H6srsw_5xOPGFpKrm1RwgewatxA_HUbDI1PWoQUAoJcT6DpfBOkAYwq3S-2vUHvweUaFgAmG7BtUKkGouUbhTwXQh53qec8tO5eVecdlo7QIoLc8rNxFEBb8l7RlS-KzBbZOzVhA

Proje bağımlılıkları ekleme

Projenin MDC Android destek kitaplığına bağımlı olması gerekir. İndirdiğiniz örnek kodda bu bağımlılığın zaten listelenmiş olması gerekir ancak emin olmak için aşağıdaki adımları uygulamanız önerilir.

  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 ve projeyi senkronize etmek için build.gradle dosyası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'
}

Başlatıcı uygulamayı çalıştırma

  1. Çalıştır/Oynat düğmesinin solundaki derleme yapılandırmasının app olduğundan emin olun.
  2. Uygulamayı derleyip çalıştırmak için yeşil Çalıştır/Oynat düğmesine basın.
  3. Select Deployment Target (Dağıtım Hedefi Seçin) penceresinde, kullanılabilir cihazlarınız arasında zaten bir Android cihazınız varsa, 8. Adım'a atlayın. 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 ardından Sonraki'yi tıklayın.
  5. Sistem Görüntüsü ekranında, tercihen en yüksek API düzeyinde 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 Sanal Cihaz (AVD) ekranında ayarları olduğu gibi bırakın ve Son'u 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ıyla gerçekleştirildi. MDC-101 kod laboratuvarındaki Shrine giriş sayfasını görürsünüz.

4cb0c218948144b4.png

Artık giriş ekranı iyi göründüğüne göre uygulamaya bazı ürünler ekleyelim.

3. Üst uygulama çubuğu ekleme

Giriş sayfası kapatıldığında "Bitti!" yazan bir ekranla birlikte ana ekran gösterilir. Harika! Ancak kullanıcımız artık herhangi bir işlem yapamıyor veya uygulamada nerede olduğunu bilmiyor. Bu sorunu gidermek için gezinme menüsü ekleyelim.

Materyal Tasarım, yüksek düzeyde kullanılabilirlik sağlayan gezinme kalıpları sunar. En dikkat çeken gezinme bileşenlerinden biri üst uygulama çubuğudur.

Gezinme sağlamak ve kullanıcılara diğer işlemlere hızlı erişim sağlamak için üst uygulama çubuğu ekleyelim.

AppBar widget'ı ekleme

shr_product_grid_fragment.xml ürününde, "Başardınız!" ifadesini içeren <LinearLayout> etiketini silin TextView ve bunu 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 şu şekilde 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. Bizimkine bir menü simgesi ekleyelim.

Gezinme simgesi ekleme

shr_product_grid_fragment.xml hâlâ açıkken Toolbar XML bileşenine (düzeninize yeni eklediğiniz) aşağıdakini ekleyin:

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

shr_product_grid_fragment.xml şu şekilde 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ğuna stil uygulama

Uygulama çubuğunun son tarafına da düğme ekleyebilirsiniz. Android'de bunlara işlem düğmeleri adı verilir.

Üst uygulama çubuğunun stilini belirleyeceğiz ve menüsüne programatik olarak işlem düğmeleri ekleyeceğiz.

Öncelikle, araç çubuğunu ayarlamak için bir yöntem oluşturalım. Yöntem, id kullanarak araç çubuğunun referansını ve getActivity() kullanarak etkinliğin referansını almalıdır. Etkinlik null değilse Toolbar öğesini setSupportActionBar kullanarak ActionBar olarak 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 genişletmek için onCreateOptionsMenu öğesini geçersiz kalım:

ProductGridFragment.java

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

Şimdi, aşağıdaki şekilde onCreateView() yönteminin içeriğine eklediğimiz setUpToolbar yöntemine 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, ProductGridFragment.java için bir onCreate() yöntemi 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 İşlem Çubuğu olarak ayarlar. Geri çağırma onCreateOptionsMenu, etkinliğe hangi menünün kullanılacağını bildirir. Bu durumda, R.menu.shr_toolbar_menu'teki menü öğeleri uygulama çubuğuna yerleştirilir.

Menü dosyası iki öğe içerir: "Ara" ve "Filtre".

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ünecektir:

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ünecektir:

d04e8aa3b27f4754.png

Araç çubuğunda artık sağ tarafta bir gezinme simgesi, bir başlık ve iki işlem simgesi bulunuyor. Araç çubuğu, yüksekliği içerikten farklı bir katmanda olduğunu gösteren ince bir gölge kullanarak da gösterir.

4. Kart ekleyin

Uygulamamızın bir yapısı olduğ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. Kartlarda resim, başlık ve ikincil metin için bir etiket alanı olmalıdır.

shr_product_grid_fragment.xml içinde , aşağıdakini AppBarLayout öğesinin altına 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:

f6184a55ccb5f920.png

Bu önizlemede, kartın ekranın sol kenarından yerleştirildiğini, yuvarlatılmış köşelere ve gölgeye (kartın yüksekliğini ifade eder) sahip olduğunu görebilirsiniz. Alanın tamamına "kapsayıcı" denir. Kapsayıcının kendisi dışındaki tüm öğeler isteğe bağlıdır.

Bir kapsayıcıya başlık metni, küçük resim veya avatar, alt başlık metni, ayırıcılar ve hatta düğmeler ve simgeler ekleyebilirsiniz. Örneğin, az önce oluşturduğumuz kart, kartın alt kısmına hizalı olarak LinearLayout içinde iki TextView (biri başlık, diğeri ikincil metin için) içeriyor.

Kartlar genellikle diğer kartlarla birlikte bir koleksiyonda gösterilir. Bu codelab'in bir sonraki bölümünde, uygulamaları tablo içinde bir 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. Izgara içindeki kartlar aynı düzlemde yer alır. Diğer bir deyişle, alınıp sürüklenmedikleri sürece, durmadıklarında aynı yükseklikleri paylaşırlar (ancak bu codelab'de bu konuya değinmeyeceğiz).

Kart ızgarasına öğe ekleme

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 bir URL'den resim eklememize olanak tanıyan bir NetworkImageView) ve iki TextViews yer alır.

Ardından, sizin için sağladığımız ProductCardRecyclerViewAdapter'e göz atın. ProductGridFragment ile aynı pakettedir.

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 bir görünümün belirli bir içerikle ne yapması gerektiğini belirlemek için yakında onBindViewHolder() kodunu yazacağız.

Aynı pakette, ProductCardViewHolder ürününe de göz atabilirsiniz. Bu sınıfta, kart düzenimizi etkileyen görünümler saklanır. 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
   }
}

Gribimizi ayarlamak için önce MaterialCardView yer tutucusunu shr_product_grid_fragment.xml'ten kaldıracağız. Ardından, kart ızgaramızı temsil eden bileşeni eklemeniz gerekir. 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 şu şekilde 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) çağrısından sonra ve return ifadesinden önce ProductGridFragment.java içine RecyclerView başlatma kodunu 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, bir RecyclerView oluşturmak için gerekli başlatma adımlarını içerir. Buna RecyclerView'ün düzen yöneticisinin ayarlanması ve RecyclerView'ün adaptörünün başlatılması ve ayarlanması dahildir.

ProductGridFragment.java dosyanız artık aşağıdaki gibi görünecektir:

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.

f9aeab846fc3bb4c.png

Kartlar elinize ulaştı. Bu ürünler henüz hiçbir şey göstermiyor. Bu nedenle birkaç ürün verisi 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 içinde üç görünümü aşağıdaki gibi 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 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 yapacağını söyler.

Burada, ViewHolder'nin TextView'lerinin her birinde metin verilerini ayarlar ve bir URL'den resim almak için 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, bu kod laboratuvarının kapsamı dışında bir konudur ancak kodu kendiniz keşfedebilirsiniz).

Derleme ve çalıştırma:

249db074eff043f4.png

Ürünlerimiz artık uygulamada gösteriliyor.

6. Özet

Uygulamamızda, kullanıcıyı giriş ekranından ürünlerin görüntülenebileceği bir ana ekrana yönlendiren temel bir akış vardır. Birkaç satır kodla, bir 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 bir yapıya, uygulanabilir içeriklere sahip.

Sonraki adımlar

Üst uygulama çubuğu, kart, metin alanı ve düğmeyle birlikte MDC-Android kitaplığındaki dört temel Material Design bileşenini de kullandık. MDC-Android Kataloğu MDC Android'deki bileşenlerinde daha da fazla bileşeni keşfedebilirsiniz.

Uygulamamız tamamen işlevsel olsa da henüz belirli bir markayı ifade etmiyor. MDC-103: Renk, Şekil, Yükseklik ve Yazı Tipi ile Materyal Tasarım Teması'nda, bu bileşenlerin stilini canlı ve modern bir markayı ifade edecek şekilde özelleştireceğiz.

Bu codelab'i makul bir zaman 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 Materyal Bileşenleri kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Nötr Katılmıyorum Kesinlikle katılmıyorum