Google berkomitmen untuk mendorong terwujudnya keadilan rasial bagi komunitas Kulit Hitam. Lihat caranya.

Pixel Perfect!

Pixel Perfect tidak digunakan lagi. Mulai dari Android Studio 3.1, sebaiknya Anda menggunakan Layout Inspector untuk membandingkan tata letak aplikasi Anda dengan tiruan desain, menampilkan tampilan aplikasi yang diperbesar, dan memeriksa detail tata letak aplikasi.

Pixel Perfect adalah alat yang disertakan dalam Android Device Monitor yang menampilkan tampilan aplikasi yang diperbesar sehingga Anda dapat memeriksa posisi dan properti masing-masing piksel dalam tata letak aplikasi Anda, serta membantu mencocokkan tata letak aplikasi Anda dengan tiruan desain.

Memulai Pixel Perfect

Gambar 1. Android Device Monitor

  1. Sambungkan perangkat ke komputer Anda. Jika muncul pertanyaan dari dialog di perangkat, Izinkan proses debug USB?, ketuk Oke.
  2. Buka project Anda di Android Studio, build dan jalankan project tersebut di perangkat.
  3. Mulai Android Device Monitor. Android Studio mungkin menampilkan dialog Disable adb integration karena hanya satu proses yang dapat terhubung ke perangkat melalui adb, dan Android Device Monitor akan meminta koneksi. Jadi klik Yes.

    Gambar 1 mengilustrasikan hal yang pertama muncul di Android Device Monitor.

  4. Pada panel menu, pilih Window > Open Perspective, lalu klik Pixel Perfect.
  5. Klik dua kali nama perangkat di tab Windows di sebelah kiri. Ini mengisi panel dengan tampilan perangkat dan beralih ke tab Pixel Perfect Tree.

Memahami alat-alat lebih dalam

Anda akan melihat tiga panel berikut:

  • View Object (kiri): Panel ini adalah daftar hierarkis objek View yang terlihat di layar, termasuk objek yang dimiliki oleh sistem. Saat Anda mengklik sebuah tampilan, posisinya akan disorot di panel Pixel Perfect di sebelah kanan.
  • Pixel Perfect Loupe (tengah): Panel ini adalah gambar layar yang diperbesar. Panel ini ditindih oleh sebuah petak, yang setiap perseginya merepresentasikan satu piksel. Untuk melihat informasi sebuah piksel, klik perseginya. Informasi warna dan koordinat X/Y piksel ditampilkan di bagian bawah panel.

    Garis bidik pada panel ini bersesuaian dengan garis bidik pemosisian pada panel Pixel Perfect (kanan).

    Untuk memperbesar/memperkecil, gunakan penggeser Zoom di bagian bawah panel, atau gunakan roda scroll mouse.

  • Pixel Perfect (kanan): Panel ini menampilkan layar perangkat.

    Garis bidik pada panel ini bersesuaian dengan garis bidik pada panel Loupe.

    Tampilan yang dipilih pada panel View Object juga dibatasi di sini dengan kotak warna merah gelap. Tampilan yang setara dan tampilan induk dibatasi dengan kotak warna merah cerah.

    Kotak tata letak mungkin memiliki persegi panjang lain di dalam atau di luarnya, yang masing-masing menunjukkan bagian dari tampilan. Persegi panjang berwarna ungu atau hijau menunjukkan kotak pembatas tampilan. Kotak putih atau hitam di dalam kotak tata letak merepresentasikan padding tampilan. Persegi panjang putih atau hitam bagian luar mewakili margin. Kotak padding dan margin berwarna putih jika latar belakang tata letaknya berwarna hitam, dan sebaliknya.

    Anda dapat menyimpan screenshot dengan mengklik Save as PNG di bagian atas jendela.

Gambar 2. Jendela Pixel Perfect

Secara default, panel ini tidak memuat ulang saat UI di layar berubah. Untuk mengaktifkan muat ulang otomatis, aktifkan Auto Refresh di bagian atas jendela, lalu tetapkan rasio muat ulang dengan penggeser Refresh Rate di bagian bawah panel Loupe.

Atau, Anda dapat memuat ulang panel Pixel Perfect dan panel Loupe secara manual dengan mengklik Refresh Screenshot di bagian atas jendela. Anda juga mungkin perlu memuat ulang panel View Object dengan mengklik Refresh Tree di bagian atas jendela.

Menambahkan gambar overlay

Jendela Pixel Perfect membantu Anda mencocokkan tata letak aplikasi dengan gambar tiruan dengan memungkinkan Anda memuat bitmap sebagai overlay di jendela Pixel Perfect.

Untuk menggunakan gambar bitmap sebagai overlay, ikuti langkah-langkah berikut:

  • Di bagian atas Pixel Perfect, klik Load Overlay, lalu pilih gambar Anda.
  • Pixel Perfect menampilkan overlay di atas layar pada panel Pixel Perfect. Sudut kiri bawah gambar bitmap (X=0, Y=nilai maksimum) melekat pada piksel bawah paling kiri (X=0, Y=layar maksimum) dari layar.

    Secara default, overlay memiliki transparansi 50%. Anda dapat menyesuaikannya dengan penggeser Overlay di bagian bawah panel Loupe.

    Juga secara default, overlay tidak ditampilkan di panel Loupe. Untuk menampilkannya, setel Show in Loupe di bagian atas jendela.