Gỡ lỗi bố cục bằng Layout Inspector (Trình kiểm tra bố cục) và Layout Validation (Xác thực bố cục)

Layout Inspector (Trình kiểm tra bố cục) trong Android Studio cho phép bạn so sánh bố cục ứng dụng với mô hình thiết kế, hiện khung nhìn phóng to hoặc 3D của ứng dụng và kiểm tra chi tiết bố cục trong thời gian chạy. Công cụ này đặc biệt hữu ích khi bố cục được xây dựng trong thời gian chạy chứ không phải hoàn toàn bằng XML và bố cục đang hoạt động không như mong đợi.

Layout Validation (tính năng Xác thực bố cục) cho phép bạn cùng lúc xem trước bố cục trên nhiều kiểu thiết bị và cấu hình màn hình (bao gồm cả nhiều mức kích thước phông chữ hoặc nhiều ngôn ngữ người dùng), giúp bạn dễ dàng kiểm tra các vấn đề phổ biến về bố cục.

Mở Layout Inspector (Trình kiểm tra bố cục)

Để mở Layout Inspector (Trình kiểm tra bố cục), hãy làm như sau:

  1. Chạy ứng dụng trên một thiết bị hoặc trình mô phỏng đã kết nối.
  2. Nhấp vào Tools (Công cụ) > Layout Inspector (Layout Inspector (Trình kiểm tra bố cục).

Theo minh hoạ trong hình 1, Layout Inspector (Trình kiểm tra bố cục) cho thấy những nội dung sau:

  1. Component Tree (Cây thành phần): Hệ thống phân cấp khung nhìn trong bố cục.
  2. Layout Display (Màn hình bố cục): Kết xuất bố cục như khi ứng dụng chạy trên thiết bị hoặc trình mô phỏng, có thông tin giới hạn bố cục cho mỗi khung nhìn.
  3. Layout Inspector toolbar (thanh công cụ Trình kiểm tra bố cục): Các công cụ của Layout Inspector (Trình kiểm tra bố cục)
  4. Attributes (Thuộc tính): Các thuộc tính bố cục của khung nhìn đã chọn.

Ảnh chụp màn hình Layout Inspector (Trình kiểm tra bố cục) với các nhãn cho Component Tree (Cây thành phần), Layout Inspector toolbar (thanh công cụ Trình kiểm tra bố cục), Layout Display (Màn hình bố cục) và Attributes (Thuộc tính)

Hình 1. Layout Inspector (Trình kiểm tra bố cục).

Chọn một khung nhìn

Để chọn khung nhìn, hãy nhấp vào khung nhìn đó trong Component Tree (Cây thành phần) hoặc Layout Display (Màn hình bố cục). Tất cả thuộc tính bố cục cho khung nhìn đã chọn đều xuất hiện trong bảng điều khiển Attributes (Thuộc tính).

Nếu bố cục của bạn có các khung nhìn chồng chéo, bạn có thể chọn một khung nhìn không chính diện bằng cách nhấp vào khung nhìn đó trong Component Tree (Cây thành phần) hoặc bằng cách xoay bố cục rồi nhấp vào khung nhìn mong muốn.

Tách riêng khung nhìn

Khi xử lý các bố cục phức tạp, bạn có thể tách riêng từng khung nhìn riêng lẻ để chỉ một tập hợp con của bố cục xuất hiện trong Component Tree (Cây thành phần) và kết xuất trong Layout Display (Màn hình bố cục).

Để tách riêng một khung nhìn, hãy nhấp chuột phải vào khung nhìn đó trong Component Tree (Cây thành phần) rồi chọn Show Only Subtree (Chỉ hiện cây con) hoặc Show Only Parents (Chỉ hiện cây mẹ).

Để quay lại khung nhìn toàn bộ, hãy nhấp chuột phải vào khung nhìn đó rồi chọn Show All (Hiện tất cả).

Ẩn đường viền bố cục và xem nhãn

Để ẩn hộp giới hạn hoặc để xem nhãn cho thành phần bố cục, hãy nhấp vào biểu tượng Tuỳ chọn xem Biểu tượng tuỳ chọn khung nhìn Live Layout Inspector (Trình kiểm tra bố cục trực tiếp) ở đầu trang Layout Display (Màn hình bố cục) rồi bật/tắt Show Borders (Hiện đường viền) hoặc Show View Label (Hiện nhãn khung nhìn).

So sánh bố cục ứng dụng với lớp ảnh tham chiếu

Để so sánh bố cục ứng dụng của bạn với hình ảnh tham chiếu, chẳng hạn như với bản minh hoạ giao diện người dùng, bạn có thể tải lớp ảnh bitmap trong Layout Inspector (Trình kiểm tra bố cục).

  • Để tải lớp phủ, hãy nhấp vào biểu tượng Tải lớp phủ ở đầu Layout Inspector (Trình kiểm tra bố cục). Lớp phủ được điều chỉnh theo tỷ lệ vừa vặn với bố cục.
  • Để điều chỉnh độ trong suốt của lớp phủ, hãy sử dụng thanh trượt Overlay Alpha (Lớp phủ Alpha).
  • Để xoá lớp phủ, hãy nhấp vào biểu tượng Xoá lớp phủ .

Live Layout Inspector

Live Layout Inspector (Trình kiểm tra bố cục trực tiếp) cung cấp thông tin chi tiết đầy đủ theo thời gian thực về giao diện người dùng của ứng dụng ngay khi triển khai giao diện người dùng cho một thiết bị hoặc trình mô phỏng chạy API cấp 29 trở lên.

Để bật Live Layout Inspector (Trình kiểm tra bố cục trực tiếp), hãy chuyển đến File (Tệp) > Settings (Cài đặt) > Experimental (Thử nghiệm) rồi đánh dấu hộp bên cạnh Enable Live Layout Inspector (Bật Trình kiểm tra bố cục trực tiếp). Sau đó, nhấp vào hộp đánh dấu bên cạnh Live updates (Cập nhật trực tiếp) phía trên Layout Display (Màn hình bố cục).

Live Layout Inspector (Trình kiểm tra bố cục trực tiếp) bao gồm một hệ thống phân cấp bố cục động, cập nhật Component Tree (Cây thành phần) và Layout Display (Màn hình bố cục) dưới dạng khung nhìn khi thay đổi thiết bị.

Ngoài ra, các giá trị thuộc tính trong ngăn xếp độ phân giải cho phép bạn điều tra nguồn gốc của giá trị thuộc tính tài nguyên trong mã nguồn và di chuyển đến vị trí của mã đó bằng cách theo dõi các siêu liên kết trong ngăn thuộc tính.

Giá trị thuộc tính trong ngăn xếp độ phân giải

Hình 2. Giá trị thuộc tính trong bảng điều khiển Attributes (Thuộc tính) có siêu liên kết đến định nghĩa của thuộc tính.

Cuối cùng, Layout Display (Màn hình bố cục) cung cấp hình ảnh 3D nâng cao về hệ phân cấp khung nhìn của ứng dụng trong thời gian chạy. Để sử dụng tính năng này, trong cửa sổ Live Layout Inspector (Trình kiểm tra bố cục trực tiếp), bạn chỉ cần nhấp vào Layout (Bố cục) rồi xoay bằng cách kéo chuột. Để mở rộng hoặc thu gọn các lớp của Layout (Bố cục), hãy sử dụng thanh trượt Layer Spacing (Khoảng cách lớp phủ).

Layout Inspector (Trình kiểm tra bố cục): Khung nhìn 3D

Hình 3. Khung nhìn 3D đã xoay của một bố cục

Layout Validation

Layout Validation (Xác thực bố cục) là một công cụ trực quan giúp bạn cùng lúc xem trước bố cục của nhiều kiểu thiết bị và cấu hình, giúp bạn phát hiện vấn đề trong bố cục ngay từ những bước đầu tiên. Để truy cập tính năng này, hãy nhấp vào thẻ Layout Validation (Xác thực bố cục) ở góc trên cùng bên phải của cửa sổ IDE:

Ảnh chụp màn hình thẻ Layout Validation (Xác thực bố cục) trong Android Studio IDE

Hình 4. Thẻ Layout Validation (Xác thực bố cục).

Để chuyển đổi giữa các nhóm cấu hình có sẵn, hãy chọn một trong các tuỳ chọn sau trên trình đơn thả xuống Reference Devices (Thiết bị tham chiếu) ở đầu cửa sổ Layout Validation (Xác thực bố cục):

  • Thiết bị tham chiếu
  • Tuỳ chỉnh
  • Mù màu
  • Kích thước phông chữ


Ảnh chụp màn hình trình đơn thả xuống trong công cụ Layout Validation (Xác thực bố cục)

Hình 5. Tuỳ chọn trên trình đơn thả xuống Reference Devices (Thiết bị tham chiếu).

Thiết bị tham chiếu

Reference Devices (Thiết bị tham chiếu) là một tập hợp thiết bị mà chúng tôi khuyên bạn nên kiểm thử. Trong đó có các giao diện điện thoại, thiết bị gập, máy tính bảng và máy tính để bàn. Bạn nên xem trước cách bố cục thể hiện trên tập hợp thiết bị tham chiếu này:

Ảnh chụp màn hình bản xem trước bố cục cho nhiều loại thiết bị tham chiếu

Hình 6. Xem trước thiết bị tham chiếu trong công cụ Layout Validation (Xác thực bố cục)

Tuỳ chỉnh

Để tuỳ chỉnh cấu hình hiển thị để xem trước, hãy chọn trong nhiều chế độ cài đặt, bao gồm cả ngôn ngữ, thiết bị hoặc hướng màn hình:

Ảnh động minh họa cách tuỳ chỉnh màn hình thiết bị trong công cụ Layout Validation (Xác thực bố cục)

Hình 7. Định cấu hình màn hình tuỳ chỉnh trong công cụ Xác thực bố cục (Layout Validation)

Mù màu

Để giúp người dùng bị mù màu dễ tiếp cận ứng dụng, hãy xác thực bố cục bằng cách mô phỏng các loại mù màu thường gặp:

Ảnh chụp màn hình bản xem trước mô phỏng nhiều loại mù màu

Hình 8. Xem trước bản mô phỏng mù màu trong công cụ Xác thực bố cục (Layout Validation)

Kích thước phông chữ

Xác thực bố cục ở nhiều kích thước phông chữ và cải thiện khả năng tiếp cận ứng dụng cho người dùng khiếm thị bằng cách thử nghiệm bố cục với phông chữ lớn hơn:

Xem trước bố cục ứng dụng ở nhiều kích thước phông chữ kèm lỗi bố cục hiển thị trực quan cho các phông chữ lớn

Hình 9. Bản xem trước các kích thước phông chữ trong công cụ Xác thực bố cục (Layout Validation)

Tổng quan nhanh về hệ thống phân cấp bố cục

Layout Inspector (Trình kiểm tra bố cục) cho phép bạn lưu tổng quan nhanh về hệ thống phân cấp bố cục của ứng dụng đang chạy để bạn có thể dễ dàng chia sẻ với người khác hoặc lưu lại để tham khảo sau.

Tổng quan nhanh (Snapshot) thu thập dữ liệu mà bạn thường thấy khi sử dụng Layout Inspector (Trình kiểm tra bố cục), bao gồm cả quá trình kết xuất 3D chi tiết về bố cục, cây thành phần của View (Khung nhìn), bộ công cụ Compose hoặc bố cục kết hợp cũng như các thuộc tính chi tiết cho mỗi thành phần của giao diện người dùng. Để lưu tổng quan nhanh, hãy làm như sau:

  1. Mở trình Layout Inspector (Trình kiểm tra bố cục).
  2. Layout Inspector (Trình kiểm tra bố cục) sẽ tự động kết nối với quá trình của ứng dụng. Nếu không, hãy chọn quá trình của ứng dụng trên trình đơn thả xuống.
  3. Khi bạn muốn ghi lại ảnh chụp nhanh, hãy nhấp vào biểu tượng Xuất tổng quan nhanh Biểu tượng xuất trên thanh công cụ Layout Inspector (Trình kiểm tra bố cục).
  4. Trong hộp thoại hệ thống vừa xuất hiện, hãy chỉ định tên và vị trí bạn muốn lưu lại tổng quan nhanh. Hãy nhớ lưu tệp có đuôi *.li.

Sau đó, bạn có thể tải tổng quan nhanh của Layout Inspector (Trình kiểm tra bố cục) bằng cách chọn File (Tệp) > Open (Mở) trên thanh trình đơn chính rồi mở tệp *.li.

Tổng quan nhanh trên Layout Inspector (Trình kiểm tra bố cục) cho ứng dụng mẫu Sunflower

Hình 10. Tổng quan nhanh trên Layout Inspector (Trình kiểm tra bố cục) cho ứng dụng mẫu Sunflower.

Kiểm tra các phần tử ngữ nghĩa của Compose

Trong bộ công cụ Compose, Semantics (Ngữ nghĩa) mô tả giao diện người dùng theo cách các dịch vụ Hỗ trợ tiếp cận và khung Thử nghiệm có thể hiểu được. Bạn có thể sử dụng Layout Inspector (Trình kiểm tra bố cục) để kiểm tra thông tin ngữ nghĩa trong bố cục Compose.

Thông tin ngữ nghĩa xuất hiện nhờ Layout Inspector (Trình kiểm tra bố cục)

Hình 11. Thông tin ngữ nghĩa xuất hiện nhờ Layout Inspector (Trình kiểm tra bố cục).

Khi chọn nút Compose, hãy sử dụng cửa sổ Attributes (Thuộc tính) để kiểm tra xem nút đó khai báo thông tin ngữ nghĩa trực tiếp, hợp nhất ngữ nghĩa qua các phần tử con hoặc cả hai. Để nhanh chóng xác định nút nào có chứa ngữ nghĩa, đã được khai báo hoặc hợp nhất, hãy sử dụng trình đơn thả xuống View options (Tuỳ chọn xem) trong cửa sổ Component Tree (Cây thành phần) rồi chọn Highlight Semantics Layers (Làm nổi bật lớp ngữ nghĩa). Thao tác này chỉ làm nổi bật các nút trong cây chứa các phần tử ngữ nghĩa và bạn có thể sử dụng bàn phím để nhanh chóng di chuyển giữa các nút.