Membuat Bitmap Yang Bisa Diubah Ukurannya (file 9-Patch)

Alat bantu Draw 9-patch adalah editor WYSIWYG yang disertakan dalam Android Studio yang memungkinkan Anda membuat gambar bitmap yang secara otomatis berubah ukurannya untuk menampung materi tampilan dan ukuran layar. Bagian-bagian gambar yang dipilih diubah secara horizontal atau vertikal berdasarkan indikator yang digambarkan dalam gambar.

Untuk pengantar ke grafis NinePatch dan cara kerjanya, bacalah bagian tentang Drawable NinePatch dalam dokumen Kanvas and Drawable.

Gambar 1. Gambar NinePatch dalam alat bantu Draw 9-patch Android Studio.

Berikut adalah panduan cepat untuk membuat grafis NinePatch menggunakan alat bantu Draw 9-patch dalam Android Studio. Anda membutuhkan gambar PNG yang akan dibuat gambar NinePatch-nya.

  1. Dalam Android Studio, klik kanan gambar PNG yang ingin Anda buat gambar NinePatch-nya, lalu klik Create 9-patch file.
  2. Ketik nama file untuk gambar NinePatch Anda, dan klik OK. Gambar Anda akan dibuat dengan ekstensi file .9.png.
  3. Klik dua kali pada file NinePatch baru Anda untuk membukanya di Android Studio. Workspace Anda sekarang terbuka.

    Panel kiri adalah area gambar Anda, yang barisnya bisa Anda edit untuk patch dan area materi yang dapat diregangkan. Panel kanan adalah area pratinjau, Anda bisa melakukan pratinjau grafis ketika diregangkan di sini.

  4. Klik dalam perimeter 1-piksel untuk menggambar garis yang mendefinisikan patch dan area materi (opsional) yang dapat diregangkan. Klik kanan (atau tahan tombol Shift dan klik, pada Mac) untuk menghapus garis yang digambar sebelumnya.
  5. Bila selesai, klik File > Save untuk menyimpan perubahan Anda.

Anda bisa membuka file NinePatch yang ada dalam Android Studio dengan mengeklik ganda file tersebut.

Untuk memastikan bahwa grafis NinePatch diperkecil dengan tepat, lakukan verifikasi bahwa setiap area yang dapat diregangkan setidaknya berukuran 2x2 piksel. Jika tidak, grafis mungkin tidak terlihat ketika diperkecil. Selain itu, berikan satu piksel ruang aman ekstra dalam grafis sebelum dan setelah area yang dapat diregangkan untuk menghindari interpolasi selama penskalaan yang mungkin menyebabkan warna pada batas berubah.

Catatan: File PNG normal (*.png) akan dimuat dengan batas satu-piksel kosong yang ditambahkan di sekitar gambar, Anda bisa menggambar patch yang dapat diregangkan dan area materi. File NinePatch (*.9.png) yang disimpan sebelumnya akan dimuat apa adanya, tanpa penambahan area gambar, karena telah ada.

Gambar 2. Gambar NinePatch yang menunjukkan materi, patch, dan patch buruk.

Kontrol opsional meliputi:

  • Zoom: Menyesuaikan level pembesaran grafis di area gambar.
  • Patch scale: Menyesuaikan skala gambar di area pratinjau.
  • Show lock: Memvisualkan area yang tidak dapat digambar dari grafis saat kursor mouse di atasnya.
  • Show patches: Melakukan pratinjau patch yang dapat diregangkan di area gambar (merah muda adalah patch yang dapat diregangkan), seperti yang ditampilkan dalam gambar 2, di atas.
  • Show content: Menyorot area materi di gambar pratinjau (ungu adalah area yang materinya diizinkan), seperti yang ditunjukkan dalam gambar 2.
  • Show bad patches: Menambahkan batas merah di sekitar area patch yang mungkin menimbulkan artifak dalam grafis ketika diregangkan, seperti yang ditunjukkan dalam gambar 2. Keterpaduan visual gambar yang diregangkan akan dipertahankan jika Anda menyingkirkan semua patch buruk.