1. 簡介
開發人員可透過 Material 元件 (MDC) 實作 Material Design。MDC 由 Google 的工程師和 UX 設計師團隊建立，提供數十種美觀實用的 UI 元件，適用於 Android、iOS、網頁和 Flutter。material.io/develop |
Android 適用的 Material Design 元件 (MDC Android) 並非新系統或架構，不會要求您改變應用程式的範例。MDC Android 是以您在 Android 中已知的類別和 API 為基礎建構而成，例如 AppCompat 按鈕和文字欄位。您可以視需要使用 MDC Android 提供的元件，立即改善現有應用程式的設計。
建構項目
在本程式碼研究室中，您將使用 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
在 Android Studio 中載入範例程式碼
- 設定精靈完成後，系統會顯示「Welcome to Android Studio」視窗，請按一下「Open an existing Android Studio project」。前往安裝範例程式碼的目錄，然後選取「kotlin」->「shipping」 (或在電腦上搜尋「shipping」) 開啟 Shipping 專案。
- 稍待片刻，Android Studio 會建構及同步處理專案，Android Studio 視窗底部的活動指標會顯示進度。
- 此時，Android Studio 可能會引發一些建構錯誤，因為您缺少 Android SDK 或建構工具，如下所示。按照 Android Studio 中的操作說明安裝/更新這些項目，然後同步處理專案。
執行範例應用程式
|
|
太棒了，您應該會看到應用程式和表單。
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 的按鈕具有下列特點：
- 墨水波紋
- 圓角
- 主題設定支援
- 鉅細靡遺的版面配置和排版
- 以 AppCompatButton (標準 Android 按鈕類別) 為基礎建構，因此您知道如何在程式碼中使用這些按鈕。
(選用) 取代按鈕類別
根據預設，Material 程式庫會自動將一般按鈕膨脹為 MDC 按鈕。不過，您可以選擇將所有 Button 參照替換為 MaterialButton，以便存取僅適用於 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 為基礎建構的元件，具有下列特點：
- 修正高度和樣式
- 筆劃寬度和顏色屬性
將內容包裝在資訊卡中
將包含內容的 LinearLayout 包裝在 shipping_info_activity.xml 中，並使用 MaterialCardView 元件，如下所示：
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 View 元件是熟悉但新穎的方式，可輕鬆將內容包裝在資訊卡中。
6. 重點回顧
您已替換一些常見的元件來顯示即時值：文字欄位、按鈕、資訊卡，而且不必重新設計整個應用程式。其他元件也能帶來顯著差異，例如頂端應用程式列和 TabLayout。
後續步驟
如要進一步探索 MDC-Android 中的元件，請前往 Android 視窗小工具目錄。