MDC-103 Android：使用色彩、動態和類型建立 Material Design 主題設定 (Java)

1. 簡介

Material Design 元件 (MDC) 可協助開發人員實作質感設計。MDC 是由 Google 工程師和使用者體驗設計師團隊打造，提供數十種精美且功能豐富的 UI 元件，適用於 Android、iOS、網頁和 Flutter.material.io/develop

在程式碼研究室中，您在 MDC-101 和 MDC-102 中，使用了 Material Design 元件 (MDC) 針對名為 Shrine 的電子商務應用程式，這個電子商務應用程式販售服飾和居家用品。此應用程式內含的使用者流程，從登入畫面開始，並將使用者帶往顯示產品的主畫面。

Material Design 最近擴大了這項功能，讓設計人員和開發人員能以更靈活的方式呈現產品品牌。您現在可以使用 MDC 自訂神社，以前所未有的獨特風格展現其獨特風格。

建構項目

在本程式碼研究室中，您將使用以下程式碼自訂 Shrine 來反映品牌：

• 顏色
• 字體排版
• 海拔高度
• 版面配置

這是 4 個程式碼研究室中的第三，可引導您建構一款名為「神社」的應用程式，這是一款販售服飾和居家用品的電子商務應用程式。您可以在以下位置找到相關的程式碼研究室： MDC-101：Material Design 元件 (MDC) 基本概念 MDC-102：Material Design 結構和版面配置 MDC-104：Material Design 進階元件 在 MDC 104 結束時，您將建構的應用程式如下：

本程式碼研究室中使用的 MDC Android 元件和子系統

• 主題
• 字體排版
• 海拔高度

軟硬體需求

• 對 Android 開發作業有基本瞭解
• Android Studio (如果尚未安裝，請在這裡下載)
• Android 模擬器或裝置 (可透過 Android Studio 取得)
• 程式碼範例 (請參閱下一步)

你對建立 Android 應用程式的經驗程度為何？

新手 中級 還算容易

2. 設定開發環境

您使用的是 MDC-102 版本嗎？

完成 MDC-102 後，您的程式碼應該就可以用於本程式碼研究室。跳至步驟 3：變更顏色。

下載程式碼研究室入門應用程式

下載範例應用程式

範例應用程式位於 material-components-android-codelabs-103-starter/java 目錄中。請務必先 cd 放入該目錄，再開始操作。

...或是從 GitHub 複製檔案

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

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

如需進一步協助，請參閱：從 GitHub 複製存放區

在 Android Studio 中載入範例程式碼

1. 設定精靈完成後，系統顯示「Welcome to Android Studio」視窗，請按一下「Open an existing Android Studio project」。前往您安裝程式碼範例的目錄，然後選取 java ->神社 (或在電腦上搜尋小時) 以開啟 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。 按下綠色的「Run」/「Play」按鈕，即可建構並執行應用程式。 在「Select Deployment Target」視窗中，如果可用裝置已列出「Android 裝置」，請跳至步驟 8。否則，請按一下「Create New Virtual Device」。 在「選取硬體」畫面中選取手機裝置 (例如「Pixel 2」)，然後點選「下一步」。 在「System Image」畫面中選取最新的 Android 版本 (最好是最高 API 級別)。如果尚未安裝，請按一下畫面中顯示的「Download」(下載) 連結並完成下載。 點選「下一步」。 在「Android Virtual Device (AVD)」(Android 虛擬裝置 (AVD)) 畫面上維持原設定，然後按一下「Finish」(完成)。 從部署目標對話方塊中選取「Android 裝置」。 按一下 [確定]。 Android Studio 會建構及部署應用程式，並自動在目標裝置上開啟應用程式。

如果無法新增依附元件或成功執行應用程式，請停止開發人員環境並排解相關問題。

如果建構時收到 INSTALL_FAILED_INVALID_APK 錯誤，請嘗試執行「Build」->「Clean Project」(清理專案)。

大功告成！您應該會在裝置或模擬器中看見 Shrine 的登入頁面。點選 [下一步] 後，神殿首頁的頂端會有應用程式列，下方則以格狀顯示產品圖片。

讓我們變更頂端應用程式列的顏色、高度和字體排版，讓頂端應用程式列與神社品牌相呼應。

3. 變更顏色

這個顏色主題是由設計人員使用自訂顏色建立 (如下圖所示)。當中包含從神社品牌挑選的色彩，並套用至 Material 主題編輯器，這種編輯器的色彩進一步擴大，呈現出更全面的調色盤。(這些顏色並非來自 2014 年 Material 調色盤)。

Material Design 主題編輯器已將這些顏色整理成以數字標示的色調，包括每種顏色標籤 50、100、200、.... 到 900。神社只使用粉色色的 50、100 和 300 層，以及棕色樣本中 900 的陰影。

