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

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

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

建構項目

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

• 熱門應用程式列
• 包含各種產品的網格清單

這是第四項程式碼研究室中的第二種工具，可引導您為使用「神社」的產品建構應用程式。我們建議您逐步完成所有程式碼研究室，逐步完成各項工作。 相關的程式碼研究室位於： MDC-101：材料元件 (MDC) 基本資訊 MDC-103：具有色彩、形狀、海拔高度和類型的質感設計主題 MDC-104：質感設計進階元件。

在 MDC-104 年底前，您將會建構如下所示的應用程式：

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

• 應用程式列版面配置
• MaterialCardView

在本程式碼研究室中，您將使用 MDC-Android 提供的預設元件。您將會學習在 MDC-103：採用顏色、形狀、海拔高度和類型的質感設計主題中自訂這些功能。

軟硬體需求

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

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

初級 中級 專業

持續使用 MDC-101 嗎？

如果您已完成 MDC-101 作業，就應該為這個程式碼研究室準備程式碼。跳到步驟 3：新增頂端應用程式列。

從頭開始？

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

下載入門應用程式

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

...或從 GitHub 複製

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

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

如需更多說明：從 GitHub 複製存放區

在 Android Studio 中載入範例程式碼

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

新增專案依附元件

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

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

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

2. (選用) 視需要編輯 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 會建置及部署應用程式，並在目標裝置上自動開啟該應用程式。

如果您無法新增依附元件或成功執行應用程式，請停止您的開發人員環境並進行疑難排解。

如果您在建構過程中收到 INSTALL_FAILED_INVALID_APK 錯誤，請嘗試執行「建構' -> 清理專案'」在 Android Studio 中。

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

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

使用者關閉登入頁面時，主螢幕會顯示「您已完成！」訊息。好極了！不過，使用者目前並未採取任何行動，或無法掌握應用程式的所在位置

「導覽」是指允許使用者瀏覽應用程式的元件、互動、視覺提示和資訊架構，有助於使用者發現內容及功能，進而輕鬆完成工作。

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

您可能知道熱門應用程式列是「導覽列」，在 iOS 中則是「應用程式列」，或只是「應用程式列」或「標題」。

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

新增 AppBar 小工具

在 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 中，這些稱為「動作按鈕」。我們會透過設計應用程式頂端樣式的樣式，並將動作按鈕加入至其選單。

重要事項：匯入 Toolbar 類別時，請確認匯入的不是 androidx.appcompat.widget.Toolbar，而不是 android.widget.Toolbar

在ProductGridFragment.kt和onCreateView功能中，設定activity'的Toolbar使用ActionBar使用setSupportActionBar。您可以在使用 inflater 建立資料檢視後進行這項作業。

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   return view;
}

重要事項：請務必import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.，這樣我們就可以用 kotlin' 的合成屬性 (而非使用 findViewById) 來存取編號為 app_bar 的資料檢視。

在程式碼研究室中，當 Android Studio 出現提示時，您可以繼續新增匯入陳述式。

接著，直接在我們直接變更的設定工具的下方，將 onCreateOptionsMenu 覆寫到 shr_toolbar_menu.xml，即可將 shr_toolbar_menu.xml 的內容展開到工具列。

ProductGridFragment.kt

override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
   menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
   super.onCreateOptionsMenu(menu, menuInflater)
}

注意：如果 Android Studio 在寫入這個程式碼時遇到「無法解決符號」錯誤，請按下 Alt + Enter 鍵 (Mac 上則為 Option + Return 鍵)，匯入缺少的符號。

最後，在 ProductGridFragment.kt 中覆寫 onCreate()，並在呼叫 super() 後呼叫 setHasOptionMenu，方法是呼叫 true：

ProductGridFragment.kt

override fun onCreate(savedInstanceState: Bundle?) {
   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.kt 檔案應如下所示：

ProductGridFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the tool bar
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

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

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

你會發現畫面頂端的狀態列看起來有些籠統。目前不用擔心這件事，因為當我們在 MDC-103 中完成配色時，我們一定會更正這個問題。

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

卡片

資訊卡是獨立的元素，可顯示單一主題的內容和動作。透過靈活的方式，將含有類似內容的內容呈現為系列作品。

新增卡片

首先，請在頂端應用程式列下方新增一張卡片。資訊卡必須包含圖片區域、標題和次要文字標籤。在 AppBarLayout 的 shr_product_grid_fragment.xml 中加入以下內容。

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.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry

/**
* Adapter used to show a simple grid of products.
*/
class ProductCardRecyclerViewAdapter(private val productList: List<ProductEntry>) : RecyclerView.Adapter<ProductCardViewHolder>() {

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductCardViewHolder {
       val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.shr_product_card, parent, false)
       return ProductCardViewHolder(layoutView)
   }

   override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
       // TODO: Put ViewHolder binding code here in MDC-102
   }

   override fun getItemCount(): Int {
       return productList.size
   }
}

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

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

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import androidx.recyclerview.widget.RecyclerView

class ProductCardViewHolder(itemView: View) //TODO: Find and store views from itemView
   : RecyclerView.ViewHolder(itemView)

如要設定網格，請先從 shr_product_grid_fragment.xml 中移除預留位置 MaterialCardView。接下來，請加入代表卡片格線的元件。這裡將使用 RecyclerView。將 RecyclerView 元件新增至您的 shr_product_grid_fragment.xml 的 AppBarLayout 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.kt：

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   // Set up the RecyclerView
   view.recycler_view.setHasFixedSize(true)
   view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
   val adapter = ProductCardRecyclerViewAdapter(
           ProductEntry.initProductEntryList(resources))
   view.recycler_view.adapter = adapter
   val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
   val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
   view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

   return view;
}

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

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

ProductGridFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the toolbar.
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       // Set up the RecyclerView
       view.recycler_view.setHasFixedSize(true)
       view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
       val adapter = ProductCardRecyclerViewAdapter(
               ProductEntry.initProductEntryList(resources))
       view.recycler_view.adapter = adapter
       val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
       val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
       view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

建構並執行：

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

新增圖片和文字

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

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

import com.android.volley.toolbox.NetworkImageView

class ProductCardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

   var productImage: NetworkImageView = itemView.findViewById(R.id.product_image)
   var productTitle: TextView = itemView.findViewById(R.id.product_title)
   var productPrice: TextView = itemView.findViewById(R.id.product_price)
}

更新 ProductCardRecyclerViewAdapter 中的 onBindViewHolder() 方法，為每個產品檢視設定名稱、價格和產品圖片，如下所示：

ProductCardRecyclerViewAdapter.kt

override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
   if (position < productList.size) {
       val product = productList[position]
       holder.productTitle.text = product.title
       holder.productPrice.text = product.price
       ImageRequester.setImageFromUrl(holder.productImage, product.url)
   }
}

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

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

建構並執行：

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

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

您可以下載已完成的程式碼研究室，或是利用 git 完成 102-complete，以完成已完成的 MDC 102 應用程式：git checkout 102-complete。

您可以對該分支版本的應用程式進行測試。

後續步驟

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

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

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

非常同意 同意 普通 不同意 非常不同意

我要在日後繼續使用 Material Components

非常同意 同意 普通 不同意 非常不同意