除了軟體輸入法 (例如螢幕小鍵盤) 之外,Android 也支援連接至裝置的實體鍵盤。鍵盤提供方便的文字輸入模式,讓使用者能夠瀏覽及與應用程式互動。雖然大多數手持裝置 (例如手機) 都以觸控為主要互動模式,但平板電腦和類似裝置相當受歡迎,許多使用者都喜歡在這些裝置上連接鍵盤配件。
隨著越來越多 Android 裝置提供這類體驗,您必須對應用程式進行最佳化,以便支援透過鍵盤進行互動。本文將說明如何改善鍵盤的瀏覽體驗。
測試應用程式
由於 Android 系統預設會啟用大部分必要的行為,因此使用者可能已經可以使用鍵盤瀏覽您的應用程式。
由 Android 架構提供的所有互動式小工具 (例如 Button
和 EditText
) 皆可聚焦。這表示使用者可以使用控制裝置 (例如方向鍵或鍵盤) 進行瀏覽,且每個小工具在獲得輸入焦點時,都會發光或以其他方式變更外觀。
如要測試應用程式,請執行下列程序:
- 在提供硬體鍵盤的裝置上安裝應用程式。
如果沒有鍵盤的硬體裝置,請連接藍牙鍵盤或 USB 鍵盤。
您也可以使用 Android 模擬器:
- 在 AVD Manager 中,按一下「New Device」,或選取現有設定檔並按一下「Clone」。
- 在隨即顯示的視窗中,確認「鍵盤」和「方向鍵」已啟用。
- 如要測試應用程式,請只使用 Tab 鍵瀏覽 UI。確認每個 UI 控制項都能如預期獲得焦點。
找出焦點以非預期方式移動的任何情況。
- 請從應用程式開頭重新開始,並使用方向控制項 (例如鍵盤上的方向鍵) 瀏覽 UI。在 UI 中,針對每個可聚焦的元素,按下「向上」、「向下」、「向左」和「向右」。
找出焦點以非預期方式移動的任何情況。
如果您發現使用 Tab 鍵或方向控制項進行導覽的效果不如預期,請指定版面配置中焦點必須所在的位置,如後續章節所述。
處理分頁導覽
當使用者使用鍵盤的 Tab 鍵瀏覽應用程式時,系統會根據元素在版面配置中顯示的順序,在元素之間傳遞輸入焦點。舉例來說,如果您使用相對版面配置,而螢幕上的元素順序與檔案中的順序不同,則可能需要手動指定焦點順序。
舉例來說,在下列版面配置中,兩個按鈕會對齊右側,文字欄位則會對齊第二個按鈕的左側。如要將焦點從第一個按鈕傳遞至文字欄位,再傳遞至第二個按鈕,版面配置需要使用 android:nextFocusForward
屬性,明確定義每個可聚焦元素的焦點順序。
<androidx.constraintlayout.widget.ConstraintLayout ...> <Button android:id="@+id/button1" android:nextFocusForward="@+id/editText1" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" ... /> <Button android:id="@+id/button2" android:nextFocusForward="@+id/button1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/button1" ... /> <EditText android:id="@id/editText1" android:nextFocusForward="@+id/button2" app:layout_constraintBottom_toBottomOf="@+id/button2" app:layout_constraintRight_toLeftOf="@id/button2 ... /> ... </androidx.constraintlayout.widget.ConstraintLayout>
焦點現在會根據畫面上的顯示方式,從 button1
移動到 button2
,再移動到 editText1
,而非從 button1
移動到 button2
,再移動到 editText1
。
處理方向導覽
使用者也可以使用鍵盤上的方向鍵瀏覽應用程式,這與使用方向鍵盤或軌跡球瀏覽時的行為相同。系統會根據畫面上檢視畫面的版面配置,提供「最佳推測」結果,指出在特定方向應將焦點設為哪個檢視畫面。不過,系統有時會猜錯。
如果系統在特定方向導覽時未將焦點傳遞至適當的檢視畫面,請使用下列屬性指定必須接收焦點的檢視畫面:
每個屬性都會指定下一個檢視畫面,以便在使用者朝該方向瀏覽時接收焦點,這由檢視畫面 ID 指定。如以下範例所示:
<Button android:id="@+id/button1" android:nextFocusRight="@+id/button2" android:nextFocusDown="@+id/editText1" ... /> <Button android:id="@id/button2" android:nextFocusLeft="@id/button1" android:nextFocusDown="@id/editText1" ... /> <EditText android:id="@id/editText1" android:nextFocusUp="@id/button1" ... />
其他資源
請參閱下列相關資源: