MDC-111 Android：將 Material 元件整合至程式碼集 (Kotlin)

1. 簡介

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

Android (MDC Android) 適用的 Material Design 元件不是需要在應用程式中變更模式的新系統或架構。MDC Android 是以 Android 現有的類別和 API 為基礎，例如 AppCompat 按鈕和文字欄位。您可以視需要使用 MDC Android 提供的元件，立即改善現有應用程式的設計。

建構項目

在本程式碼研究室中，您將以 MDC 的新元件形式取代部分現有元件。

我們提供四個 MDC 程式碼研究室，方便您瞭解如何運用許多元件建構應用程式。如要開始使用，請參閱 MDC-101：Material Design 元件 (MDC) 基本概念。

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

• 文字欄位
• 按鈕
• 選單

軟硬體需求

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

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

新手 中級 還算容易

2. 設定開發環境

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

下載範例應用程式

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

...或是從 GitHub 複製檔案

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

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

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

在 Android Studio 中載入範例程式碼

1. 設定精靈完成後，系統顯示「Welcome to Android Studio」視窗，請按一下「Open an existing Android Studio project」。前往您安裝程式碼範例的目錄，然後選取 kotlin ->運送服務 (或在電腦中搜尋運費)，即可開啟運送專案。
2. 等待 Android Studio 建構並同步處理專案，如 Android Studio 視窗底部的活動指標所示。
3. 此時，Android Studio 可能會引發部分建構錯誤，因為缺少 Android SDK 或建構工具 (如下所示)。請按照 Android Studio 中的指示安裝/更新這些套件，並同步處理專案。

執行範例應用程式

確認「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」(清理專案)。如果仍然失敗，請確認您使用的是 Android Studio 3.2 版或更高版本。

大功告成！畫面上應該會顯示應用程式及其表單。

3. 更新文字欄位

相較於純文字，Material Design 文字欄位的主要可用性更高。使用外框或背景填滿定義命中區域，使用者就更有可能在較複雜的內容中與表單互動，或識別文字欄位。

匯入 MDC-Android

前往 app 模組的 build.gradle 檔案，確認 dependencies 區塊包含 MDC Android 的依附元件：

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

取代文字欄位樣式

在 shipping_info_activity.xml 中，將以下樣式新增至所有 TextInputLayout XML 元件：

shipping_info_activity.xml

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

每個 TextInputLayout 都應如下所示：

shipping_info_activity.xml

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/name_text_input"
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/name_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>

建構並執行：

所有文字欄位都將更新為使用 MDC 中的新設計。

新增錯誤

MDC 文字欄位內建錯誤簡報。MDC 會在文字欄位下方加上紅色文字，並將裝飾改成紅色。

在 ShippingInfoActivity.kt 中更新 onCreate()，檢查文字輸入內容，並視情況設定錯誤。如下所示：

ShippingInfoActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.shipping_info_activity)

   val rootView = findViewById<View>(android.R.id.content)

   val textInputLayouts = Utils.findViewsWithType(
           rootView, TextInputLayout::class.java)

   save_button.setOnClickListener {
       var noErrors = true
       for (textInputLayout in textInputLayouts) {
           val editTextString = textInputLayout.editText!!.text.toString()
           if (editTextString.isEmpty()) {
               textInputLayout.error = resources.getString(R.string.error_string)
               noErrors = false
           } else {
               textInputLayout.error = null
           }
       }

       if (noErrors) {
           // All fields are valid!
       }
   }
}

建構及執行。按下 [儲存]，但至少將一個文字欄位留白：

空白的文字欄位會顯示為紅色，並在下方顯示錯誤文字。

4. 更新按鈕

MDC 具有下列按鈕：

• 墨水漣漪
• 圓角
• 主題設定支援
• 完美貼合 Pixel 的版面配置和字體排版
• 建構在 AppCompatButton (標準 Android 按鈕類別) 上，方便您在程式碼中使用這些按鈕。

可選用「取代」按鈕類別

根據預設，Material 程式庫會自動將一般按鈕加載至 MDC Button。不過，您可以選擇使用 MaterialButton 取代所有對 Button 的參照，這樣您就能存取 MaterialButton 中使用的其他方法，例如變更圓角半徑。MDC 按鈕是簡單的隨插即用元件。您只要將 XML 元件名稱 Button 替換為 MaterialButton，並將預設的 MaterialButton 樣式套用至 MaterialButton 即可。

在 shipping_info_activity.xml 中，將按鈕從：

shipping_info_activity.xml

<Button
   android:id="@+id/save_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="end"
   android:layout_marginTop="16dp"
   android:text="@string/label_save" />

到：

shipping_info_activity.xml

<com.google.android.material.button.MaterialButton
   android:id="@+id/save_button"
   style="@style/Widget.MaterialComponents.Button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="end"
   android:layout_marginTop="16dp"
   android:text="@string/label_save" />

建構並執行：

5. 新增卡片

MaterialCardView 是建立於 CardView 的元件，具有：

• 修正高度和樣式
• 筆劃寬度和顏色屬性

將資訊卡內容納入資訊卡

使用 MaterialCardView 元件將 shipping_info_activity.xml 中含有內容的 LinearLayout 納入，如下所示：

shipping_info_activity.xml

<com.google.android.material.card.MaterialCardView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="16dp"
   app:contentPadding="16dp">


   <!-- LinearLayout goes here -->


</com.google.android.material.card.MaterialCardView>

建構及執行。整份表單應該包裝在資訊卡中：

Material Card 元件是一種熟悉但新方法，可讓您輕鬆將內容納入資訊卡中。

6. 回顧

您已替換一些常用元件來顯示立即值：文字欄位、按鈕和資訊卡，因此您不必全面重新設計應用程式。此外，其他元件 (例如頂端應用程式列和 TabLayout) 也可能帶來巨大變化。

如要取得已完成的 MDC 111 應用程式，請下載已完成的程式碼研究室，或是使用 Git 進行 111 完成：git checkout 111-complete。

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

後續步驟

如要查看更多 MDC-Android 元件，請前往 Android 小工具目錄。

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

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

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

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