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

1. 簡介

logo_components_color_2x_web_96dp.png

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

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

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

建構項目

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

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

21c025467527a18e.png dcde66003cd51a5.png

本程式碼研究室中使用的 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

在 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 中的指示安裝/更新這些套件，並同步處理專案。

F5H6srsw_5xOPGFpKrm1RwgewatxA_HUbDI1PWoQUAoJcT6DpfBOkAYwq3S-2vUHvweUaFgAmG7BtUKkGouUbhTwXQh53qec8tO5eVecdlo7QIoLc8rNxFEBb8l7RlS-KzBbZOzVhA

新增專案依附元件

專案需要使用 MDC Android 支援資料庫的依附元件。您下載的程式碼範例中應該已經包含這個依附元件，但建議您執行下列步驟確認。

  1. 前往 app 模組的 build.gradle 檔案，確認 dependencies 區塊包含 MDC Android 的依附元件：
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (選用) 如有需要，請編輯 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'
}

執行範例應用程式

  1. 確認「Run / Play」按鈕左側的建構設定為 app。
  2. 按下綠色的「Run」/「Play」按鈕，即可建構並執行應用程式。
  3. 在「Select Deployment Target」視窗中，如果可用裝置已列出「Android 裝置」，請跳至步驟 8。否則，請按一下「Create New Virtual Device」。
  4. 在「選取硬體」畫面中選取手機裝置 (例如「Pixel 2」)，然後點選「下一步」。
  5. 在「System Image」畫面中選取最新的 Android 版本 (最好是最高 API 級別)。如果尚未安裝，請按一下畫面中顯示的「Download」(下載) 連結並完成下載。
  6. 點選「下一步」。
  7. 在「Android Virtual Device (AVD)」(Android 虛擬裝置 (AVD)) 畫面上維持原設定，然後按一下「Finish」(完成)。
  8. 從部署目標對話方塊中選取「Android 裝置」。
  9. 按一下 [確定]。
  10. Android Studio 會建構及部署應用程式，並自動在目標裝置上開啟應用程式。

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

2128554f70f7b1d0.png

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

3. 變更顏色

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

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

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi-nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ 1HLdzGp-TIhg2ULijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4dzTg9uQHsmNG-BDTOd04e6_eRLs--Q

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

設定 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。

您的 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>

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

c68792decc87341c.png

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

設定文字欄位的樣式

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

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

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

b245ce47418aa2d9.png

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>

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

40f888948c67fcfa.png

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

變更登入畫面的字體

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

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

79c0617998f7320c.png

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

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

8f84efe4b1f8ccfc.png

變更「繼續」按鈕的高度

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

styles.xml

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

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

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

1b7a3df5739d0135.png

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

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

b1b95bc028c1d52e.png

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>

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

3ff84b14592ecc17.png

3fa1e3b4723d9765.png

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

8. 回顧

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

後續步驟

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

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

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

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

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

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