我們可以根據該色彩配置，變更頂端應用程式列的顏色。

設定 colorPrimaryDark 和 colorAccent

在 colors.xml 中修改下列幾行內容。colorAccent 屬性可控制頂端應用程式列的顏色和其他內容，colorPrimaryDark 屬性則控制狀態列的顏色。

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

如要在狀態列中使用深色圖示，請將以下內容新增至 Shrine 的應用程式主題 Theme.Shrine：

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

您的 colors.xml 和 styles.xml 應如下所示：

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

在 colors.xml 中，新增設為 #442C2E 的新 textColorPrimary 顏色資源，並更新 toolbarIconColor 屬性以參照 textColorPrimary 顏色。

更新 styles.xml 檔案，將 android:textColorPrimary 屬性設為 textColorPrimary 顏色。

在 Theme.Shrine 中設定 android:textColorPrimary，即可設定所有元素的文字樣式，包括頂端應用程式列和頂端應用程式列中的圖示。

此外，請將 Widget.Shrine.Toolbar 樣式中的 android:theme 屬性設為 Theme.Shrine。

在 Theme.Shrine 中設定 android:textColorPrimary，即可設定所有元素的文字樣式，包括頂端應用程式列以及頂端應用程式列的圖示。

您的 colors.xml 和 styles.xml 應如下所示：

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

建構及執行。產品格線現在應如下所示：

我們配合色彩配置變更登入畫面的樣式。

設定文字欄位的樣式

我們可以變更登入頁面中的文字輸入方式，讓版面配置使用更好的顏色。

在 colors.xml 檔案中新增下列顏色資源：

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

在 styles.xml 中新增兩個新樣式：

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

最後，將 shr_login_fragment.xml 中 TextInputLayout XML 元件的兩個樣式屬性設為新樣式：

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

設定按鈕顏色的樣式

最後，調整登入頁面上的按鈕顏色樣式。將下列樣式新增至 styles.xml：

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Widget.Shrine.Button 樣式沿用預設的 MaterialButton 樣式，並變更按鈕的文字顏色和背景色調。Widget.Shrine.Button.TextButton 是從預設的「文字」 MaterialButton 樣式延伸，只會變更文字顏色。

請在「Next」按鈕上設定 Widget.Shrine.Button 樣式，以及「Cancel」按鈕上的 Widget.Shrine.Button.TextButton 樣式，如下所示：

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

在登入頁面中更新神社標誌的顏色。這需要稍微變更向量可繪項目 shr_logo.xml。開啟可繪項目檔案，並將 android:fillAlpha 屬性變更為 1。可繪項目應如下所示：

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

將 shr_login_fragment.xml 中標誌 <ImageView> 的 android:tint 屬性設為 ?android:attr/textColorPrimary，如下所示：

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

建構及執行。登入畫面現在應如下所示：

關於顏色和主題的注意事項：

• 你可以自訂使用者介面的顏色，以便更生動地呈現品牌形象。
• 將兩種顏色 (主要和次要顏色) 設為調色盤，搭配這些顏色的淺色和深色變化。或使用 Material Design 調色盤工具產生調色盤。
• 別忘了字體排版的顏色！
• 確保文字與背景顏色的對比度以易於存取的比例 (大型字體為 3:1，小字體為 4.5:1)。

4. 修改字體排版和標籤樣式

除了變更顏色外，設計人員也為您提供網站專用的特定字體排版。讓我們在頂端應用程式列加入該指令。

設定頂端應用程式列的樣式

根據設計人員提供的規格，設定頂端應用程式列的文字外觀樣式。在 styles.xml 中加入下列文字外觀樣式，並將 titleTextAppearance 屬性設為在 Widget.Shrine.Toolbar 樣式中參照這個樣式。

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

您的 colors.xml 和 styles.xml 應如下所示：

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>


   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

設定標籤樣式

我們會為產品資訊卡標籤設定樣式，以使用正確的文字外觀，並在資訊卡中水平置中。

將名稱標籤的字體排版從 textAppearanceHeadline6 更新為 textAppearanceSubtitle2，如下所示：

shr_product_card.xml

<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/textAppearanceSubtitle2" />

如要將圖片標籤置中，請修改 shr_product_card.xml 中的標籤 <TextView> 以設定 android:textAlignment="center" 屬性：

shr_product_card.xml

<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:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

建構及執行。產品格線畫面現在應如下所示：

接著變更登入畫面的字體排版。

變更登入畫面的字體

在 styles.xml 中，新增下列樣式：

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

在 shr_login_fragment.xml 中，將新樣式設為「SHRINE」標題 <TextView> (並刪除其中的 textAllCaps 和 textSize 屬性)：

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

