將版面配置階層最佳化

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

一般人常誤以為使用基本版面配置結構,就能產生最有效率的版面配置。不過,您新增至應用程式的每個小工具和版面配置都需要初始化、版面配置和繪製。舉例來說,使用 LinearLayout 的巢狀執行個體可能會導致檢視區塊階層過深。此外,如果使用 layout_weight 參數,將多個 LinearLayout 執行個體巢狀化,可能會特別耗用資源,因為每個子項都需要測量兩次。如果版面配置重複膨脹,例如在 RecyclerView 中使用時,這點就特別重要。

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

檢查版面配置

Android SDK 工具包含 版面配置檢查器 工具,可讓您在應用程式執行時分析版面配置。使用這項工具可協助您找出版面配置效能不彰的原因。

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

舉例來說,圖 1 顯示的版面配置會做為 RecyclerView 中的項目。這個版面配置會在左側顯示小型點陣圖,右側則顯示兩個堆疊的文字項目。如果這類版面配置會多次膨脹,就更需要進行最佳化,因為效能優勢會隨之倍增。

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

版面配置檢查器會顯示可用裝置清單,以及這些裝置執行的元件。從「Windows」分頁中選擇元件,然後按一下「版面配置檢查器」,即可查看所選元件的版面配置階層。舉例來說,圖 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 模式。

由於清單中的每個項目都會使用這個版面配置,因此這項優點會成倍放大。

大部分的差異都是因為設計中使用了 layout_weightLinearLayout這可能會減緩評估速度。這是一個例子,說明各版面配置的適用情況。請審慎評估是否需要使用版面配置權重。

在某些複雜的版面配置中,系統可能會多次測量相同的 UI 元素,浪費資源。這種現象稱為「重複課稅」。如要進一步瞭解重複作業和如何避免,請參閱「效能與檢視區塊階層」。

使用 lint

建議您對版面配置檔案執行 Lint 工具,找出可最佳化的檢視區塊階層。Lint 取代了 layoutopt 工具,功能也更強大。以下是 Lint 規則的範例:

  • 使用複合式可繪項目。您可以更有效率地處理包含 ImageViewTextViewLinearLayout,當做複合可繪項目。
  • 合併根框架。如果版面配置的根是 FrameLayout ,且未提供背景或邊框間距,您可以將其替換為合併標記,這樣效率會稍微高一點。
  • 移除無用的葉子。您可以移除沒有子項或沒有背景的版面配置 (因為這類版面配置是隱形的),以建立更平坦且更有效率的版面配置階層。
  • 移除無用的父項。您可以移除沒有同層級、不是 ScrollView 或根版面配置,且沒有背景的子項版面配置。您也可以將子項檢視區塊直接移至父項,建立更平坦且更有效率的版面配置階層。
  • 避免使用深層版面配置。巢狀結構過多的版面配置會影響效能。建議使用較平坦的版面配置 (例如 ConstraintLayout),以提升效能。預設的 Lint 檢查深度上限為 10。

Lint 工具的另一個優點是整合到 Android Studio 中。編譯程式時,系統會自動執行 Lint。您也可以使用 Android Studio,針對特定或所有建構變化版本執行 Lint 檢查。

您也可以在 Android Studio 中依序選取「File」>「Settings」>「Project Settings」選項,管理檢查設定檔及設定檢查。「檢查設定」頁面隨即顯示,其中包含支援的檢查項目:

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

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

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