Kotlin Android 基礎知識 10.1：樣式與主題

這個程式碼研究室是 Android Kotlin 基礎知識課程的一部分。如果您按部就班完成程式碼研究室，就能充分體驗到本課程的價值。所有課程程式碼研究室都列在 Android Kotlin 基礎知識程式碼研究室到達網頁。

設計簡介

本系列程式碼研究室著重於 Android 開發作業中最重要的環節之一：應用程式設計。應用程式設計的明顯特徵包括檢視畫面、文字、按鈕，以及這些元素在畫面上的位置，還有使用的顏色和字型。向使用者提示後續步驟也是設計的重要環節。使用者需要能夠一目瞭然地知道自己看到的是什麼、哪些內容很重要，以及可以採取哪些行動。

請比較下方的兩個畫面。請注意，只要移動元素並將焦點放在重要內容上，就能協助使用者瞭解發生了什麼事。對於簡單的畫面，好的設計通常代表顯示較少的內容。如果畫面包含大量重要資訊，良好的設計可讓使用者一目瞭然。在開發 Android 應用程式時，您可能會聽到「資訊架構」 (IA) 這個概念。

另一個設計層級是建構連貫的使用者流程或用途，讓使用者完成工作。這種設計形式稱為「使用者體驗設計」(UXD)，有些設計師專門從事這方面的工作。

如果無法聘請設計師，請參考以下入門秘訣：

  • 定義用途。請撰寫使用者應透過應用程式完成的目標，以及完成方式。
  • 實作設計。請勿執著於初稿，只要「夠好」即可，因為您會在觀察實際使用者與初稿的互動情形後進行修改。
  • 取得意見回饋。找人幫忙測試應用程式，例如家人、朋友，甚至是剛在 Google 開發人員群組認識的人。請他們使用您的應用程式執行用途，您則在一旁觀察並詳細記錄。
  • 修正！根據這些資訊改善應用程式，然後再次測試。

設計優質應用程式體驗時，請思考下列問題。在先前的程式碼研究室中，您已學會解決這些問題的技巧：

  • 使用者旋轉裝置時，應用程式是否會失去狀態？
  • 使用者開啟應用程式時會發生什麼情況？使用者是否會看到載入微調器，還是離線快取中已備妥資料？
  • 應用程式的編碼方式是否有效率，且能確保應用程式一律會回應使用者的觸控操作？
  • 應用程式與後端系統互動時，是否會避免向使用者顯示異常、不正確或過時的資料？

為更多目標對象開發應用程式時，請務必盡可能讓應用程式支援各種使用者。例如：

  • 許多使用者與電腦系統的互動方式不同，許多使用者有色盲，對比色對某些使用者來說可能沒問題，但對其他人來說可能不適用。許多使用者都有視力障礙，從需要老花眼鏡到完全失明都有。
  • 部分使用者無法使用觸控螢幕，而是透過按鈕等其他輸入裝置與裝置互動。

良好的設計是吸引使用者使用應用程式的最重要方式。

這些程式碼研究室的內容太短，無法教導您有關 Android 設計的所有知識，但可協助您朝正確的方向邁出第一步，並繼續自行學習及開發。

必備知識

您必須已經熟悉下列項目：

  • 如何使用活動和片段建立應用程式，以及在片段之間導覽並傳遞資料
  • 使用檢視區塊和檢視區塊群組配置使用者介面 (UI)，包括 RecyclerView
  • 如何使用 ViewModel 等架構元件，搭配建議的架構建立結構完善且有效率的應用程式
  • 資料繫結、協同程式和點擊處理方式
  • 如何連上網際網路，並使用 Room 資料庫在本機快取資料
  • 如何設定檢視屬性
  • 如何將資源擷取到 XML 資源檔案中，以及如何使用這些資源

課程內容

  • Android 樣式系統的基本概念
  • 如何使用屬性、樣式和主題來自訂應用程式

學習內容

  • 使用檢視區塊屬性、樣式和主題，改善入門應用程式的設計

GDG 搜尋器入門應用程式會運用您在本課程中學到的所有知識。

應用程式使用 ConstraintLayout 配置三個畫面。其中兩個畫面只是版面配置檔案，您將用來探索 Android 上的顏色和文字。

第三個畫面是 GDG 搜尋器。GDG (Google Developer Group) 是開發人員社群，專注於 Google 技術，包括 Android。世界各地的 GDG 會舉辦聚會、研討會、學習營和其他活動。

開發這個應用程式時，您會使用 GDG 的實際清單。尋找器畫面會使用裝置的位置資訊，依距離排序 GDG。

