Tối ưu hoá hệ phân cấp bố cục

Thử cách Compose

Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng bố cục trong ứng dụng Compose.

Layout Inspector trong Compose →

Nhiều người thường lầm tưởng rằng việc sử dụng các cấu trúc bố cục cơ bản sẽ tạo ra bố cục hiệu quả nhất. Tuy nhiên, mỗi tiện ích và bố cục mà bạn thêm vào ứng dụng đều cần được khởi tạo, bố trí và vẽ. Ví dụ: việc sử dụng các thực thể lồng nhau của LinearLayout có thể dẫn đến một hệ phân cấp view quá sâu. Hơn nữa, việc lồng một số thực thể LinearLayout sử dụng tham số layout_weight có thể tốn nhiều chi phí, vì mỗi thành phần con cần được đo hai lần. Điều này đặc biệt quan trọng khi bố cục được mở rộng nhiều lần, chẳng hạn như khi được dùng trong một RecyclerView.

Tài liệu này trình bày cách sử dụng Layout Inspector và lint để kiểm tra và tối ưu hoá bố cục.

Kiểm tra bố cục

Các công cụ Android SDK bao gồm công cụ Layout Inspector (Trình kiểm tra bố cục). Công cụ này cho phép bạn phân tích bố cục trong khi ứng dụng đang chạy. Việc sử dụng công cụ này giúp bạn phát hiện những điểm không hiệu quả trong hiệu suất bố cục.

Layout Inspector cho phép bạn chọn các quy trình đang chạy trên một thiết bị thông minh hoặc trình mô phỏng, sau đó hiển thị cây bố cục. Đèn giao thông trên mỗi khối biểu thị hiệu suất Đo lường, Bố cục và Vẽ của khối đó, giúp bạn xác định các vấn đề tiềm ẩn.

Ví dụ: hình 1 cho thấy một bố cục được dùng làm mục trong RecyclerView. Bố cục này cho thấy một hình ảnh bitmap nhỏ ở bên trái và 2 mục văn bản xếp chồng lên nhau ở bên phải. Điều đặc biệt quan trọng là các bố cục như thế này được tăng nhiều lần sẽ được tối ưu hoá, vì lợi ích về hiệu suất sẽ được nhân lên.

Layout Inspector cho thấy danh sách các thiết bị hiện có và các thành phần đang chạy của thiết bị. Chọn thành phần của bạn trong thẻ Windows (Cửa sổ), rồi nhấp vào Layout Inspector (Trình kiểm tra bố cục) để xem hệ phân cấp bố cục của thành phần đã chọn. Ví dụ: hình 2 cho thấy bố cục của mục danh sách minh hoạ trong hình 1.

Sửa đổi bố cục

Vì hiệu suất bố cục trước đó bị chậm do LinearLayout lồng nhau, nên bạn có thể cải thiện hiệu suất bằng cách làm phẳng bố cục. Nói cách khác, hãy tạo bố cục nông và rộng thay vì hẹp và sâu. ConstraintLayout làm nút gốc cho phép các bố cục như vậy. Khi bạn chuyển đổi thiết kế này để sử dụng ConstraintLayout, bố cục sẽ trở thành một hệ phân cấp hai cấp:

    <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>
    

Việc kiểm tra bố cục mới có dạng như sau:

Lợi ích của việc này sẽ tăng lên gấp nhiều lần, vì bố cục này được dùng cho mọi mục trong danh sách.

Hầu hết sự khác biệt là do việc sử dụng layout_weight trong thiết kế LinearLayout, điều này có thể làm chậm quá trình đo lường. Đây là một ví dụ về cách mỗi bố cục có những mục đích sử dụng phù hợp. Hãy cân nhắc kỹ xem bạn có cần sử dụng trọng số bố cục hay không.

Trong một số bố cục phức tạp, hệ thống có thể lãng phí công sức khi đo lường cùng một phần tử trên giao diện người dùng nhiều lần. Hiện tượng này được gọi là thuế trùng. Để biết thêm thông tin về tình trạng đánh thuế hai lần và cách ngăn chặn tình trạng này, hãy xem bài viết Hiệu suất và hệ phân cấp khung hiển thị.

Sử dụng lint

Bạn nên chạy công cụ lint trên các tệp bố cục để tìm kiếm các điểm tối ưu hoá hệ phân cấp view có thể có. Lint thay thế công cụ layoutopt và có nhiều chức năng hơn. Sau đây là các ví dụ về quy tắc kiểm tra mã nguồn:

• Sử dụng thành phần kết hợp có thể vẽ. Bạn có thể xử lý LinearLayout chứa ImageView và TextView hiệu quả hơn dưới dạng một thành phần kết hợp có thể vẽ.
• Hợp nhất khung gốc. Nếu gốc của bố cục là một FrameLayout không cung cấp nền hoặc khoảng đệm, bạn có thể thay thế gốc đó bằng một thẻ hợp nhất, thẻ này sẽ hiệu quả hơn một chút.
• Xoá các lá vô ích. Bạn có thể xoá bố cục không có thành phần con hoặc không có nền (vì bố cục đó không hiển thị) để có hệ phân cấp bố cục phẳng hơn và hiệu quả hơn.
• Xoá các thư mục mẹ không cần thiết. Bạn có thể xoá một bố cục có một thành phần con không có thành phần ngang hàng, không phải là ScrollView hoặc bố cục gốc và không có nền. Bạn cũng có thể di chuyển khung hiển thị con trực tiếp vào khung hiển thị mẹ để có hệ phân cấp bố cục phẳng hơn và hiệu quả hơn.
• Tránh bố cục sâu. Bố cục có quá nhiều thành phần lồng nhau sẽ ảnh hưởng đến hiệu suất. Hãy cân nhắc sử dụng bố cục phẳng hơn, chẳng hạn như ConstraintLayout, để cải thiện hiệu suất. Độ sâu tối đa mặc định cho các lượt kiểm tra lint là 10.

Một lợi ích khác của công cụ tìm lỗi mã nguồn là khả năng tích hợp vào Android Studio. Lint sẽ tự động chạy bất cứ khi nào bạn biên dịch chương trình. Với Android Studio, bạn cũng có thể chạy các yêu cầu kiểm tra của công cụ tìm lỗi mã nguồn cho một biến thể bản dựng cụ thể hoặc cho tất cả biến thể bản dựng.

Bạn cũng có thể quản lý hồ sơ kiểm tra và định cấu hình các hoạt động kiểm tra trong Android Studio bằng lựa chọn File > Settings > Project Settings (Tệp > Cài đặt > Cài đặt dự án). Trang Cấu hình kiểm tra sẽ xuất hiện cùng với các yêu cầu kiểm tra được hỗ trợ:

Lint có thể tự động khắc phục một số vấn đề, đưa ra đề xuất cho những vấn đề khác và chuyển trực tiếp đến mã gây lỗi để xem xét.

Để biết thêm thông tin, hãy xem phần Bố cục và Tài nguyên bố cục.