Kotlin Android 10.3 版：適合所有人的設計

本程式碼研究室是 Android Kotlin 基礎課程的一部分。使用程式碼研究室逐步完成程式碼課程後，您將能充分發揮本課程的潛能。所有課程程式碼研究室清單均列於 Android Kotlin 基礎程式碼研究室到達網頁。

簡介

無論是要讓大多數使用者使用應用程式，無論是為應用程式開發後的歡樂，還是基於商業目的，您都能使用。要達成這個目標，您需要設定多個維度。

  • 支援即時文字訊息語言。歐洲和許多其他語言會從左到右閱讀，而來自這些地區的應用程式通常也適合這些語言。從其他語言到右手 (例如阿拉伯文) 的其他語言都有許多其他語言，讓應用程式支援從右到左 (RTL) 的語言，吸引更多潛在目標對象。
  • 掃描無障礙功能。猜測其他人可能會使用您的應用程式，「無障礙功能檢查工具」應用程式可猜測您是否需要自行分析，並分析您的應用程式，進而找出可用於改善協助工具的平台。
  • 設計搭配 TalkBack 的 TalkBack 功能。視覺障礙是比一般使用者想像的更常見，而且許多使用者不只是使用盲人，而是使用螢幕閱讀器。內容說明是指螢幕閱讀器與螢幕元素互動時說出的詞組。
  • 支援夜間模式。對許多視障使用者而言，調整螢幕色彩可改善對比度，並協助應用程式以視覺化方式呈現應用程式的內容。Android 讓夜間模式更加簡單，因此您應一律支援夜間模式，為使用者提供預設螢幕色彩的簡單選擇。

在這個程式碼研究室中，您可以探索各個選項，並在 GDG Finder 應用程式中新增支援選項。

以及如何在 Android 應用程式中使用方塊。您可以透過方塊讓應用程式變得更加有趣，但同時仍能保持開啟。

須知事項

您應該很熟悉：

  • 如何建立具備活動和片段的應用程式，並在傳送資料的片段之間移動。
  • 使用檢視區塊和檢視群組來配置使用者介面，特別是 RecyclerView。
  • 如何將包括 ViewModel 在內的各項架構元件與建議架構搭配使用，以打造功能完善且效率卓越的應用程式。
  • 資料繫結、協同程式和處理滑鼠點擊的方式。
  • 如何使用 Room 資料庫在本機連上網際網路及快取資料。
  • 如何設定檢視屬性，以及如何從 XML 資源檔案中擷取資源以及使用資源。
  • 如何使用樣式和主題自訂應用程式外觀。
  • 如何使用 Material 元件、維度資源和自訂色彩。

課程內容

  • 如何讓應用程式可供最多使用者使用。
  • 如何讓應用程式支援由右至左 (RTL) 語言運作。
  • 如何評估應用程式的無障礙設計。
  • 如何運用內容說明改善應用程式的螢幕閱讀器使用體驗。
  • 如何使用方塊。
  • 如何讓應用程式使用深色模式。

執行步驟

  • 評估及擴充特定應用程式，讓應用程式支援 RTL 語言，藉此提升無障礙功能。
  • 請掃描您的應用程式，看看可改善的協助工具。
  • 使用圖片內容說明。
  • 瞭解如何使用可繪項目。
  • 在應用程式中新增使用夜間模式的功能。

GDG 搜尋器入門應用程式是根據您在本課程中學到的所有內容所建構而成。

這個應用程式使用 ConstraintLayout 設計出三個畫面。其中兩個螢幕只是版面配置檔案，用來探索 Android 裝置的顏色和文字。

第三個畫面是 GDG 搜尋器。GDG (又稱為 Google Developer Groups) 是由 Google 的技術開發人員所組成的社群，其中含有 Google 的技術，包括 Android。世界各地的 GDG 舉辦聚會、研討會、研究 Jam 和其他活動。

開發這個應用程式時，您需要處理實際 GDG 清單。搜尋器畫面會使用裝置的位置，依距離將 GDG 排序。

若您很幸運，且您所在的地區已經是 GDG，請查看我們的網站並報名參加他們的活動！GDG 活動是認識其他 Android 開發人員的絕佳方式，也能瞭解業界不適用的業界最佳做法。

