Layout Inspector trong Android Studio cho phép bạn kiểm tra và gỡ lỗi bố cục bên trong một ứng dụng đang chạy trong trình mô phỏng hoặc thiết bị thực. Bạn có thể kiểm tra các thuộc tính của từng thành phần, so sánh bố cục ứng dụng với mô hình thiết kế và hiển thị khung hiển thị phóng to của ứng dụng.
Bạn cũng có thể dùng Layout Inspector để kiểm tra tần suất kết hợp lại hoặc bỏ qua thành phần kết hợp, từ đó xác định vấn đề của ứng dụng. Ví dụ: một số lỗi lập trình có thể khiến giao diện người dùng kết hợp lại quá mức, dẫn đến hiệu suất kém. Một số lỗi lập trình có thể ngăn giao diện người dùng kết hợp lại, từ đó khiến các thay đổi của giao diện người dùng không xuất hiện được trên màn hình.
Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi giao diện người dùng Compose.
Bắt đầu
Để khởi động Layout Inspector, hãy chạy ứng dụng, chuyển đến cửa sổ Running Devices (Thiết bị đang chạy) rồi nhấp vào Toggle Layout Inspector (Bật/tắt Layout Inspector)
. Nếu bạn chuyển đổi giữa nhiều thiết bị hoặc dự án, Layout Inspector sẽ tự động kết nối với các quy trình có thể gỡ lỗi đang chạy ở nền trước của thiết bị được kết nối.
Sau đây là cách thực hiện một số tác vụ phổ biến:
- Để xem hệ phân cấp view và kiểm tra các thuộc tính của từng thành phần, hãy sử dụng cửa sổ công cụ Component Tree (Cây thành phần) và Attributes (Thuộc tính). Layout Inspector có thể yêu cầu khởi động lại hoạt động để truy cập vào các thuộc tính.
- Để chọn các thành phần, trước tiên, hãy bật Bật/tắt chế độ Kiểm tra sâu
, sau đó nhấp vào các thành phần. Ngoài ra, bạn có thể di chuyển đến mã bằng cách nhấp đúp vào các thành phần. - Để tương tác với ứng dụng, hãy tắt Toggle Deep Inspect (Bật/tắt công cụ Kiểm tra sâu)
. - Để kiểm tra thiết bị thực, hãy bật tính năng phản chiếu thiết bị.
- Để bật tính năng cập nhật trực tiếp khi bạn cập nhật giao diện người dùng của ứng dụng, hãy kiểm tra để đảm bảo rằng tính năng Chỉnh sửa trực tiếp đã được bật.
Chọn hoặc tách riêng một thành phần
Thành phần thường vẽ nội dung mà người dùng có thể nhìn thấy và tương tác. Component Tree (Cây thành phần) cho thấy hệ phân cấp của ứng dụng theo thời gian thực theo từng thành phần kết hợp, giúp bạn gỡ lỗi bố cục ứng dụng vì bạn có thể hình dung các thành phần trong ứng dụng và những giá trị liên quan đến các thành phần đó.
Để chọn một thành phần, hãy nhấp vào thành phần đó trong Component Tree (Cây thành phần) hoặc Layout Display (Màn hình bố cục). Tất cả các thuộc tính bố cục cho thành phầ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 thành phần chồng chéo, bạn có thể thấy tất cả các thành phần trong một vùng khi nhấp chuột phải ở chế độ Deep Inspect (Kiểm tra sâu)
. Để chọn một thành phần không ở phía trước, hãy nhấp vào thành phần đó trong Component Tree (Cây thành phần).
Khi xử lý các bố cục phức tạp, bạn có thể tách riêng từng thành phần để 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à hiển thị ở Layout Display (Màn hình bố cục). Để tách riêng một thành phần, hãy nhấp chuột phải vào thành phầ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 chế độ xem toàn bộ, hãy nhấp chuột phải vào thành phần đó rồi chọn Show All (Hiện tất cả).
Ẩn đường viền bố cục và nhãn khung hiển thị
Để ẩn hộp giới hạn hoặc nhãn thành phần cho một phần tử bố cục, hãy nhấp vào View Options (Tuỳ chọn cho khung hiển thị)
ở đầu phần Layout Display (Màn hình bố cục) rồi bật/tắt tuỳ chọn Show Borders (Hiện đường viền) hoặc Show View Label (Hiện nhãn khung hiển thị).
Ghi lại ảnh chụp nhanh về hệ thống phân cấp bố cục
Layout Inspector cho phép bạn lưu ảnh chụp nhanh về hệ phân cấp bố cục của ứng dụng đang chạy để bạn có thể chia sẻ với người khác hoặc tham khảo sau.
Ảnh chụp nhanh ghi lại dữ liệu mà bạn thường thấy khi sử dụng Layout Inspector, bao gồm cả thông tin kết xuất chi tiết về bố cục, cây thành phần của bố cục Compose, Khung hiển thị hoặc bố cục kết hợp và các thuộc tính chi tiết của mỗi thành phần trong giao diện người dùng. Để lưu ảnh chụp nhanh, hãy nhấp vào Snapshot Export/Import (Xuất/nhập ảnh chụp nhanh)
rồi nhấp vào Export Snapshot (Xuất ảnh chụp nhanh).
Tải ảnh chụp nhanh Layout Inspector đã lưu trước đó bằng cách nhấp vào Import Snapshot (Nhập ảnh chụp nhanh).
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 một lớp phủ, hãy chọn mục Load Overlay (Tải lớp phủ)
trong thanh công cụ 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 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ủ.

Layout Inspector độc lập
Để có hiệu suất tối ưu, bạn nên sử dụng Layout Inspector ở chế độ nhúng mặc định. Nếu bạn muốn tách Layout Inspector, hãy chuyển đến File (Tệp) (Android Studio (Android Studio) trên macOS)> Settings (Cài đặt) > Tools (Công cụ) > Layout Inspector (Trình kiểm tra bố cục) rồi bỏ chọn hộp Enable embedded Layout Inspector (Bật Layout Inspector nhúng).
Ở chế độ độc lập, hãy bật tính năng cập nhật trực tiếp bằng cách nhấp vào biểu tượng Live Updates (Bản cập nhật trực tiếp)
trên thanh công cụ Layout Inspector (Trình kiểm tra bố cục).