如果幸運的話，您所在地區有 GDG，可以查看網站並報名參加活動！GDG 活動是認識其他 Android 開發人員的好機會，您也可以學習本課程未涵蓋的業界最佳做法。

以下螢幕截圖顯示應用程式在本程式碼研究室中從頭到尾的變化。

Android 提供豐富的樣式系統，可供您控管應用程式中所有檢視畫面的外觀。您可以運用主題、樣式和檢視畫面屬性來影響樣式。下圖摘要列出各樣式設定方法的優先順序。金字塔圖表顯示系統套用樣式方法的順序 (由下往上)。舉例來說，如果您在主題中設定文字大小，然後在檢視區塊屬性中設定不同的文字大小，檢視區塊屬性就會覆寫主題樣式。

查看屬性

  • 使用檢視區塊屬性，為每個檢視區塊明確設定屬性。(檢視區塊屬性無法重複使用，樣式則可以)。
  • 您可以透過樣式或主題設定每個屬性。

適用於邊界、邊框間距或限制等自訂或一次性設計。

樣式

  • 使用樣式建立可重複使用的樣式資訊集合，例如字型大小或顏色。
  • 適合用於宣告應用程式中使用的少量常見設計。

將樣式套用至多個檢視區塊，覆寫預設樣式。舉例來說，您可以使用樣式製作樣式一致的標題或一組按鈕。

預設樣式

  • 這是 Android 系統提供的預設樣式。

主題

  • 使用主題為整個應用程式定義顏色。
  • 使用主題為整個應用程式設定預設字型。
  • 適用於所有檢視區塊，例如文字檢視區塊或圓形按鈕。
  • 用於設定可套用至整個應用程式的屬性。

文字外觀

  • 如要只使用文字屬性 (例如 fontFamily) 設定樣式，

Android 為檢視畫面設定樣式時，會套用主題、樣式和屬性的組合，您可以自訂這些項目。屬性一律會覆寫樣式或主題中指定的任何項目。樣式一律會覆寫主題中指定的任何項目。

以下螢幕截圖顯示淺色主題 (左側) 和深色主題 (右側) 的 GDG 搜尋器應用程式，以及自訂字型和標題大小。您可以透過多種方式實作這項功能，本程式碼研究室會介紹其中幾種做法。

在這項工作中，您將使用屬性設定應用程式版面配置中文字的標題樣式。

  1. 下載並執行 GDG 搜尋器入門應用程式。
  2. 請注意，主畫面有許多格式一致的文字，因此很難判斷網頁內容和重要資訊。
  3. 開啟 home_fragment.xml 版面配置檔案。
  4. 請注意，版面配置會使用 ConstraintLayout，將元素放在 ScrollView 內。
  5. 請注意，針對每個檢視區塊，限制和邊界版面配置屬性都會在檢視區塊中設定，因為這些屬性通常會針對每個檢視區塊和畫面自訂。
  6. 在 title 文字檢視區塊中，新增 textSize 屬性，將文字大小變更為 24sp。

    提醒您，sp 代表與比例無關的像素，這類像素會根據像素密度和使用者在裝置設定中設定的字型大小偏好設定進行縮放。Android 會在繪製文字時，判斷文字在畫面上的大小。請一律使用 sp 設定文字大小。
<TextView
       android:id="@+id/title"
...

android:textSize="24sp"
  1. 將 title 文字檢視區塊的 textColor 設為不透明的灰色，方法是將其設為 #FF555555 的 aRGB 值。
<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"
  1. 如要在 Android Studio 中開啟「Preview」分頁，請依序選取「View」>「Tool Windows」>「Preview」，或按一下 Layout Editor 右側邊緣的直向「Preview」按鈕。在預覽畫面中，確認標題是否為灰色，且比先前大，如下所示。

  1. 將副標題的顏色設為與標題相同，並縮小字型 18sp。(預設的 Alpha 值為 FF，也就是不透明。如果沒有要變更 Alpha 值，可以省略。)
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

  1. 在本程式碼研究室中，我們的目標是為應用程式設定樣式，使其既專業又帶點異想天開，但您可以隨意設定樣式。請嘗試使用 subtitle 文字檢視區塊的下列屬性。使用「預覽」分頁，查看應用程式外觀的變化。然後移除這些屬性。
<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"
  1. 別忘了先從 subtitle 檢視畫面中復原 textAllCaps、textStyle 和 background 屬性，再繼續操作。
  2. 執行應用程式，應該會發現畫面變得更好看。

在應用程式中使用字型時，您可以將必要的字型檔案併入 APK 中。雖然簡單，但通常不建議使用這個解決方案，因為這樣會導致應用程式下載及安裝時間變長。

Android 可讓應用程式在執行階段使用可下載字型 API 下載字型。如果應用程式使用的字型與裝置上的其他應用程式相同，Android 只會下載一次字型，節省裝置的儲存空間。