以下螢幕截圖顯示您的應用程式從這個程式碼研究室開始到結束之間的變化。

書寫方向由左至右 (LTR) 和由右至左 (RTL) 語言的主要差異，在於顯示內容方向。UI 方向從 LTR 變更為 RTL (反之亦然) 通常稱為鏡像。鏡像可影響大多數的螢幕，包括文字、文字欄位圖示、版面配置，以及方向指示圖示 (例如箭頭)。其他項目則不會套用鏡像，例如數字 (時鐘、電話號碼)、沒有方向的圖示 (飛航模式、Wi-Fi)、播放控制項，以及大多數圖表和圖形。

全球有多達十億人使用即時文字訊息功能使用的語言。Android 開發人員遍佈世界各地，因此 GDG Finder 應用程式必須支援 RTL 語言。

步驟 1：新增 RTL 支援

在這個步驟中，您會讓 GDG Finder 應用程式支援即時文字訊息功能。

  1. 下載並執行 GDGFinderMaterial 應用程式，這是此程式碼研究室的入門應用程式，或從上一個程式碼研究室的最終程式碼繼續進行。
  2. 開啟 Android 資訊清單。
  3. 在 <application> 區段中，加入下列程式碼以指定應用程式支援 RTL。
<application
        ...
        android:supportsRtl="true">
  1. 在「設計」分頁中開啟 activity_main.xml。
  2. 從 [Locale for Preview] (預覽預覽) 下拉式選單中，選擇 [向右預覽 (由右至左)]。(如果找不到此選單，請展開窗格或關閉「屬性」窗格，即可找到這個選單)。

  1. 在預覽中，您會看到「GDG Finder」標頭已移至右側，而其餘畫面大致維持不變。整體來說，這個畫面可供傳送。不過，文字檢視的對齊方式現在是靠左對齊，而不是靠右對齊。

  1. 如要在裝置上執行此作業，請在裝置或模擬器的 [設定] 的 [開發人員選項] 中選取 [強制使用 RTL 版面配置]。(如果您需要開啟 [開發人員選項]，請找出 [版本號碼]，然後按一下該組編號，直到畫面顯示您是開發人員。選項會因裝置和 Android 系統版本而異)。

  1. 執行應用程式，然後確認裝置的主畫面和「預覽」畫面完全相同。請注意，FAB 現已切換至左側，而 [漢堡] 選單移到右側！
  2. 在應用程式中開啟導覽匣，然後前往「Search」(搜尋) 畫面。如下圖所示，圖示仍然位於左側，不會顯示任何文字。結果則是圖示左側有文字。這是因為程式碼在檢視屬性和版面配置限制中使用左/右畫面參照。

步驟 2：使用開始和結束部分，而非左右

「左」和「右」在螢幕 (當你面向螢幕時) 不會改變，即使文字方向不同也不受影響。舉例來說，layout_constraintLeft_toLeftOf 一律將元素左側限制在畫面左側。以您應用程式中的案例來說，文字在 RTL 語言中會在螢幕上關閉 (如上方螢幕截圖所示)。

如要修正這個問題，請改用「左」和「右」和「Start」和「End」。這項術語會將文字的起始位置和文字結尾，依文字目前的方向妥善排列，藉此將邊界和版面配置顯示在畫面上的正確區域。

  1. Open list_item.xml。
  2. 將「Left」和「Right」的參照替換為 Start 和 End。
app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"
  1. 將 ImageView 的 layout_marginLeft 替換為 layout_marginStart。這會將邊界移動到正確的位置，將圖示從螢幕邊緣移開。
<ImageView
android:layout_marginStart="
?
  1. 開啟 fragment_gdg_list.xml。查看「Preview」窗格中的 GDG 清單。請注意，圖示仍處於相反的方向，因為鏡射功能已經鏡射 (如果沒有鏡射圖示，請確定您仍在從右至左預覽)。根據 Material Design 指南規定，圖示不得鏡射。
  2. 開啟 res/drawable/ic_gdg.xml。
  3. 在 XML 程式碼的第一行中找出並刪除 android:autoMirrored="true"，即可停用鏡像功能。
  4. 請查看預覽或再次執行應用程式，然後開啟「搜尋 GDG」畫面。版面配置應該已經修正！

