Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

本頁面由 Cloud Translation API 翻譯而成。

MDC-102 Android：材料結構和版面配置 (Java)

質感元件 (MDC) 可協助開發人員實作質感設計。MDC 由 Google 的工程師和使用者體驗設計師團隊組成，提供數十種美觀且功能完善的 UI 元件，適用於 Android、iOS、網路和 Flutter。

material.io/develop

在程式碼研究室的 MDC-101 中，您使用兩個 Material Components (MDC) 建立登入頁面：文字欄位和按鈕。現在，藉由新增導覽、結構和資料，讓此基礎為基礎。

建構項目

在這個程式碼研究室中，您將為一款名為「小沙」的應用程式建立主畫面，藉此銷售服飾和居家用品。內容如下：

熱門應用程式列
產品的格狀清單

MDC-Android 本程式碼研究室中的元件

應用程式列版面配置
MaterialCardView

軟硬體需求

Android 開發基本知識
Android Studio(如果尚未下載，請按這裡下載)
Android 模擬器或裝置 (可透過 Android Studio 取得)
範例程式碼 (請查看下一步)

您對於建構 Android 應用程式的體驗程度有多高？

初級

中級

專業

持續使用 MDC-101 嗎？

如果您已完成 MDC-101 的相關步驟，您的程式碼應該可以用於這個程式碼研究室。您可以直接跳到步驟 3：新增熱門應用程式列。

從頭開始？

下載新創公司程式碼研究室應用程式

下載入門應用程式

入門應用程式位於 material-components-android-codelabs-102-starter/java 目錄中。開始之前，請務必先cd使用該目錄。

...或從 GitHub 複製

如要從 GitHub 複製這個程式碼研究室，請執行下列指令：

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 102-starter

在 Android Studio 中載入範例程式碼

設定精靈執行完畢後，系統會顯示「歡迎使用 Android Studio」視窗，請按一下 [開啟現有的 Android Studio 專案]。前往您安裝程式碼範例的目錄，然後選取 java -> Shrine (或搜尋您的電腦以搜尋 shrine)，即可開啟 Shrine 專案。
請等待 Android Studio 建立及同步處理專案，如 Android Studio 視窗底部的活動指標所示。
目前，Android Studio 可能會引發部分建構錯誤，原因是您缺少 Android SDK 或建構工具，例如下列工具。按照 Android Studio 中的操作說明安裝/更新這些設定，並且同步處理您的專案。

新增專案依附元件

專案必須依附於 MDC Android 支援資料庫。您下載的程式碼範例應該已列出這項依附元件，不過建議您按照下列步驟進行。

瀏覽至 app 模組的 build.gradle 檔案，並確定 dependencies 區塊包含對 MDC Android 的相依關係：

api 'com.google.android.material:material:1.1.0-alpha06'

(選用) 視需要編輯 build.gradle 檔案，新增以下依附元件並同步處理專案。

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'
}

執行啟動應用程式

確保 [Run / Play] (執行 / 播放) 按鈕左邊的建構設定為 app。
按下綠色的 [執行 / 播放] 按鈕，即可建構並執行應用程式。
在「選取部署目標」視窗中，如果您的可用裝置已列出 Android 裝置，請跳到步驟 8。否則，請按一下 [Create New Virtual Device]。
在「選取硬體」畫面中，選取手機 (例如 Pixel 2)，然後點選 [下一步]。
在「System Image」(系統映像檔) 畫面中，選取最新的 Android 版本 (最好是最高的 API 等級)。如果尚未安裝，請點選顯示的 [下載] 連結並完成下載。
按一下「Next」(下一步)。
在「Android Virtual Device (AVD)」(Android 虛擬裝置 (AVD)) 畫面中，保留原設定，然後按一下 [完成]。
從部署目標對話方塊中選取 Android 裝置。
按一下 [OK] (確定)。
Android Studio 會建置及部署應用程式，並在目標裝置上自動開啟該應用程式。

完成了，你應該會看到 MDC-101 程式碼研究室的神社登入頁面。

現在登入畫面看起來很不錯，讓我們在應用程式中填入一些產品。

使用者關閉登入頁面時，主螢幕會顯示「您已完成！」訊息。好極了！但現在，我們的使用者完全無法採取任何動作，也無從瞭解使用者在應用程式中的所在位置。為了提供協助，我們先加入導覽。

質感設計提供了導覽模式，可確保高可用性。最常用的導覽元件之一是頂端應用程式列。

為了提供導覽功能，並讓使用者快速存取其他動作，我們來新增熱門的應用程式列。