在這項工作中，您會使用可下載字型，為應用程式中採用主題的每個檢視區塊設定字型。

步驟 1：套用可下載的字型

  1. 在「設計」分頁中開啟 home_fragment.xml。
  2. 在「Component Tree」窗格中，選取 title 文字檢視區塊。
  3. 在「屬性」窗格中，找出 fontFamily 屬性。您可以在「All Attributes」部分中找到這個屬性，也可以直接搜尋。
  4. 點選下拉式箭頭。
  5. 捲動至「更多字型」 並選取。系統隨即會開啟「資源」視窗。

  1. 在「資源」視窗中，搜尋 lobster 或 lo。
  2. 選取結果中的「Lobster Two」。
  3. 在右側字型名稱下方，選取「建立可下載字型」圓形按鈕。按一下「確定」。
  4. 開啟 Android 資訊清單檔案。
  5. 在資訊清單底部附近，找出新的 <meta-data> 標記，其中 name 和 resource 屬性設為 "preloaded_fonts"。這個標記會告知 Google Play 服務，這個應用程式要使用已下載的字型。應用程式執行並要求 Lobster Two 字型時，如果裝置上沒有該字型，字型供應程式就會從網際網路下載字型。
<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>
  1. 在 res/values 資料夾中，找到 preloaded_fonts.xml 檔案，這個檔案定義的陣列會列出這個應用程式的所有可下載字型。
  2. 同樣地，res/fonts/lobster_two.xml 檔案也包含字型資訊。
  3. 開啟 home_fragment.xml，並在程式碼和預覽畫面中注意，Lobster Two 字型已套用至 title TextView，因此也套用至標題。

  1. 開啟 res/values/styles.xml，檢查為專案建立的預設 AppTheme 主題。目前看起來如下所示。如要將新的 Lobster Two 字型套用至所有文字，請更新這個主題。
  2. 請注意 <style> 代碼中的 parent 屬性。每個樣式標記都可以指定父項，並沿用父項的所有屬性。這段程式碼會指定 Android 程式庫定義的 Theme。MaterialComponents 主題，可指定所有項目，包括按鈕的運作方式和工具列的繪製方式。主題有合理的預設值，因此您可以只自訂所需部分。如上方的螢幕截圖所示，應用程式使用這個主題的 Light 版本，且沒有動作列 (NoActionBar)。
<!-- Base application theme. -->
<style name="AppTheme" 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>
</style>
  1. 在 AppTheme 樣式中，將字型系列設為 lobster_two。您需要同時設定 android:fontFamily 和 fontFamily，因為父項主題會同時使用這兩者。您可以在「設計」分頁中勾選 home_fragment.xml，預覽變更。
<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>
  1. 再次執行應用程式。所有文字都會套用新字型！開啟導覽匣並移至其他畫面，您會發現字型也套用至這些畫面。

步驟 2：將主題套用至標題

  1. 在 home_fragment.xml 中，找出具有 lobster_two 字型屬性的 title 文字檢視區塊。刪除 fontFamily 屬性並執行應用程式。由於佈景主題設定的字型系列相同，因此不會有任何變更。
  2. 將其他 fontFamily 屬性放回 title 文字檢視區塊：
    app:fontFamily="serif-monospace"
    請務必放在 app 空間中！
<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"
  1. 執行應用程式，您會發現檢視區塊的本機屬性會覆寫主題。
  1. 從 title 文字檢視區塊移除 fontFamily 屬性。

主題非常適合在應用程式中套用一般主題，例如預設字型和主色。屬性非常適合用來設定特定檢視區塊的樣式，以及新增邊界、邊框間距和限制等版面配置資訊，這些資訊通常會因螢幕而異。

樣式階層金字塔的中間是「樣式」。樣式是可重複使用的屬性「群組」，可套用至所選檢視區塊。在這項工作中，您將使用標題和副標題的樣式。

步驟 1：建立樣式

  1. 開啟 res/values/styles.xml。
  2. 在 <resources> 標記中，使用 <style> 標記定義新樣式，如下所示。
<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

命名樣式時，請務必將樣式名稱視為語意。請根據樣式的用途選取樣式名稱，而非根據樣式影響的屬性。舉例來說，請將這個樣式稱為 Title，而不是 LargeFontInGrey。應用程式中任何位置的標題都會使用這個樣式。按照慣例，TextAppearance 樣式稱為 TextAppearance.Name，因此在本例中，名稱為 TextAppearance.Title。