步驟 3：讓 Android Studio 為您代勞

在先前的練習中，您已踏出支援 RTL 語言的第一步。幸好，Android Studio 可以掃描您的應用程式，並為應用程式建立許多基本資訊。

  1. 在 list_item.xml 中，將 TextView 中的 layout_marginStart 改回 layout_marginLeft，讓掃描器尋找要尋找的內容。
<TextView
android:layout_marginLeft="@dimen/spacing_normal"
  1. 在 Android Studio 中選擇 [Replex > Add RTL support 盡可能使用]，並勾選更新資訊清單的核取方塊，以及使用起始和結束屬性的版面配置檔案。

  1. 在「重構預覽」窗格中找出「app」資料夾，然後展開至所有詳細資料。
  2. 請注意，在應用程式資料夾下方，您剛剛變更的 layout_marginLeft 列為要重構的程式碼。

  1. 請注意，預覽畫面也會列出系統和程式庫檔案。在 layout 和 layout-watch-v20 和其他不屬於 app 的資料夾上按滑鼠右鍵，然後在內容選單中選擇 [排除]。

  1. 現在就進行重構工作吧！(如果您看到系統檔案彈出式視窗，請務必排除不屬於 app 程式碼的所有資料夾)。
  1. 請注意，layout_marginLeft 已改回 layout_marginStart。

步驟 3：探索各地區的資料夾

您剛剛已經變更應用程式的預設語言方向。如果是實際執行的應用程式，您可以將 strings.xml 檔案傳送至翻譯工具，以翻譯為新的語言。在這個程式碼研究室中，應用程式提供西班牙文的 strings.xml 檔案 (我們利用 Google 翻譯服務產生翻譯，因此不盡完美)。

  1. 在 Android Studio 中，將專案檢視切換至 [專案檔案]。
  2. 展開 res 資料夾，並留意 res/values 和 res/values-es 的資料夾。資料夾名稱中的「quo」是西班牙文的語言代碼。values-"language code" 資料夾包含每種支援語言的值。未包含副檔名的 values 資料夾包含預設的套用資源。

  1. 在 values-es 中開啟 strings.xml，然後注意所有字串皆為西班牙文。
  2. 開啟 Android Studio，然後在「設計」分頁中開啟 activity_main.xml。
  3. 在「預覽語言」下拉式選單中，選擇 [西班牙文]。您的文字現在應為西班牙文。

  1. [選用]如果您熟悉 RTL 語言，請建立該語言的 values 資料夾和 strings.xml，然後測試檔案在您裝置上的顯示方式。
  2. [選用] 變更裝置的語言設定並執行應用程式。請勿將裝置變更為您沒有閱讀的語言，因為這可能會讓你更難以復原應用程式！

在上一項工作中，您以手動方式變更應用程式，然後使用 Android Studio 檢查其他的 RTL 改善項目。

無障礙掃描器應用程式是讓您的應用程式順利存取的最佳利器。這項服務會在您的目標裝置上掃描您的應用程式，並提出改善建議，例如將觸控目標放大、增加對比，以及提供圖片說明，讓您的應用程式更容易使用。「協助工具掃描工具」是由 Google 開發的，可透過 Play 商店安裝。

步驟 1：安裝並執行無障礙功能檢查工具

  1. 開啟 Play 商店，並在必要時登入帳戶。您可以在實體裝置或模擬器上執行這項作業。本程式碼研究室使用模擬器。
  1. 在 Play 商店中搜尋「Accessibility Scanner by Google LLC」。掃描時需要取得 Google 核發的正確應用程式，因為任何掃描作業都需要大量權限！

  1. 在模擬器上掃描掃描器。
  2. 安裝完成後，按一下 [Open] (開啟)。
  3. 按一下 [開始使用]。
  4. 按一下 [確定]，即可在「設定」中啟動無障礙功能檢查工具。

  1. 按一下無障礙功能檢查工具，前往裝置的「無障礙設定」設定。

  1. 按一下 [使用服務] 即可啟用這項服務。

  1. 按照畫面上的指示操作並授予所有權限。
  2. 接著，按一下 [我知道了] 並返回主畫面。畫面上可能會顯示藍色按鈕和勾號。按下這個按鈕，可在前景測試應用程式。您可以用拖曳的方式調整按鈕的位置。這個按鈕會顯示在任何應用程式的上方，因此您隨時可以觸發測試。

  1. 開啟或執行您的應用程式。
  2. 按一下藍色按鈕並接受其他安全性警告和權限。

