MDC-104 Android：Material Advanced 元件 (Java)

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

在程式碼研究室的 MDC-103 中，您可以自訂 Material Components (MDC) 的顏色、海拔高度和字型，設定應用程式樣式。

Material Design 系統中的元件會執行一組預先定義的工作，並具有特定特性，例如按鈕。不過，按鈕不只是讓使用者執行動作的一種方式，也是形狀、大小和顏色的視覺表達方式，可幫助使用者知道它是互動式內容，輕觸或點擊時就會發生某些情況。

質感設計指南從設計的角度來說明元件。這些文件會說明各種平台上可用的基本功能，以及組成各個元件的解剖元素。例如，背景包含後層和其內容、前端圖層及其內容、動態規則以及顯示選項。而且這些元素都能根據應用程式的需求、用途和內容自訂。這些技術中大部分的內容都是來自平台的 SDK，也就是傳統的檢視、控制項和功能。

雖然「質感設計指南」的名稱是許多元件，但並非所有元件都是可重複使用的程式碼，因此 MDC 中並未找到這些內容。您可以自行建立這些體驗，為應用程式量身打造自訂樣式，全部都使用傳統程式碼。

建構項目

在這個程式碼研究室中，您將為「Shrine」新增背景。可依類別篩選非對稱格線顯示的產品。您將使用：

• 圖案
• 動作
• 傳統 Android SDK 類別

這是最後 4 個程式碼研究室，可引導您為「神社」應用程式建立應用程式。我們建議您逐步完成所有程式碼研究室，逐步完成各項工作。 相關的程式碼研究室位於： MDC-101：材料元件 (MDC) 基本資訊 MDC-102：材料設計結構和版面配置。 MDC-103：具有色彩、形狀、海拔高度和類型的質感設計主題

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

• 圖案

軟硬體需求

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

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

初級 中級 專業

持續使用 MDC-103 嗎？

如果您已完成 MDC-103 程序，您的程式碼程式碼應該已經準備就緒。跳到步驟 3。

從頭開始？

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

下載入門應用程式

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

...或從 GitHub 複製

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

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 104-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 中。

完成了，你的裝置應會顯示「神社」應用程式。

背景幕是應用程式的最背面，顯示在其他內容和元件後方。由兩個層面組成：後層 (顯示動作和篩選器) 以及前層 (顯示內容)。您可以使用背景幕顯示互動式資訊和動作，例如導覽或內容篩選器。

隱藏格線內容

在 shr_product_grid_fragment.xml 中，將 android:visibility="gone" 屬性新增至 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"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

我們會在這個地區安裝背景。為避免在頂端的應用程式列和背景顯示選單內容之間進行分割，我們會將背景設為與頂端應用程式列相同的顏色。

在 shr_product_grid_fragment.xml 中，將以下內容新增為根目錄 FrameLayout 中 AppBarLayout 之前的第一個元素：

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

在 styles.xml 中，新增下列指令：

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

非常好！你在神社 UI 中新增了美麗的背景。接著新增選單。

新增選單

選單基本上就是文字按鈕清單，我們在這裡新增一個。

在 res -> layout 目錄中建立名為「shr_backdrop.xml」的新版面配置，然後新增下列項目：

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

然後將這份清單加入您剛剛使用 shr_product_grid_fragment.xml 標記的 shr_product_grid_fragment.xml 中LinearLayout：

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

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

您的背景幕已完成。我們就來回顧先前提過的內容。

在這個程式碼研究室中，先前對神社進行了任何調整，主要產品內容位在最遠的背面。新增背景後，由於內容出現在背景之前，因此更能強調內容。

新增圖層

我們應該再次顯示產品格線圖層。從 NestedScrollView 中移除 android:visibility="gone" 屬性：

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

現在我們使用左角處加上前導樣式，質感設計是指這種類型的自訂方式，質感表面可呈現不同形狀，形狀可以加強表面的強調性和風格，可用來展現品牌風格。材質形狀可以有弧形或有角度的邊角和邊緣，以及任意邊數。可能是對稱或不規則的。

