Gambar NinePatch adalah gambar PNG khusus yang memungkinkan sistem Android untuk secara otomatis mengubah ukuran gambar sesuai dengan konten tanpa distorsi atau peregangan. Hal ini memungkinkan pengembang untuk membuat elemen UI yang dapat diskalakan seperti tombol, bilah progres, dan gambar latar belakang, yang tidak memiliki banyak set sumber daya untuk berbagai ukuran layar.
Membuat Gambar NinePatch
Draw 9-patch adalah alat dalam Android Studio untuk membuat dan mengedit gambar NinePatch. Ini memungkinkan pengembang untuk secara intuitif menggambar garis piksel hitam di sepanjang batas dan melihat pratinjau bagaimana tampilan gambar dalam berbagai ukuran. Ada banyak sumber daya dan aplikasi daring yang tersedia untuk membuat gambar NinePatch selain alat yang disertakan dengan Android Studio, seperti 9 Patch Editor.
Penggunaan Gambar NinePatch
Menggunakan gambar NinePatch di aplikasi Android cukup mudah: Anda menambahkannya ke folder res/drawable proyek dan kemudian mereferensikannya menggunakan android:background di file tata letak XML Anda. Contoh:
<Button android:id="@+id/tiny"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="Kecil"
android:textSize="8sp"
android:background="@drawable/my_button_background"/>
<Button android:id="@+id/big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:text="Teks Sangat Besaaar!"
android:textSize="30sp"
android:background="@drawable/my_button_background"/>
Berhati-hatilah, layout_width dan layout_height harus wrap_content untuk menampilkan tombol dengan rapi dengan teks.
Berikut ini menunjukkan dua tombol yang dirender melalui XML dan gambar NinePatch. Seperti pada gambar di atas, amati bagaimana lebar dan tinggi tombol berubah dengan teks, sementara gambar latar belakang diregangkan agar sesuai dengan layar.
Skenario NinePatch
-
Latar Belakang Tombol: Ini adalah kasus penggunaan paling umum untuk Drawable. Karena panjang teks dapat bervariasi dengan tombol yang berbeda, NinePatch memastikan bahwa gambar latar belakang dapat tertutup sepenuhnya dan tidak keluar dari batas atau berubah bentuk dengan tombol dari posisi teks di dalam. Misalnya, jika kita memiliki latar belakang tombol sudut bulat, kita akan menggunakan NinePatch dan berapapun panjang teks tombol, sudut bulat akan tetap tidak berubah.
-
Latar Belakang Bilah Progres: Ini meregangkan gambar latar belakang di seluruh jarak unit tetap dengan bilah progres di mana jarak unit berbeda dan bervariasi dengan pemuatan dari satu sistem ke sistem lainnya. NinePatch akan memastikan bahwa gaya untuk gambar Latar Belakang tidak akan terdistorsi saat diregangkan.
-
Latar Belakang untuk Item Daftar: Dalam tampilan daftar, latar belakang item daftar ini sebenarnya perlu berbeda tergantung pada panjang konten yang dimasukkan ke dalam tampilan. NinePatch memastikan bahwa gambar latar belakang meregang dengan cukup baik tanpa distorsi.
-
Latar Belakang Bingkai Dialog: Dalam kasus seperti itu, ukuran Dialog berubah dari konten. NinePatch memastikan bahwa gambar latar belakang meregang secara konsisten dengan gaya yang sama.
-
Pembagi yang Dapat Diskalakan: Dengan NinePatch, pengguna dapat merancang pembagi yang dapat diregangkan secara horizontal atau vertikal, yang melayani beberapa ukuran layar dan kemampuan adaptasi tata letak.
-
Latar Belakang Bentuk yang Ditetapkan Pengguna: NinePatch membangun berbagai latar belakang bentuk yang ditetapkan pengguna seperti sudut yang dibulatkan, dibayangi, dll. yang memiliki efek khusus yang berbeda tanpa perubahan pada efek ini saat diregangkan.
Keunggulan NinePatch
- Skalabilitas: Ini adalah keuntungan terbesar dari NinePatch. Mengubah ukuran secara otomatis berdasarkan konten, sehingga menghilangkan kebutuhan untuk memelihara beberapa set sumber daya untuk berbagai ukuran layar dan panjang konten.
- Hindari Distorsi: Kontrol koordinat dari area yang dapat diregangkan mencegah gambar dari peregangan. Sifat ketajaman dan kecantikan dipertahankan hampir setiap saat.
- Peningkatan Efisiensi: Lebih sedikit file sumber daya dan karenanya meningkatkan efisiensi dalam pengembangan.
- Pengaturan Fleksibel: Dapat dengan mudah membuat berbagai bentuk dan ukuran elemen UI agar sesuai dengan berbagai persyaratan tata letak.
Cara Kerja NinePatch
Ciri khas gambar NinePatch adalah batas piksel yang sangat sempit. Batas tersebut mendefinisikan skalabilitas dan area konten gambar. Menggambar garis piksel hitam di tepi mengatakan bagian mana yang akan diregangkan di pinggiran, yang mana secara vertikal, dan yang mana secara horizontal.
Secara khusus, batas 1 piksel dibagi menjadi empat bagian:
1. Batas Kiri (garis piksel hitam vertikal):
-
Fungsi: Mengontrol peregangan vertikal gambar. Garis piksel hitam vertikal di batas kiri mendefinisikan area gambar mana yang dapat diregangkan secara vertikal.
-
Contoh:
-
Garis piksel tanpa hitam: Tinggi gambar tetap; oleh karena itu, tidak mampu melakukan peregangan vertikal. Jika mencoba dimasukkan ke dalam wadah yang lebih tinggi dari gambar itu sendiri, ia akan tetap seperti semula dan mungkin memiliki area kosong atau terpotong.
-
Satu garis piksel hitam: Gambar dapat diregangkan secara vertikal tetapi kemudian terbatas pada area yang ditentukan oleh garis piksel hitam. Misalnya, jika garis piksel hitam ditempatkan di tengah batas kiri, itu berarti bagian atas dan bawah tidak akan berubah, dengan peregangan vertikal hanya diizinkan di bagian tengah.
-
Beberapa garis piksel hitam: Ini dapat didefinisikan oleh beberapa wilayah peregangan vertikal. Misalnya, akan ada dua garis piksel hitam di batas kiri, yang membagi gambar menjadi tiga bagian di bagian tengah yang dapat diregangkan, dengan bagian atas dan bawah tetap tidak berubah.
-
2. Batas Atas: (Garis piksel hitam horizontal air):
-
Fungsi: Mengontrol peregangan horizontal gambar. Garis piksel hitam horizontal di batas atas mendefinisikan bagian gambar yang dapat diregangkan dalam dimensi horizontal.
-
Contoh:
-
Garis piksel tanpa hitam: Lebar gambar tetap dan tidak diregangkan secara horizontal. Mirip dengan kasus garis piksel tanpa hitam di batas kiri, gambar akan tetap sama tetapi mungkin memiliki area kosong atau terpotong.
-
Satu garis piksel hitam: Gambar dapat meregang secara horizontal tetapi kemudian lagi, hanya di area yang ditentukan oleh garis piksel hitam. Misalnya, jika garis piksel hitam berada di tengah batas atas, bagian kiri gambar tidak akan berubah, juga tidak bagian kanan, hanya memungkinkan beberapa peregangan di tengah.
-
Beberapa garis piksel hitam: Ini mendefinisikan berbagai wilayah yang dapat diregangkan lateral. Seperti kasus batas kiri dengan berbagai garis piksel hitam horizontal, ini membagi gambar menjadi banyak bagian, dan bagian mana pun yang ditandai dapat meregang secara horizontal.
-
3. Batas Kanan (Garis Piksel Hitam Vertikal):
-
Fungsi: Menentukan padding kanan area konten. Garis piksel hitam vertikal di margin kanan menunjukkan batas kanan area konten gambar. Selama peregangan, sisi kanan area konten akan tetap berada di batas ini.
-
Contoh:
-
Tidak ada garis piksel hitam: Area konten memanjang hingga ke margin kanan gambar, tidak melentur saat konten meregang, membiarkan konten gambar memanjang ke tepi kanan.
-
Satu garis piksel hitam: Tepi kanan area konten ditentukan oleh posisi garis piksel hitam. Saat diregangkan, sisi kanan area konten akan tetap berada di garis piksel hitam sementara ruang di sebelah kanan diregangkan.
-
4. Batas bawah (garis piksel hitam horizontal):
-
Fungsi: Menentukan margin bawah area di mana konten dibatasi. Garis piksel hitam horizontal di bagian bawah menentukan di mana batas bawah area konten gambar berakhir. Ekstensi bagian bawah area konten akan tetap berada di batas tersebut saat diregangkan.
-
Contoh:
-
Tidak ada garis piksel hitam: area konten memanjang hingga ke tepi bawah gambar. Saat diregangkan, seluruh konten gambar meregang hingga ke tepi bawah.
-
Satu garis piksel hitam: batas bawah area konten berasal dari posisi garis piksel hitam. Saat diregangkan, bagian bawah area konten akan tetap berada di tingkat garis piksel hitam dan ruang kosong di bawah akan diregangkan.
-
Dengan menggunakan garis piksel hitam yang cerdas di keempat batas ini, pemrogram dapat mengontrol dengan tepat bagaimana tampilan gambar Nine Patch pada berbagai ukuran sambil memastikan bahwa ia melakukannya tanpa deformasi atau hilangnya area konten. Perlu diingat bahwa garis piksel tersebut adalah batas definisi area yang dapat diregangkan dari area konten, bukan batas sebenarnya dari gambar. Bagian tanpa garis piksel hitam adalah komponen berukuran tetap.
Catatan
- Gambar NinePatch harus disimpan dengan nama file yang diakhiri dengan
.9.png. - Dimensi minimum 2x2 piksel di area yang dapat diregangkan diperlukan agar gambar tidak hilang saat diskalakan.
- Ruang aman tambahan di tepi area yang dapat diregangkan dapat menghilangkan perubahan warna yang terjadi saat penskalaan.
- Pastikan untuk memeriksa area yang dapat diregangkan dan area konten gambar dengan sangat teliti agar gambar ditampilkan dengan benar pada berbagai dimensi.
- Jangan terlalu sering menggunakan gambar NinePatch terutama dalam antarmuka animasi, atau yang sering berubah, karena akan menurunkan kinerja.
Ringkasan
Gambar NinePatch adalah alat yang paling ampuh untuk meningkatkan efisiensi dalam desain UI dan meningkatkan pengalaman pengguna dalam aplikasi Android. Namun, ini tidak berarti bahwa pengembang tidak perlu menyeimbangkan kelebihan dan keterbatasan, karena pilihan jenis gambar tergantung pada persyaratan. Misalnya, meskipun Gambar NinePatch adalah pilihan yang tepat untuk latar belakang yang dapat diskalakan atau elemen UI yang perlu menerima panjang teks yang berbeda, gambar PNG biasa akan berfungsi dengan baik untuk gambar latar belakang statis-kesederhanaannya adalah kuncinya. Dalam menggunakan NinePatch, kehati-hatian dalam desain dan pengujian harus dilakukan untuk memastikan bahwa ia bekerja dengan sangat baik di berbagai perangkat dan ukuran layar.