初次按下「無障礙功能檢查工具」圖示時，應用程式會要求取得相關權限，以便顯示在畫面上的所有內容。這似乎是相當可怕的權限，而且是

您幾乎不需要授予這項權限，因為這項權限可讓應用程式讀取您的電子郵件，甚至是取得銀行帳戶資訊！不過，協助工具掃描工具必須執行該功能，才能讓使用者進行檢查，這就是應用程式需要這項權限的理由。

  1. 按一下藍色按鈕並等待分析完成。您會看到下方的螢幕截圖，標題和 FAB 則以紅色框住。這代表你針對這個畫面改善了無障礙功能的兩個建議。

  1. 按一下 GDG 搜尋器周圍的方塊。這會開啟一個顯示額外資訊的窗格，如下所示 (指出圖片對比度的問題)。
  2. 展開「圖片對比度」資訊，這項工具會提供建議建議。
  3. 按一下右側的箭頭，取得下一個項目的資訊。

  1. 在您的應用程式中，前往「申請 GDG」畫面，然後使用「無障礙功能檢查工具」應用程式進行掃描。這會提供許多建議，如下圖所示。12 為準確值。為公平起見，部分重複的項目與類似的項目重複。
  2. 按一下底部工具列的「」圖示，即可取得所有建議清單，如下圖所示。您在本程式碼研究室中解決了所有這些問題。

Android 無障礙套件是 Google 推出的應用程式，其中提供的工具有助於改善應用程式的無障礙設計。其中包含 TalkBack 等工具。TalkBack 螢幕閱讀器提供了聽覺、觸動和互動朗讀功能，讓使用者不用看著裝置即可瀏覽及使用內容。

結果顯示 TalkBack 不僅是失明人士使用，也有很多視障使用者會使用 TalkBack。有些人甚至只是想好好休息，

因此，協助工具適合所有人！在這項工作中，您可以試用 TalkBack 並更新應用程式，以便搭配這項功能使用。

步驟 1：安裝並執行無障礙工具套件

TalkBack 已預先安裝許多實體裝置，但您必須在模擬器上安裝。

  1. 開啟 Play 商店。
  2. 找出協助工具套件。請確定 Google 是正確的應用程式。
  3. 如果尚未安裝，請安裝「無障礙套件」。
  4. 如要在裝置上啟用 TalkBack，請前往 [設定] > [協助工具]，然後選取 [使用服務] 開啟 TalkBack。如同協助工具掃描器，TalkBack 需要權限才能讀取畫面上的內容。接受權限要求後，TalkBack 會帶您瀏覽教學課程清單，讓您瞭解如何有效使用 TalkBack。
  5. 如果沒有其他原因，請在這裡暫停，並觀看教學課程 (瞭解如何瞭解如何在完成後關閉 TalkBack)。
  6. 如要離開教學課程，請按一下 [返回] 按鈕選取，然後再在畫面上的任何位置輕觸兩下。
  1. 探索如何搭配 TalkBack 使用 GDG Finder 應用程式。請注意，TalkBack 無法為您提供有關畫面或控制項的實用資訊。您會在下一次練習中修正這個問題。

步驟 2：新增內容說明

內容描述元是用來說明觀看意義的描述性標籤。大部分的觀看次數都應該有內容說明。

  1. 啟用 GDG Finder 應用程式並啟用 Talback 後，瀏覽至 [Apply to running GDG] (套用 GDG 裝置) 畫面。
  2. 輕觸主要圖片，完全不會發生任何事。
  3. 開啟 add_gdg_fragment.xml。
  4. 在 ImageView 中，新增內容描述元屬性 (如下所示)。stage_image_description 字串是由 strings.xml 提供。
android:contentDescription="@string/stage_image_description"
  1. 執行應用程式。
  2. 前往 [申請以執行 GDG]，然後按一下圖片。現在，你應該會聽見圖片的簡短說明。
  3. [選用] 為這個應用程式中的其他圖片新增內容說明。在正式版應用程式中，所有圖片都必須提供內容說明。