在 shr_product_grid_fragment.xml 中，刪除含有「你做到了！」的 <LinearLayout> 標記。TextView，並替換為下列值：

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 應如下所示：

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>

許多應用程式列旁邊會顯示一個按鈕。我們來新增選單圖示。

仍在 shr_product_grid_fragment.xml 中，將以下內容新增至 Toolbar XML 元件 (您剛剛加入版面配置)：

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

您的 shr_product_grid_fragment.xml 應如下所示：

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>

新增動作按鈕及設定頂端應用程式列樣式

您也可以在應用程式列的左側新增按鈕。在 Android 中，這些稱為「動作按鈕」。

我們為應用程式頂端欄的樣式設計，並且透過程式化方式在動作選單中新增動作按鈕。

首先，讓我們來建立設定工具列的方法。這種方法應使用其 id 取得工具列的參照，並使用 getActivity() 取得活動參照。如果活動並非空值，請使用 setSupportActionBar 將 Toolbar 設為 ActionBar：

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

接下來，在我們剛添加的 setUpToolbar 方法的正下方，我們覆寫 onCreateOptionsMenu 將 shr_toolbar_menu.xml 的內容充電到工具列中：

ProductGridFragment.java

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

請針對 onCreateView() 方法的內容加入 setUpToolbar 方法，加入以下內容：

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;
}

最後，將 onCreate() 方法新增至 ProductGridFragment.java。在方法主體中，將 setHasOptionMenu 的參數設為 true。

方法如下所示：

ProductGridFragment.java

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

上述程式碼會將 XML 版面配置中的應用程式列設為此活動的動作列。回呼 onCreateOptionsMenu 會告知活動要用於選單。這樣一來，系統就會將 R.menu.shr_toolbar_menu 的選單項目加進應用程式列。

選單檔案中會列出兩個項目：「搜尋」和「篩選器」。

shr_工具列_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>

完成變更後，您的 ProductGridFragment.java 檔案應如下所示：

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

}

建構並執行。主螢幕看起來會像這樣：

現在，工具列的右側有一個導覽圖示、標題和兩個動作圖示。工具列還會顯示細微的陰影，顯示陰影與細微的陰影。

現在，我們的應用程式具有某些結構，現在讓我們將內容放在資訊卡中，以便整理內容。

新增卡片

首先，請在頂端應用程式列下方新增一張卡片。資訊卡必須包含圖片區域、標題和次要文字標籤。

在 shr_product_grid_fragment.xml 中，將以下內容加到 AppBarLayout 之下：

shr_product_grid_fragment.xml

<com.google.android.material.card.MaterialCardView
   android:layout_width="160dp"
   android:layout_height="180dp"
   android:layout_marginBottom="16dp"
   android:layout_marginLeft="16dp"
   android:layout_marginRight="16dp"
   android:layout_marginTop="70dp"
   app:cardBackgroundColor="?attr/colorPrimaryDark"
   app:cardCornerRadius="4dp">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
       android:background="#FFFFFF"
       android:orientation="vertical"
       android:padding="8dp">

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_title"
           android:textAppearance="?attr/textAppearanceHeadline6" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_description"
           android:textAppearance="?attr/textAppearanceBody2" />
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

建構並執行：

在這個預覽畫面中，您可以看到將卡片從螢幕左側邊緣插入，並加上圓角和陰影 (表示卡片的高度)。整個區域稱為「container.」除了容器本身以外，其中所有元素並非必要項目。

您可以在容器中加入下列元素：標題文字、縮圖或顯示圖片、子標題文字、分隔線，甚至是按鈕和圖示。例如，我們剛建立的卡片在 LinearLayout 中有兩個包含英文標題的兩個 TextView，分別用於標題和次要文字。

資訊卡通常會與其他資訊卡一起顯示。在這個程式碼研究室的下一個部分，我們會以格狀格式排列這些元素。

如果畫面上出現多張資訊卡，系統會將這些卡片歸入多個集合，網格中的卡片是共通點，這表示它們會共用相同的靜息高度 (除非拿到或拖動，但是不會在這個程式碼研究室中說明)。

設定資訊卡的格線

請查看我們提供給您的 shr_product_card.xml 檔案：

