將使用者介面轉移為回應式的版面配置

Android 應用程式必須能夠支援不斷擴大的裝置外型規格環境。應用程式的使用者介面必須要能夠支援各種螢幕大小、螢幕方向和裝置狀態。

回應式使用者介面的重點圍繞在確保靈活性和連續性。

靈活性是指版面配置可充分運用空間,並在可用空間變更時進行調整。調整則可以有多種形式:單純調大單一檢視畫面的大小、重新調整檢視畫面的位置,使其更容易存取、顯示或隱藏其他檢視畫面,或上述功能的組合。

連續性是指在切換特定視窗大小時,能提供流暢的使用者體驗。無論使用者目前的參與體驗如何,前提是不能中斷。由於變更大小可能會導致刪除,以及重新建立整個檢視區塊階層,因此很重要的一點在於確保使用者不會失去空間或資料。

應避免的事項

避免根據實體、硬體的值來決定版面配置。您可能會根據固定的值做出決定,但在許多情況下,這些值並不代表使用者介面可以使用的空間。

在平板電腦上可能以多視窗模式執行,這意味著應用程式會與另一個應用程式分享螢幕畫面。在 Chrome 作業系統中,應用程式可能位於可調整大小的視窗中。甚至可能會有多個實體螢幕,例如可折疊式裝置或具有多個螢幕的裝置。在這些情況下,實體螢幕的大小與決定如何顯示內容無關。

多部裝置顯示不同大小的應用程式視窗。
圖 1 視窗大小會與實體裝置或螢幕大小不同。

基於同樣的原因,請避免將應用程式鎖定在特定的方向或長寬比。雖然裝置本身可能有特定的方向,然而您的應用程式可能會根據其視窗大小而採用不同的方向。舉例來說,橫向的平板電腦在多個視窗模式下時,應用程式可能會以直向顯示,因為其高度大於寬度。

此外,也請避免判斷裝置是手機或平板電腦。 要認定是否為平板電腦會較為主觀:是基於特定大小、長寬比,還是大小/長寬比兩者?隨著新的外型規格不斷變化,這些假設很容易發生變化,而這些差異也顯得沒有意義。

與其進行上述任何動作,請改為使用中斷點和視窗大小類別。

中斷點和視窗大小類別

實際分配給應用程式的螢幕部分即為應用程式的視窗。它可以佔滿整個螢幕或部分螢幕,因此在為應用程式版面配置做出整體的決策時,請以視窗大小為依據。

在為多種板型規格進行設計時,請找出這些大方向決策在各個方向上的臨界值。針對這一點,質感設計指南提供了寬度和高度的中斷點,您可以用來將原始大小對應至各種標準化群組,也就是視窗大小類別的內容。由於垂直捲動非常普遍,因此大多數應用程式重點放在寬度大小類別上,因此大部分應用程式只需處理幾個中斷點,就能針對各種螢幕大小進行最佳化。(若要進一步瞭解視窗大小類別,請參閱支援不同螢幕大小。)

永久性的 UI 元素

質感設計版面配置指南定義了用於應用程式列、瀏覽和內容的區域。一般來說,前兩者屬於永久性的使用者介面元素,位於(或非常接近)檢視區塊階層的根層級。請注意,「永久性」不代表該檢視畫面會持續可見,而是指可以停留在某個地方,而其他內容檢視畫面可能會移動或改變。舉例來說,導覽元素可能位於滑動導覽匣,而其目前不在螢幕中,但導覽匣始終位於該位置。

永久性元素可以是回應式元素,通常佔滿視窗的整個寬度或高度,因此建議您使用大小類別來決定放置的位置。這個作法可以劃定留給內容的顯示空間。在下列的程式碼片段中,活動在精簡版螢幕上使用了底部列,並為較大的螢幕採用頂端應用程式列。符合資格的版面配置則使用寬度中斷點(如前文所述)。

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>

<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

內容

將永久性的使用者介面元素定位好後,請將剩餘的空間供內容使用,例如使用 NavHostFragment 以及應用程式的導覽圖。其他注意事項請參閱回應式使用者介面的導覽

確保所有資料皆可用於各種尺寸

目前大多數應用程式架構都採用一種資料模型,其獨立於構成使用者介面的 Android 元件(活動、片段及檢視畫面)。使用 Jetpack 時,這個角色通常是透過 ViewModel 來完成,它的好處在於可在設定變更後繼續有效(詳情請參閱ViewModel 總覽)。

在實作可適應不同大小的版面配置時,您可能會很想根據目前的大小選用其他資料模型。然而,這與單向資料流程的原則背道而馳。資料應該要向下流向檢視畫面,而諸如使用者互動等事件則應向上流。在其他方向建立依附元件時,資料模型會取決於使用者介面層的設定,因此會大大增加複雜性。應用程式變更大小時,您必須把資料模型轉換成另一種資料模型。