步驟 3：在可編輯的文字欄位中新增提示

如果是可編輯的元素 (例如 EditText)，您可以在 XML 中使用 android:hint，協助使用者瞭解該輸入什麼內容。提示一律會顯示在使用者介面中，因為它是輸入欄位中的預設文字。

  1. 仍在 add_gdg_fragment.xml 中。
  2. 請參考下方的程式碼來新增內容說明和提示。

新增至「textViewIntro」：

android:contentDescription="@string/add_gdg"

分別加入編輯文字：

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"
  1. 在「labelTextWhy」中加入內容說明。
android:contentDescription="@string/motivation"
  1. 在EditTextWhy中加入提示。為編輯方塊加上標籤後，在標籤中新增內容說明，並提供方塊提示。
android:hint="@string/enter_motivation"
  1. 為提交按鈕新增內容說明。所有按鈕都必須說明按下按鈕後會發生什麼事。
android:contentDescription="@string/submit_button_description"
  1. 在啟用 Talback 的情況下執行應用程式，並填寫表單以執行 GDG。

步驟 4：建立內容群組

針對 TalkBack 應視為群組的控制項，您可以使用內容分類。相關的內容會彙整在一起，這樣一來，輔助技術的使用者就不必再滑動、掃描或等待探索，即可完整掌握畫面上的所有資訊。但這不會影響控制項的顯示方式。

如要將 UI 元件分組，可將這些元件納入 ViewGroup 中，例如 LinearLayout。在 GDG Finder 應用程式中，labelTextWhy 和 editTextWhy 元素是語意分組的好選擇，因為這些元素在語義上都屬於同一個群組。

  1. 開啟 add_gdg_fragment.xml。
  2. 在 LabelTextWhy 和 EditTextWhy 左右繞行 LinearLayout 即可建立內容群組。複製並貼上下方的程式碼。這個 LinearLayout 已包含您需要的樣式。(請確認 button 是「結束」LinearLayout)。
<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>
  1. 選擇 [程式碼 &&t;重新格式化程式碼]，以正確縮排所有程式碼。
  2. 移除「labelTextWhy」和「editTextWhy」的所有版面配置邊界。
  3. 在 labelTextWhy 中，將 layout_constraintTop_toTopOf 限制變更為 contentGroup。
app:layout_constraintTop_toTopOf="@+id/contentGroup" />
  1. 在 editTextWhy 中，將 layout_constraintBottom_toBottomOf 限制變更為 contentGroup。
app:layout_constraintBottom_toBottomOf="@+id/contentGroup"
  1. 將 EditTextRegion 和 Button 限制在 contentGroup 以消除錯誤。
app:layout_constraintBottom_toTopOf="@+id/contentGroup"
  1. 為LinearLayout加上邊界。視需要擷取這個邊界做為維度。
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

如需協助，請根據解決方案程式碼中的 add_gdg_fragment.xml 檢查程式碼。

  1. 執行您的應用程式，並瀏覽 TalkBack 的「申請執行 GDG」畫面。

步驟 5：新增使用中的區域

目前，提交按鈕的標籤為 [確定]。如果按鈕在提交表單前有一個標籤和說明，比較有利於使用者點選並提交表單後，才將它變更為其他標籤和內容說明。您可以使用使用中的區域進行這項操作。

即時區域會提供給無障礙服務，通知使用者是否應在檢視畫面變更時接收通知。舉例來說，告訴使用者密碼不正確或網路錯誤是讓應用程式更易於存取的絕佳方法。在此範例中，為了保持簡單，您會在提交按鈕變更狀態時通知使用者。

  1. 開啟 add_gdg_fragment.xml。
  2. 使用所提供的 submit 字串資源，將按鈕的文字指派變更為「提交」。
android:text="@string/submit"
  1. 設定 android:accessibilityLiveRegion 屬性，即可在按鈕中新增使用中的區域。輸入時，您可以選用多個值。您可以依據變更的重要性，選擇是否要中斷使用者。設定「組式」值時，協助工具服務會中斷進行中的語音操作，立即朗讀這個視圖的變更內容。如果您將這個值設為「none」，則不會發布任何變更。設為「政治」設定，無障礙服務會發布變更，但會等候一段時間。將值設為「polite」。