建構及執行。登入畫面現在應如下所示：

字體排版註意事項：

• 在選擇用於小型字體和內文的文字字型時，請選用清晰明確的字型，而不是特定樣式。
• 適用於大型類型和標題的顯示字型，應用於表達或強調品牌。

5. 調整高度

現在，您已經為頁面加上與 Shrine 相符的特定顏色和字體樣式，現在讓我們來看看展示神社產品的資訊卡。目前，它們會出現在應用程式導覽下方的白色表面上。讓我們以更強調的方式，吸引目光。

變更產品格線高度

我們可以變更頂端應用程式列和內容的高度，讓內容看起來像在頂端應用程式列上方的工作表上。將 app:elevation 屬性加到 AppBarLayout 中，並將 android:elevation 屬性加到 shr_product_grid_fragment.xml 中的 NestedScrollView XML 元件中，如下所示：

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <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:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.appcompat.app.AlertController.RecycleListView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

變更資訊卡高度 (和顏色)

您可以將 shr_product_card.xml 中的 app:cardElevation 從 2dp 變更為 0dp，藉此調整每張資訊卡的高度。同時將 app:cardBackgroundColor 變更為 @android:color/transparent。

shr_product_card.xml

<com.google.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/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

來看看！你已調整產品格線頁面上每張資訊卡的高度。

變更「繼續」按鈕的高度

在 styles.xml 中，將下列屬性新增至 Widget.Shrine.Button 樣式：

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

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

在 Button 的樣式中設定 android:stateListAnimator 可將「繼續」按鈕設為使用我們提供的動畫器。

建構及執行。登入畫面現在應如下所示：

海拔高度注意事項：

• 所有 Material Design 介面和元件都有高度值。
• 從一個表面結束到另一個表面開始之間的除法以表面邊緣區分。
• 表面之間的高度差異可以使用較暗的背景、調亮的背景或陰影表示。
• 在其他介面之前的介面通常包含更重要的內容。

6. 變更版面配置

將版面配置改成以不同的顯示比例和大小顯示資訊卡，讓各張資訊卡看起來與其他資訊卡不同。

使用交錯的 RecyclerView 轉接程式

我們在 staggeredgridlayout 套件中提供新的 RecyclerView 轉接程式，用於顯示可水平捲動的非對稱式分段資訊卡版面配置。您可以自行深入瞭解該程式碼，但我們不會在這裡說明實作方式。

如要使用這個新的轉接程式，請在 ProductGridFragment.java 中修改 onCreateView() 方法。將「設定 RecyclerView」後方的程式碼區塊取代並加上以下內容：

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

我們也必須微幅變更 product_grid_fragment.xml，移除 NestedScrollView 中的邊框間距，如下所示：

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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

最後，我們也會修改 ProductGridItemDecoration.java，調整 RecyclerView 中的資訊卡邊框間距。請修改 ProductGridItemDecoration.java 的 getItemOffsets() 方法，如下所示：

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

建構及執行。現在產品格線項目應會輪流：

7. 試試其他主題

顏色是展現品牌精神的有效方法，稍微改變顏色則可提升使用者體驗。如要測試這項功能，讓我們看看在品牌顏色配置完全不同的的情況下，消費者會有什麼變化。

修改樣式和顏色

在 styles.xml 中新增下列新主題：

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

然後在 AndroidManifest.xml 中，在應用程式中使用這個新主題：

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
   android:name="com.google.codelabs.mdc.java.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

在 colors.xml 中修改工具列圖示顏色，如下所示：

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

接著，設定工具列樣式的 android:theme 屬性，使用「?theme」來參照目前的主題屬性，而不要以硬式編碼方式寫入：

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

接著，降低登入畫面文字欄位中的提示文字顏色。在文字欄位中加入 android:textColorHint 屬性樣式：

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

建構及執行。現在，您可以預覽新主題了。

請先還原本節中變更的程式碼，再開始進行 MDC-104。

8. 回顧

您現在已建立與設計人員設計規格類似的應用程式。

如要取得已完成的 MDC 103 應用程式，請下載已完成的程式碼研究室，或使用 Git 查看已完成的程式碼研究室版本：git checkout 103-complete。

您可以針對完成的應用程式版本進行測試。

後續步驟

您已使用下列 MDC 元件：主題、字體排版和高度。您還可以在 MDC-Android Catalog 的 MDC Android 元件中探索更多元件。

如果您規劃的應用程式設計含有 MDC 程式庫中沒有元件的元素，該怎麼辦？在 MDC-104：Material Design 進階元件中，我們將瞭解如何使用 MDC 程式庫建立自訂元件，達到特定的外觀。

我可以在合理的時間內，完成本程式碼研究室

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

我想日後繼續使用 Material Design 元件

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