樣式有父項，就像主題可以有父項一樣。但這次樣式會擴充樣式，而不是擴充主題，也就是 TextAppearance.MaterialComponents.Headline6。這個樣式是 MaterialComponents 主題的預設文字樣式，因此擴充這個樣式時，您會修改預設樣式，而不是從頭開始。

  1. 在新樣式中定義兩個項目。在其中一個項目中，將 textSize 設為 24sp。在另一個項目中，將 textColor 設為之前使用的相同深灰色。
 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>
  1. 定義字幕的其他樣式。將其命名為 TextAppearance.Subtitle。
  2. 由於與 TextAppearance.Title 的唯一差異在於文字大小，因此請將這個樣式設為 TextAppearance.Title 的子項。
  3. 在 Subtitle 樣式中，將文字大小設為 18sp。以下是完成的樣式：
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

步驟 2：套用您建立的樣式

  1. 在 home_fragment.xml 中新增 TextAppearance。Title 樣式套用至 title 文字檢視區塊。刪除 textSize 和 textColor 屬性。

    主題會覆寫您設定的任何 TextAppearance 樣式。(程式碼研究室開頭的階層圖表顯示樣式套用順序)。使用 textAppearance 屬性將樣式套用為 TextAppearance，這樣 Theme 中設定的字型就會覆寫您在此處設定的字型。
<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"
  1. 此外，請將 TextAppearance.Subtitle 樣式新增至 subtitle 文字檢視區塊，並刪除 textSize 和 textColor 屬性。您也必須將這個樣式套用為 textAppearance，這樣主題中設定的字型就會覆寫您在此處設定的字型。
<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"
  1. 執行應用程式，文字現在會採用一致的樣式。

Android Studio 專案：GDGFinderStyles。
  • 在檢視區塊上使用主題、樣式和屬性，即可變更檢視區塊的外觀。
  • 主題會影響整個應用程式的樣式，並提供顏色、字型和字型大小的許多預設值。
  • 屬性會套用至設定該屬性的檢視區塊。如果樣式只適用於單一檢視區塊，例如邊框間距、邊界和限制，請使用屬性。
  • 樣式是屬性群組，可供多個檢視區塊使用。舉例來說，您可以為所有內容標題、按鈕或文字檢視畫面設定樣式。
  • 主題和樣式會沿用父項主題或樣式。您可以建立樣式階層。
  • 屬性值 (在檢視區塊中設定) 會覆寫樣式。樣式會覆寫預設樣式。樣式會覆寫主題。主題會覆寫 textAppearance 屬性設定的任何樣式。

  • 使用 <style> 和 <item> 標記，在 styles.xml 資源檔案中定義樣式。
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

使用可下載的字型，即可為使用者提供字型，同時不會增加 APK 大小。如要為檢視區塊新增可下載的字型，請按照下列步驟操作：

  1. 在「設計」分頁中選取檢視畫面，然後從 fontFamily 屬性的下拉式選單中選取「更多字型」。
  2. 在「資源」對話方塊中找到字型，然後選取「建立可下載字型」圓形按鈕。
  3. 確認 Android 資訊清單包含預先載入字型的中繼資料標記。

應用程式首次要求字型時，如果該字型尚未提供，字型供應程式會從網際網路下載。

Android 開發人員說明文件：

其他資源：

本節列出的作業可由課程講師指派給學習本程式碼研究室的學員。講師可自由採取以下行動：

  • 視需要指派作業。
  • 告知學員如何繳交作業。
  • 為作業評分。

講師可以視需求使用全部或部分建議內容，也可以自由指派任何其他合適的作業。

如果您是自行學習本程式碼研究室，不妨利用這些作業驗收學習成果。

回答問題

第 1 題

哪個標記可用來定義主題？

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

第 2 題

以下何者「不是」樣式的適當用途？

▢ 指定檢視區塊的限制。

▢ 指定標題的背景顏色。

▢ 統一不同檢視畫面的字型大小。

▢ 為一組檢視畫面指定文字顏色。

第 3 題

主題和樣式有何差異？

▢ 主題會套用至整個應用程式，但樣式可以套用至特定檢視畫面。

▢ 主題無法沿用自其他主題，但樣式可以沿用自其他樣式。

▢ 樣式無法沿用自其他樣式，但主題可以沿用自其他主題。

▢ 主題是由 Android 系統提供，樣式則是由開發人員定義。

第 4 題

如果應用程式中的 TextView 具有將字型大小設為 12sp 的 Theme、將字型大小設為 14sp 的已定義樣式，以及 16sp 的 fontSize 屬性，則畫面上顯示的字型大小為何？

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

開始下一個課程：10.2：質感設計、尺寸和顏色

如要查看本課程其他程式碼研究室的連結，請參閱 Android Kotlin 基礎知識程式碼研究室登陸頁面。