shr_product_card.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/white"
   app:cardElevation="2dp"
   app:cardPreventCornerOverlap="true">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">

       <com.android.volley.toolbox.NetworkImageView
           android:id="@+id/product_image"
           android:layout_width="match_parent"
           android:layout_height="@dimen/shr_product_card_image_height"
           android:background="?attr/colorPrimaryDark"
           android:scaleType="centerCrop" />

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           android:padding="16dp">

           <TextView
               android:id="@+id/product_title"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_title"
               android:textAppearance="?attr/textAppearanceHeadline6" />

           <TextView
               android:id="@+id/product_price"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_description"
               android:textAppearance="?attr/textAppearanceBody2" />
       </LinearLayout>
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

這張資訊卡版面配置包含一張含有圖片的資訊卡 (這裡的 NetworkImageView 可讓我們加入網址中的圖片)，以及兩個 TextViews。

接著看看我們提供給你的ProductCardRecyclerViewAdapter。與 ProductGridFragment 位於同一個套件中。

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();
   }
}

上方的轉接程式類別會管理我們網格的內容。為了判斷每次瀏覽對其指定內容應採取的行動，我們很快就會為onBindViewHolder()撰寫程式碼。

您也可以在同一個套件中查看 ProductCardViewHolder。這個類別會儲存影響資訊卡版面配置的視圖，以便日後修改。

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
   }
}

如要設定網格，請先從 shr_product_grid_fragment.xml 中移除預留位置 MaterialCardView。接下來，請加入代表卡片格線的元件。在這種情況下，請在您的 AppBarLayout XML 元件下方，將 RecyclerView 元件新增至您的 shr_product_grid_fragment.xml：

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 應如下所示：

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>

最後，在 onCreateView() 中，在呼叫 setUpToolbar(view) 和 return 陳述式之前，將 RecyclerView 初始化程式碼新增至 ProductGridFragment.java：

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;
}

上述程式碼片段包含設定 RecyclerView 所需的初始化步驟。包括設定RecyclerView的版面配置管理工具，以及初始化和設定RecyclerView轉接程式。

您的 ProductGridFragment.java 檔案現在應如下所示：

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

}

建構並執行。

相關資訊卡現在已上線！目前尚未顯示任何內容，因此建議您加入一些產品資料。

新增圖片和文字

為每張資訊卡新增圖片、產品名稱和價格。我們的 ViewHolder 抽象圖包含每張資訊卡的瀏覽次數。在「ViewHolder」中，新增以下三種資料檢視：

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的轉接器，在 ViewHolder, 中更新 onBindViewHolder() 方法，設定每個資料檢視的資訊：

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

上述程式碼會說明 RecyclerView 的轉接程式如何使用 ViewHolder。

在這裡，每個 ViewHolder 都會設定文字資料，並呼叫 ImageRequester 從網址取得圖片。ImageRequester 是我們在設計上為您提供的課程，並方便您使用 Volley 程式庫 (這個主題不在此程式碼研究室以外，但歡迎您自行探索程式碼)。

建構並執行：

我們的產品現已顯示在應用程式中！

應用程式的基本流程可讓使用者從登入畫面前往主畫面，藉此查看產品。只要短短幾行程式碼，我們新增了應用程式標題列和標題按鈕、三張按鈕和一張資訊卡，呈現應用程式的內容。現在，我們的主畫面操作簡單，功能相當強大，提供基本架構和實際可行的內容。

後續步驟

我們導入了應用程式列、資訊卡、文字欄位和按鈕等應用程式，並使用了 MDC-Android 程式庫中的四個核心 Material Design 元件！您可以在 MDC Android 中探索 MDC Android 元件，瀏覽更多元件。

雖然應用程式可正常運作，但我們的應用程式尚未表達出任何特定品牌的需求。在 MDC-103：採用色彩、形狀、海拔高度和類型的質感設計主題中，我們將自訂這些元件的樣式，以展現一個活力十足的現代品牌。

我以合理的時間和心力完成了這個程式碼研究室

非常同意

同意

普通

不同意

非常不同意

我要在日後繼續使用 Material Components

非常同意

同意

普通

不同意

非常不同意

MDC-102 Android：材料結構和版面配置 (Java)

建構項目

MDC-Android 本程式碼研究室中的元件

軟硬體需求

您對於建構 Android 應用程式的體驗程度有多高？

持續使用 MDC-101 嗎？

從頭開始？

下載新創公司程式碼研究室應用程式

...或從 GitHub 複製

在 Android Studio 中載入範例程式碼

新增專案依附元件

執行啟動應用程式

新增 AppBar 小工具

新增導覽圖示

新增動作按鈕及設定頂端應用程式列樣式

新增卡片

設定資訊卡的格線

新增圖片和文字

後續步驟

我以合理的時間和心力完成了這個程式碼研究室

我要在日後繼續使用 Material Components