Pixel Perfect!

Pixel Perfect không còn được dùng nữa. Bắt đầu từ Android Studio 3.1, bạn nên sử dụng Layout Inspector để so sánh bố cục ứng dụng với mô hình thiết kế, xem khung hiển thị phóng to của ứng dụng và kiểm tra thông tin chi tiết về bố cục.

Pixel Perfect là một công cụ được tích hợp trong Android Device Monitor (Trình theo dõi thiết bị Android) với chức năng cho thấy khung hiển thị phóng to của ứng dụng để bạn có thể kiểm tra vị trí và thuộc tính của từng pixel trong bố cục, đồng thời giúp khớp bố cục của ứng dụng với mô hình thiết kế.

Khởi động Pixel Perfect

Hình 1. Trình theo dõi thiết bị Android

  1. Kết nối thiết bị với máy tính. Nếu bạn thấy hộp thoại Allow USB debugging? (Cho phép gỡ lỗi qua USB?), hãy nhấn vào OK.
  2. Mở dự án của bạn trong Android Studio, xây dựng và chạy dự án trên thiết bị.
  3. Khởi động Android Device Monitor. Có thể Android Studio sẽ hiện hộp thoại Disable adb integration (Tắt chế độ tích hợp adb) vì tại mỗi thời điểm hệ thống chỉ có thể kết nối một quy trình với thiết bị qua adb trong khi Android Device Monitor đang yêu cầu kết nối. Vậy hãy nhấp vào Yes (Có).

    Hình 1 minh hoạ nội dung xuất hiện ban đầu trong Android Device Monitor.

  4. Trong thanh trình đơn, hãy chọn Window (Cửa sổ) > Open Perspective (Mở phối cảnh), rồi nhấp vào Pixel Perfect.
  5. Nhấp đúp vào tên thiết bị trong thẻ Windows (Cửa sổ) ở bên trái. Khi đó, thông tin màn hình thiết bị sẽ được điền sẵn vào các ngăn rồi chuyển sang thẻ Pixel Perfect Tree (Cây Pixel Perfect).

Làm quen với các công cụ

Bạn sẽ nhìn thấy ba ngăn sau đây:

  • View Object (Xem đối tượng) (bên trái): Đây là danh sách phân cấp của các đối tượng View xuất hiện trên màn hình, bao gồm cả những đối tượng thuộc sở hữu của hệ thống. Khi bạn nhấp vào một chế độ xem, vị trí của chế độ xem đó sẽ được đánh dấu trong ngăn Pixel Perfect ở bên phải.
  • Pixel Perfect Loupe (Kính lúp Perfect Loupe) (trung tâm): Đây là hình ảnh phóng to màn hình. Lớp này được phủ một lưới ở trên, trong đó mỗi hình vuông biểu thị một pixel. Để xem thông tin về một pixel, hãy nhấp vào hình vuông của pixel đó. Thông tin về màu sắc và các tọa độ X/Y xuất hiện ở cuối ngăn.

    Vạch chữ thập trong ngăn này tương ứng với vạch chữ thập định vị trong ngăn Pixel Perfect (ở bên phải).

    Để thu phóng, hãy sử dụng thanh trượt Zoom (Thu phóng) ở cuối ngăn hoặc sử dụng con lăn chuột.

  • Pixel Perfect (phải): Cho thấy màn hình thiết bị.

    Vạch chữ thập trong ngăn này tương ứng với vạch chữ thập trong ngăn Loupe (Kính lúp).

    Chế độ xem bạn chọn trong ngăn View Object (Xem đối tượng) cũng được tô đậm màu đỏ ở đây. Các chế độ xem mẹ và đồng cấp sẽ có một hộp màu đỏ nhạt.

    Hộp bố cục cũng có thể có các hình chữ nhật khác ở bên trong hoặc bên ngoài, mỗi hình thể hiện một phần của chế độ xem. Hình chữ nhật màu tím hoặc màu xanh lục thể hiện hộp bao quanh chế độ xem. Hộp màu trắng hoặc đen bên trong hộp bố cục thể hiện khoảng đệm cho chế độ xem. Một hình chữ nhật màu trắng hoặc đen bên ngoài thể hiện lề. Khoảng đệm và hộp lề có màu trắng nếu nền bố cục màu đen và ngược lại.

    Bạn có thể lưu ảnh chụp màn hình bằng cách nhấp vào nút Save as PNG (Lưu dưới dạng PNG) ở đầu cửa sổ.

Hình 2. Cửa sổ Pixel Perfect

Theo mặc định, các ngăn này không làm mới khi giao diện người dùng trên màn hình thay đổi. Để bật tính năng tự động làm mới, hãy bật tuỳ chọn Auto Refresh (Tự động làm mới) ở đầu cửa sổ, sau đó đặt giá trị tốc độ làm mới bằng thanh trượt Refresh Rate (Tốc độ làm mới) ở dưới cùng của ngăn Loupe (Kính lúp).

Nếu không, bạn có thể làm mới ngăn Pixel Perfect và ngăn Loupe (Kính lúp) theo cách thủ công bằng cách nhấp vào Refresh Screenshots (Làm mới ảnh chụp màn hình) ở đầu cửa sổ. Bạn cũng có thể phải làm mới ngăn View Object (Xem đối tượng) bằng cách nhấp vào Refresh Tree (Làm mới cây) ở đầu cửa sổ.

Thêm lớp ảnh phủ

Cửa sổ Pixel Perfect giúp bạn khớp bố cục ứng dụng với một hình ảnh minh hoạ bằng cách cho phép bạn tải một bitmap lên dưới dạng một lớp phủ trên cửa sổ Pixel Perfect.

Để dùng hình ảnh bitmap làm lớp phủ, hãy làm theo các bước sau:

  • Ở phía trên cùng Pixel Perfect, hãy nhấp vào Load Overlay (Tải lớp phủ) rồi chọn hình ảnh của bạn.
  • Pixel Perfect hiện lớp phủ trên màn hình trong ngăn Pixel Perfect. Góc dưới bên trái của hình ảnh bitmap (X = 0, Y = giá trị tối đa) được neo vào pixel bên dưới ngoài cùng bên trái (X = 0, Y = màn hình tối đa) của màn hình.

    Theo mặc định, lớp phủ có độ trong suốt 50%. Bạn có thể điều chỉnh độ trong suốt bằng cách dùng thanh trượt Overlay (Lớp phủ) ở cuối ngăn Loupe (Kính lúp).

    Ngoài ra, theo mặc định, lớp phủ không xuất hiện trong ngăn Loupe (Kính lúp). Để hiện lớp phủ, hãy đặt chế độ Show in Loupe (Hiện trong kính lúp) ở đầu cửa sổ.