MDC-103 Android：以色彩、動態和類型 (Java) 建立背景圖形

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

在程式碼研究室的 MDC-101 和 MDC-102 中，您使用 Material Components (MDC) 打造應用程式 Shrine，這是專門販售服飾和居家用品的電子商務應用程式。這個應用程式的使用者流程從登入畫面開始，將使用者導向至顯示產品的首頁。

我們最近設計了 Material Design 的設計，讓設計人員和開發人員能更靈活地表達自己的產品特色。您現在可以使用 MDC 自訂神社，展現出獨特的風格。

建構項目

在這個程式碼研究室中，您將使用以下元素自訂神社來反映品牌：

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

這是一個由 4 大程式碼研究室組成的 3 個程式碼研究室，可引導你建立名為「神社」的應用程式，這款電子商務應用程式專門販售服飾和居家用品。 您可以在以下位置找到相關的程式碼研究室： MDC-101：材料元件 (MDC) 基本資訊 MDC-102：材料設計結構和版面配置 MDC-104：質感設計進階元件 在 MDC 104 結束前，您必須建構如下所示的應用程式：

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

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

軟硬體需求

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

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

初級 中級 專業

持續使用 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. 設定精靈執行完畢後，系統會顯示「歡迎使用 Android Studio」視窗，請按一下 [開啟現有的 Android Studio 專案]。前往您安裝程式碼範例的目錄，然後選取 java -> Shrine(或搜尋您的電腦以搜尋 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 中。

完成了，你的裝置或模擬器中會顯示「登入頁面」登入頁面。當你按下 [下一步] 後，「神社」首頁會在頂端顯示應用程式列，下方則會顯示格狀圖片。

我們調整應用程式顏色、字體和字體，讓應用程式圖示在「最上層」的位置和「比薩」品牌一致。

這個色彩主題是由設計自訂顏色的設計師所建立 (如下圖所示)。它包含從 Shrine 的品牌中選取的顏色，並套用至 Material Theme Editor，以擴充更完整的調色盤。(這些顏色不是2014 年 Material 調色盤)。

Material Theme Editor Editor 他們將它們整理成數據的數據包，包括數字的標籤 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>

如要在狀態列中使用深色圖示，請將以下內容加入 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 中，將新的 textColorPrimary 色彩資源集新增至 #442C2E，並更新 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 會從預設的 text MaterialButton 樣式延伸，並且只變更文字顏色。

將 [下一步] 按鈕設為 Widget.Shrine.Button 樣式，在 [取消] 按鈕上設定 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" />

建構並執行。您的登入畫面應該會如下所示：

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

• 在 UI 中，您可以自訂顏色，更精確地傳達品牌形象。
• 使用兩種顏色 (包括主要和次要顏色) 的調色盤，並搭配不同顏色的淺色和深色變化。或者，您也可以使用 Material Design 調色盤工具產生調色盤。
• 別忘了設定字型排版！
• 確保文字與背景色彩對比度為方便存取 (大型字體為 3:1，小尺寸為 4.5:1)。

除了變更顏色以外，設計人員也提供了特定的網站字型供您使用。並把它加到應用程式列的頂端

設定頂端應用程式列樣式

您可以根據設計人員的規格，設定頂端應用程式列的文字樣式。請將下列文字外觀樣式新增至 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" />

建構並執行。您的登入畫面應該會如下所示：

字型排版：

• 選擇適合小型字體和內文的文字字型時，應選擇清晰的字型，而非特定樣式。
• 顯示字型和標題應用於顯示或強調品牌，應用於表達或強調品牌。

既然您已經使用與神經相同的特定色彩和字型來設計網頁樣式，我們現在來看看顯示神聖動物產品的卡片。現在，這些按鈕會放在應用程式導覽下方的白色表面上。因此，請確保產品更加強調產品。

變更產品格線的高度

我們調整了頂端應用程式列和內容的位置，讓內容看起來像是排在頂端應用程式列上方的工作表上。將 app:elevation 屬性加到您的 AppBarLayout，並將 android:elevation 屬性加到 NestedScrollView 的 shr_product_grid_fragment.xml 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 介面和元件都有海拔高度值。
• 不同表面的結束位置和另一個起點之間的劃分方式，是由表面邊緣區分。
• 可透過調暗背景、調亮的背景或陰影表示不同表面之間的高度差異。
• 其他平台前方的表面通常含有較重要的內容。

將版面配置變更為以不同的長寬比和大小顯示資訊卡，讓每張資訊卡看起來不同。

使用輪流的 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;
}

建構並執行。產品格線項目現在應有所交錯：

色彩是展現品牌形象的有力方法，色彩有明顯的變動可能會對使用者體驗產生重大影響。要瞭解這一點，讓我們看看神社對於品牌的色彩配置完全不同。

修改樣式和顏色

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

接下來，請使用「?theme」屬性設定工具列樣式的 android: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 屬性新增至文字欄位' style:

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。

目前，您已經建立的應用程式與設計人員的規格相似。

如要查看完成的 MDC 103 應用程式，您可以下載已完成的程式碼研究室，或是利用 git 查看這個程式碼研究室的已完成版本：git checkout 103-complete。

您可以根據已完成的應用程式版本測試應用程式版本。

後續步驟

您使用了這些 MDC 元件：主題、字型與海拔高度。您可以在 MDC Android 中探索 MDC Android 元件，瀏覽更多元件。

如果您計劃的應用程式設計包含 MDC 程式庫中不含元件的元素，該怎麼辦？在 MDC-104：Material Design 進階元件中，我們將探討如何使用 MDC 程式庫建立自訂元件來打造特定外觀。

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

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

我要在日後繼續使用 Material Components

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