android:accessibilityLiveRegion="polite"
  1. 在 add 套件中，開啟 AddGdgFragment.kt。
  2. 在 showSnackBarEvent Observer內，當您完成 SnackBar 操作後，為按鈕設定新的內容說明和文字。
binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)
  1. 執行您的應用程式，然後按一下按鈕。很抱歉，按鈕和字型太小！

步驟 6：修正按鈕樣式

  1. 在 add_gdg_fragment.xml 中，將按鈕的 width 和 height 變更為 wrap_content，讓完整的標籤可供檢視，且按鈕大小恰當。
android:layout_width="wrap_content"
android:layout_height="wrap_content"
  1. 刪除按鈕中的 backgroundTint、textColor 和 textSize 屬性，讓應用程式採用更合適的主題樣式。
  2. 刪除 textViewIntro 中的 textColor 屬性。主題顏色應呈現最佳對比效果。
  3. 執行應用程式。請注意，還有 [實用] 按鈕。按一下 [Submit] (提交)，然後注意到它會變更為 [Done] (完成)。

方塊是代表某項屬性、文字、實體或動作的精簡元素。可讓使用者輸入資訊、選取選項、篩選內容或觸發動作。

Chip 小工具是 ChipDrawable 周圍的精簡檢視包裝函式，其中包含所有版面配置和繪圖邏輯。其他的邏輯適用於觸控、滑鼠、鍵盤及協助工具導覽。系統會將主要方塊和關閉圖示視為不同的邏輯子檢視，其中包含專屬的瀏覽行為和狀態。

方塊則使用可繪畫。Android 繪圖您可以把圖片當成繪圖使用，例如 GDG 應用程式中的圖片。此外，您還可以使用向量繪圖來畫出可想像的事物。另外還有一個稱為 9-patch 可繪項目的可縮放可繪製，在本程式碼研究室中並未涵蓋在內。Drawable/ic_gdg.xml 中的 GDG 標誌是另一個可繪項目。

可繪緣不是視圖，因此您不能直接繪製在 ConstraintLayout 內，您需要將其放入 ImageView 內。您也可以使用可繪項目來為文字檢視或按鈕提供背景，背景則在文字後方繪圖。

步驟 1：在 GDG 清單中新增方塊

下方勾選的方塊使用三個可繪項目。背景和勾號都是可繪製的。只要輕觸方塊，即可產生波紋特效，這種特效是使用特殊的 RippleDrawable 技術，可在顯示狀態變化時產生波紋效果。

在這項工作中，您將方塊新增至 GDG 清單，並在選取方塊時變更方塊狀態。在本練習中，您可以在「搜尋」畫面上方新增一列方塊，稱為「方塊」。每個按鈕都會篩選 GDG 清單，讓使用者只會收到來自指定區域的結果。選取按鈕後，按鈕會變更背景並顯示勾號。

  1. 開啟 fragment_gdg_list.xml。
  2. 在 HorizontalScrollView. 的 singleLine 屬性中，將 com.google.android.material.chip.ChipGroup 設為 true，讓所有方塊對齊水平水平的捲軸。將 singleSelection 屬性設為 true，這樣一次只能選取群組中一個方塊。這裡是程式碼。
<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>
  1. 在 layout 資料夾中，建立名為 region.xml 的新版面配置資源檔案，以定義單一 Chip 的版面配置。
  2. 在 region.xml 中，按照以下方式將所有的程式碼換成一個 Chip 的版面配置。請注意，這個 Chip 是 Material 元件。另請注意，設定 app:checkedIconVisible 屬性即可取得勾號。您會收到遺漏 selected_highlight 顏色的錯誤訊息。
<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>
  1. 如要建立遺漏的 selected_highlight 顏色，請將滑鼠遊標移到 selected_highlight 上，開啟意圖選單，然後為所選醒目顯示內容建立色彩資源。預設選項沒有問題，只要按一下 [OK] 即可。系統會在 res/color 資料夾中建立檔案。
  2. 開啟 res/color/selected_highlight.xml。這個顏色狀態清單是以 <selector> 編碼，可為不同狀態提供不同顏色。各狀態及相關顏色均編碼為 <item>。如要進一步瞭解這些色彩，請參閱色彩主題設定。
  1. 在 <selector> 中，將預設顏色為 colorOnSurface 的項目新增至狀態清單。在州/省清單中，請務必涵蓋所有州。其中一種方法就是使用預設顏色。