新增圖案

修改網格的形狀。我們已經提供自訂形狀背景，但是形狀只能在 Android Marshmallow 及更高版本上正確顯示。我們可以為 NestedScrollView 上的 Android Marshmallow 以上版本設定 NestedScrollView 的 shr_product_grid_background_shape 背景。首先，在 NestedScrollView 中新增 id，以便我們在程式碼中參照它：

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

然後，在 ProductGridFragment.java 中以程式輔助方式設定背景。加入以下邏輯，在背景陳述式之前將背景設為 onCreateView() 的結尾：

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}

最後，我們將更新 productGridBackgroundColor 色彩資源 (也用於自訂形狀背景)，如下所示：

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

建構並執行：

我們已經將神奇的「自訂」形狀設為主要表面。由於表面高度增加，使用者可以看到前白層後方有一個東西。我們新增了動作，讓使用者看到：選單中的項目。

Motion 讓應用程式更生動有趣。動態感可能相當壯大、極度輕微且微弱，或是介於兩者之間的任何一處。請根據實際情況選擇合適的動作類型。重複播放的動態效果的動作通常應該很小又細微，因此不需要經常耗時。在其他情況 (例如使用者首次開啟應用程式時) 可能更引人注目，同時也會向使用者說明應用程式的使用方式。

在選單按鈕中加入清晰的動作

動態效果是指正面向前移動的形狀。我們已經提供點擊事件監聽器，供您在「NavigationIconClickListener.java」中完成工作表的翻譯動畫。我們可以在 ProductGridFragment.java 的 setupToolbar() 方法中設定這個點擊接聽器：

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

您的 setUpToolbar() 方法現在應如下所示：

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}

建構並執行。按下選單按鈕：

再次按下導覽選單圖示，即可隱藏選單。

調整前圖層的細微動作

動態效果是展現品牌形象的絕佳方式。我們來使用不同的時間曲線，看看顯示的動畫看起來是什麼樣子。

更新 ProductGridFragment.java 中的 setupToolbar() 程式碼，將內插器傳送至導覽圖示的點擊接聽器，如下所示：

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator()));
}

這會造成不同的效果，還是沒關係？

品牌圖示也延伸到熟悉的圖示。我們設計了自訂圖示，並將其與我們的名稱合併，呈現出獨特的品牌風格。

變更選單按鈕圖示

變更選單按鈕，即可顯示含有鑽石設計的圖示。更新「shr_product_grid_fragment.xml」中的工具列，以便使用我們所提供的新品牌圖示 (shr_branded_menu)，並設定 app:contentInsetStart 和 android:padding 屬性，讓工具列更加符合設計人員的規格：

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

請在 ProductGridFragment.java 的 setupToolbar() 中再次更新點擊事件監聽器，以便在選單開啟且關閉時接收工具列的可繪項目，如下所示：

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

建構並執行：

太好了！可看到背景幕時，系統會顯示鑽石選單圖示。當選單可以隱藏時，系統會顯示關閉圖示。

在這四個程式碼研究室的過程中，您已瞭解如何運用 Material Components 打造獨特的優雅使用者體驗，藉此展現品牌的個性和風格。

如要查看完成的 MDC 104 應用程式，您可以下載完成的程式碼研究室，或是利用 git 完成 104 完整標記：git checkout 104-complete。

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

後續步驟

此程式碼研究室 (MDC-104) 完成此一系列程式碼研究室。如要探索更多 MDC-Android 元件，請前往 Android 小工具目錄。

使用程式碼研究室進行更進一步的的挑戰之後，請修改您的 Shrine 應用程式，透過背景選單選取類別來變更產品圖片。

如要瞭解如何將這個應用程式連結至 Firebase 以運作的後端，請參閱 Firebase Android 程式碼研究室。

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

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

我要在日後繼續使用 Material Components

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