將版面配置階層最佳化

試用 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用版面配置。

這是常見的誤解,使用基本版面配置結構可以產生最有效率的版面配置。不過,您在應用程式中加入的每個小工具和版面配置都需要初始化、版面配置和繪圖。例如,使用 LinearLayout 的巢狀執行個體可能會導致檢視區塊階層過度深。此外,為使用 layout_weight 參數的多個 LinearLayout 例項建立巢狀結構可能非常昂貴,因為每個子項都需要測量兩次。如果版面配置會重複加載,這一點尤其重要,例如在 RecyclerView 中使用時。

本文件說明如何使用版面配置檢查器Lint 檢查及最佳化版面配置。

檢查版面配置

Android SDK 工具包含版面配置檢查器工具,可讓您在應用程式執行期間分析版面配置。使用這項工具可協助您找出版面配置效能中的效率不佳部分。

版面配置檢查器可讓您在已連結的裝置或模擬器上選取執行中的程序,然後顯示版面配置樹狀結構。每個區塊的紅燈分別代表測量、版面配置和繪製效能,協助您找出潛在問題。

舉例來說,圖 1 顯示了在 RecyclerView 中做為項目使用的版面配置。這個版面配置左側是小型點陣圖圖片,右側是兩個堆疊的文字項目。更重要的是,這類多次加載的版面配置會經過最佳化,因為效能優勢可以倍增。

顯示清單中單一項目的圖片:一張圖片和兩個垂直對齊的文字
圖 1.RecyclerView 中的項目概念版面配置。

版面配置檢查器會顯示可用裝置及其執行中的元件清單。從「Windows」 分頁中選擇元件,然後按一下「Layout Inspector」,即可查看所選元件的版面配置階層。舉例來說,圖 2 顯示清單項目的版面配置,如圖 1 所示。

顯示版面配置檢查器和 LinearLayout 組合的圖片
圖 2. 圖 1 中版面配置的版面配置階層,使用 LinearLayout 的巢狀執行個體。

修改版面配置

由於巢狀 LinearLayout 造成上述版面配置效能減慢,建議您簡化版面配置,讓版面配置變成淺和寬,而非狹長和深度,藉此改善效能。根節點允許 ConstraintLayout 做為根節點,以便使用這類版面配置。將此設計轉換為使用 ConstraintLayout 時,版面配置會成為雙層階層:

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

新版面配置的檢查如下所示:

顯示 3D 版面配置檢查器的圖片
圖 3. 版面配置檢查器 3D 模式。

這個版面配置是用於清單中的每個項目,因此優點會倍增。

主要差別在於在 LinearLayout 設計中使用 layout_weight,這可能會導致評估速度變慢。這個範例說明每種版面配置都有適當用途。請審慎考量是否需要使用版面配置權重。

在一些複雜的版面配置中,如果多次測量同一 UI 元素,系統可能會浪費心力。這種現象稱為「重複作業」。如要進一步瞭解重複作業和預防方式,請參閱「效能與檢視區塊階層」。

使用 lint

建議您在版面配置檔案上執行 Lint 工具,搜尋可能的檢視區塊階層最佳化設定。Lint 會取代版面配置最佳化工具,且功能更優異。以下是 Lint 規則的範例:

  • 使用複合可繪項目。您可以將包含 ImageViewTextViewLinearLayout 做為複合可繪項目處理,更有效率。
  • 合併根頁框。如果版面配置的根層級為 FrameLayout 未提供背景或邊框間距,您可以使用合併標記取代版面配置,這個做法的效率會稍微高一些。
  • 移除無用的葉子。您可以移除沒有子項或沒有背景的版面配置,因為這不會出現,讓版面配置階層更精簡且更有效率。
  • 移除沒有用的上層項目。移除一個版面配置時,如果子項沒有同層級、不是 ScrollView 或根版面配置,也沒有背景,就可以採取這項做法。您也可以將子項檢視畫面直接移至父項,讓版面配置階層更精簡且更有效率。
  • 避免使用深度版面配置。巢狀結構過多的版面配置會導致效能不佳。建議您使用精簡的版面配置 (例如 ConstraintLayout) 以改善效能。Lint 檢查的預設深度上限為 10。

Lint 工具的另一個優點是將其整合至 Android Studio。每當您編譯程式時,Lint 都會自動執行。透過 Android Studio,您也可以針對特定建構變數或所有建構變數執行 Lint 檢查。

您也可以透過 Android Studio 中的「File」>「Settings」>「Project Settings」選項,管理檢查設定檔並設定檢查作業。「檢查設定」頁面會顯示支援的檢查項目:

顯示 Android Studio 檢查選單的圖片
圖 4.「檢查設定」頁面。

Lint 可以自動修正部分問題、提供建議給其他問題,並直接跳至違規程式碼以供審查。

詳情請參閱「版面配置」和「版面配置資源」。