<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>
  1. 在預設顏色上方，新增顏色為 colorPrimaryVariant 的 item，並將該變數限制在所選狀態為 true 時。狀態清單由上至下完成，例如案例陳述式。如果沒有任何狀態相符，系統就會套用預設狀態。
<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

步驟 2：顯示方塊方塊

GDG 應用程式會建立方塊清單，用於顯示具備 GDG 的區域。選取晶片後，應用程式會篩選搜尋結果，只顯示該地區的 GDG 搜尋結果。

  1. 在 search 套件中開啟 GdgListFragment.kt。
  2. 在 onCreateView() 中，就在 return 陳述式的上方，在 viewModel.regionList 上新增觀察器並覆寫 onChanged()。當檢視模型提供的地區清單有所變更時，必須重新建立方塊。新增陳述式，在提供的 data 為 null 時立即傳回。
viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})
  1. 在onChanged()的空值測試中，將 binding.regionList 指派給名為 chipGroup 的新變數以快取 regionList。
val chipGroup = binding.regionList
  1. 下面是一個新的layoutInflator，用於激活chipGroup.context的芯片。
val inflator = LayoutInflater.from(chipGroup.context)
  1. 清除並重建您的專案，以清除資料繫結錯誤。

您現在可以在氣泡機下方建立實際的晶片，為 regionList 中的各個區域分別建立一個。

  1. 建立可存放所有方塊的變數 children。請為 data 中傳送的票證指派對應函式，以建立並傳回每個方塊。
val children = data.map {}
  1. 在 lambda 的地圖中，為每個 regionName 建立一個方塊並膨脹。以下是完成的代碼。
val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}
  1. 在 lambda 內，於傳回 chip 之前，新增點擊接聽器。按一下 [chip] 時，將其狀態設為 checked。在 viewModel 中呼叫 onFilterChanged()，以觸發此篩選器結果的一系列事件。
chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}
  1. 從 lamba 的結尾，移除目前所有的 chipGroup 檢視畫面，然後將所有方塊從 children 加入 chipGroup。(您無法更新方塊，因此必須移除並重新建立 chipGroup 的內容)。
chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

您完成的觀察員應如下所示：

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})
  1. 執行您的應用程式並搜尋 GDGS，以開啟「Search」(搜尋) 畫面以使用新的方塊。當您按一下每個方塊，應用程式下方會顯示篩選器群組。

夜間模式可讓應用程式變為深色主題，例如當裝置設定設為啟用夜間模式時。在夜間模式下，應用程式會將預設淺色背景變更為深色，並變更其他所有畫面元素。

步驟 1：啟用夜間模式

如要提供應用程式的深色主題，請將主題從「Light」主題變更為「DayNight」。「DayNight」主題會以淺色或深色顯示 (視模式而定)。

  1. 在 styles.xml, 中，將AppTheme的家長主題從Light變更為DayNight。
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  1. 在 MainActivity 的 onCreate() 方法中，呼叫 AppCompatDelegate.setDefaultNightMode() 以程式輔助方式開啟深色主題。
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
  1. 執行應用程式，並確認應用程式已切換成深色主題。

步驟 2：自行產生深色主題調色盤

如要自訂深色主題，請使用 -night 限定詞建立資料夾，以使用深色主題。舉例來說，如要以夜間模式使用特定顏色，可以建立名為「values-night」的資料夾。

  1. 造訪 material.io 色彩挑選器工具並建立夜間主題調色盤。舉例來說，您可以選用深藍色。
  2. 產生並下載 colors.xml 檔案。
  3. 切換至 [專案檔案] 檢視畫面，即可列出專案中的所有資料夾。
  4. 找出並展開「res」資料夾。
  5. 建立 res/values-night 資源資料夾。
  6. 將新的 colors.xml 檔案新增至 res/values-night 資源資料夾中。
  7. 執行應用程式 (但仍啟用夜間模式)，且應用程式應使用您為 res/values-night 定義的新顏色。請注意，方塊採用新的次要顏色。