反之,讓資料模型可容納最大的大小類別,然後選擇性地在使用者介面中顯示、隱藏或調整內容位置,以適應目前的大小類別。下列幾項策略可用來決定版面配置在大小類別轉換時的行為。

展開式內容

標準化版面配置:動態消息、主頁橫幅

可展開式空間可以讓內容放大及重新調整內容格式,使其更易於存取。

放大集合。 許多應用程式會在捲動容器中顯示一組集合,例如 RecyclerViewScrollView。啟用一個會自動放大的容器,用於顯示更多內容。但請注意容器中的內容不會被過度拉長或扭曲。舉例來說,在使用 RecyclerView 時,當寬度壓縮不夠時,可考慮使用其他版面配置管理工具,例如 GridLayoutManagerStaggeredGridLayoutManagerFlexboxLayoutManager

裝置折疊及展開時,不同的版面配置管理工具根據寬度大小類別,以不同的方式排列應用程式。
圖 2 根據寬度大小類別使用不同的 LayoutManager。

個別項目也可以使用不同的大小或形狀來顯示更多內容,並且更容易區別項目的邊界。

強調主頁橫幅元素。 如果版面配置有特定的焦點(例如圖片或影片),當應用程式視窗變大時,可將其展開,以持續吸引使用者的注意力。其他輔助元素可重新安排在主頁橫幅檢視畫面周圍或下方。

建立這類版面配置的方法有很多種,但 ConstraintLayout 特別適合,因為它提供了多種方式來限制子檢視畫面的大小(包括透過百分比,或是強制執行顯示比例),以及為與自身相關的子項內容或其他子項內容定位。若要進一步瞭解這些功能,請參閱使用 ConstraintLayout 建立回應式使用者介面

依預設顯示可收合的內容 如果有可用的空間,可顯示僅可透過使用者其他互動方式存取的內容(例如輕觸、捲動或手勢)。舉例來說,如果在壓縮時內容以分頁的介面顯示,當空間足夠時,可改以欄或清單的形式重新安排內容。

展開邊界。如果空間太大,即使已充分運用所有內容,仍無法找到適合的佈局,則可以展開版面配置的邊界,讓內容保持置中,每個檢視畫面有其自然大小,且彼此之間留有空間。

或者可將全螢幕元件轉換成浮動對話方塊使用者介面。如果元件需要專屬的聚焦以立即完成使用者的工作(例如撰寫電子郵件或建立日曆活動),就特別適合使用這個方法。

標準手機顯示全螢幕對話方塊,而展開的可折疊式手機則以浮動視窗顯示相同的對話方塊。
圖 3 全螢幕對話方塊可在中型或展開的寬度下,轉換為標準對話方塊。

新增內容

標準版面配置:支援面板和清單詳細資料檢視畫面

使用支援面板。 支援面板可顯示與主要內容相關的額外內容或關聯動作,例如文件中的留言或播放清單中的項目。一般而言,這些項目的展開高度會佔用螢幕底部三分之一處,展開寬度為後端三分之一處。

很重要的考量在於,當空間不足以顯示面板時,要在哪裡放置此內容。以下提供幾種替代方案:

  • 使用 DrawerLayout 將其放置於結尾邊緣的導覽匣
  • 使用 BottomSheetBehavior 將其放置於底部導覽匣
  • 放置於可用輕觸選單圖示方式存取的選單或彈出式視窗
DrawerLayout、BottomSheetBehavior 和選項選單的圖形呈現方式
圖 4 其他在支援面板中展示額外內容的方式。

建立雙窗格版面配置。大螢幕可能可以顯示合併的功能,這些功能在較小的螢幕上通常會分開顯示。許多應用程式常見的互動模式是顯示項目清單(例如聯絡人或搜尋結果),並在選取項目後切換至項目的詳細內容。在較大的螢幕下,與其放大清單內容,請使用清單詳細資料檢視畫面,以雙窗格版面配置並排顯示兩項功能。與支援面板不同,清單詳細資料檢視畫面的詳細資料窗格是獨立的元素,可獨立顯示在較小的螢幕上。

使用 SlidingPaneLayout 的專用小工具實作清單詳細資料檢視畫面。此小工具會根據兩個窗格指定的 layout_width 值,自動判斷是否有足夠的空間顯示兩個窗格,然後使用 layout_weight 來分配剩餘空間。如果沒有足夠的空間,每個窗格會使用版面配置的完整寬度,詳細資料窗格會從螢幕滑出或位於清單窗格頂端。

SlidingPaneLayout 在擁有寬螢幕的裝置上顯示清單詳細資料版面配置的兩個窗格。 在窄螢幕的裝置上,SlidingPaneLayout 在清單窗格的頂部顯示滑動的詳細資料窗格。
圖 5. SlidingPaneLayout 以展開寬度顯示兩個窗格,以及在壓縮的寬度中顯示一個窗格。

建立雙窗格版面配置中具有如何使用 SlidingPaneLayout 的更多詳細內容。另請注意,此模式可能會影響導覽圖的建構方式。詳情請參閱回應式使用者介面的導覽