在第十天，你已經成功讓 RecyclerView 列表可以被點擊，並能透過 interface 回傳點擊事件。這證明你已經掌握了 App 開發中，將邏輯與介面分離的專業技巧。

今天，我們要學習如何讓你的 App 從功能導向，轉變為兼具美學與設計感。這就是我們今天的重點：Material Design。

什麼是 Material Design？

• 簡單比喻：Material Design 就像是 Google 為 App 設計師訂定的**「一套美學標準」**。
• 核心理念：它將 App 畫面上的所有元件，都視為一張張的「紙張」。這些紙張有厚度、有陰影，會對光線產生反應。這讓 App 介面看起來更真實、更有層次感。
• 主要規範：它為顏色、排版、圖示、動態效果等，提供了一套完整的設計指南，讓 App 在視覺上更具一致性和易用性。

1. 認識 App 的顏色簿 (colors.xml)

• 簡單比喻：colors.xml 就像是 App 的**「專屬調色盤」**。
• 用途：你可以把 App 中所有會用到的顏色，在這裡定義成變數，並給它們取一個有意義的名字。這樣未來如果你想換顏色，只需要修改這裡的代碼，所有用到這個顏色的元件都會自動更新。
• 開啟檔案：在專案目錄中，依序找到 app -> res -> values -> colors.xml。XML
• 如何使用：在colors.xml可以像是這行<color name="teal_700">#FF018786</color>去定義顏色。
  <color>：這是 XML 檔案中的一個標籤，它告訴 Android 系統：「我正在定義一個顏色」。
  name="teal_700"：這是給這個顏色變數取的「名字」。
  #FFFFFFFF：這是這個顏色的十六進位代碼。
  在 XML 佈局中，你可以用 @color/white 來引用你定義的顏色。

2. 認識 App 的樣式簿 (styles.xml)

• 簡單比喻：styles.xml 就像是 App 的**「服裝樣式集」**。

• 用途：你可以將一組重複的屬性，例如文字大小、顏色、背景色，包裝成一個樣式。未來如果你想讓多個元件有同樣的風格，只需要引用這個樣式即可。

• 開啟檔案：在專案目錄中，依序找到 app -> res -> values -> themes.xml。

  • 注意：在較新的 Android Studio 版本中，樣式通常會放在 themes.xml 中。

  你可以試著修改 themes.xml 中的 colorPrimary、colorSecondary 等顏色，你會發現 App 的主題顏色會跟著改變。

3. 實作時間：改造你的按鈕樣式

我們來動手實作一個簡單的樣式，並套用在你的按鈕上。

1. 在 themes.xml 或 styles.xml 中，新增一個樣式：XML

   <style name="MyButton" parent="Widget.MaterialComponents.Button"> <item name="android:backgroundTint">@color/teal_200</item> <item name="android:textColor">@color/white</item> <item name="android:textSize">16sp</item> <item name="cornerRadius">16dp</item> </style>

2. 在你的 activity_main.xml 中，找到你的按鈕元件。

3. 為它新增一個 style 屬性，並引用我們剛才建立的樣式。XML

   <Button ... style="@style/MyButton" android:text="點擊我" />

4. 執行你的 App，你會發現按鈕的樣式已經被徹底改變了！

今日總結

今天我們學會了如何使用 Material Design 的核心工具，來美化你的 App：

• colors.xml：App 的「專屬調色盤」。
• styles.xml：App 的「服裝樣式集」。
• 如何透過 style 屬性，將樣式套用在元件上。

明天，我們要學習一個處理資料的利器：SharedPreferences，它能讓你的 App 擁有「短期記憶」，即使 App 關閉也能保存資料！

明天見！