Android Studio 專案：GDGFinderFinal。

支援即時文字訊息語言

  • 在 Android 資訊清單中，設定 android:supportsRtl="true"。
  • 您可以在模擬器中預覽 RTL，並使用自己的語言檢查螢幕版面配置。在裝置或模擬器中開啟 [設定]，然後在 [開發人員選項] 中選取 [強制使用 RTL 版面配置]。
  • 將「Left」和「Right」的參照替換為 Start 和 End。
  • 刪除 android:autoMirrored="true"，停用可繪製的鏡像功能。
  • 選擇 [重構 > 新增 RTL 支援]，讓 Android Studio 為您代勞。
  • 使用 values-"language code" 資料夾來儲存特定語言的資源。

掃描無障礙功能

設計搭配內容說明的 TalkBack 設計

  • 安裝 Google 提供的 Android 無障礙套件，其中包含 TalkBack。
  • 在所有 UI 元素中加入內容說明。例如：
    android:contentDescription="@string/stage_image_description"
  • 如果是可編輯的元素 (例如 EditText)，請在 XML 中使用 android:hint 屬性，向使用者顯示要輸入的內容提示。
  • 將相關元素納入檢視群組，以建立內容群組。
  • 建立即時區域，為使用者提供android:accessibilityLiveRegion的額外意見回饋。

使用方塊導入篩選器

  • 晶片是一種代表元素、文字、實體或動作的精簡元素。
  • 如要建立方塊方塊，請使用 com.google.android.material.chip.ChipGroup。
  • 定義一個 com.google.android.material.chip.Chip 的版面配置。
  • 如果您希望方塊改變顏色，請以含有狀態訊息的 <selector> 來提供顏色狀態清單：
    <item android:color="?attr/colorPrimaryVariant"
    android:state_selected="true" />
  • 在檢視模型的資料中加入觀察器，將方塊繫結至即時資料。
  • 如要顯示方塊，請為晶片群組建立內嵌器：
    LayoutInflater.from(chipGroup.context)
  • 可建立方塊、新增會觸發所需動作的點擊事件監聽器，再將方塊新增至方塊群組。

支援深色模式

  • 使用DayNight AppTheme 支援深色模式。
  • 您可以透過程式設定深色模式：
    AppCompatDelegate.setDefaultNightMode()
  • 建立 res/values-night 資源資料夾，為深色模式提供自訂顏色和值。

Android 開發人員說明文件：

其他資源：

這個部分會列出在代碼研究室中，受老師主導的課程作業的可能學生作業。由老師自行決定要執行下列動作：

  • 視需要指派家庭作業。
  • 告知學生如何提交家庭作業。
  • 批改家庭作業。

老師可視需要使用這些建議，並視情況指派其他合適的家庭作業。

如果您是自行操作本程式碼研究室，歡迎透過這些家庭作業來測試自己的知識。

第 1 題

如要支援 RTL 語言，下列何者為必要條件？

▢ 將 Left 和 Right 換成 Start 和 End

▢ 變更為即時文字訊息語言

▢ 確認所有圖示皆使用 android:autoMirrored="true"

▢ 提供內容說明

第 2 題

大多數 Android 裝置內建下列哪些無障礙工具？

▢ TalkBack

▢ 無障礙功能檢查工具

▢ 使用 Android Studio 時，重構 > 盡可能新增即時文字訊息支援功能

▢ Lint

第 3 題

以下為方塊使用敘述何者正確？

▢ 已加入 ChipGroup 方塊。

▢ 您可以為 ChipGroup 提供顏色狀態清單。

▢ 方塊是一種精簡元素，代表輸入、屬性或動作。

▢ 如果您的應用程式使用方塊，您就必須一律啟用 DarkTheme。

第 4 題

哪種主題可讓你設定深色和淺色模式的樣式？

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

第 5 題

什麼是即時區域？

▢ 內含使用者重要資訊的節點

▢ 畫面上的區域會根據 Material 規範變更形狀

▢ 允許串流播放的影片檢視畫面

▢ 可繪製的動畫可繪項目