Cara Menggunakan Gambar NinePatch di iOS dan macOS

Gambar NinePatch adalah gambar PNG khusus yang memungkinkan Anda untuk meregangkan bagian tengah tetapi membiarkan tepinya tetap utuh seperti gambar itu sendiri. Ini sangat bagus untuk tombol yang dapat diubah ukurannya, latar belakang, dan elemen UI lainnya. Artikel ini akan membahas tentang cara menggunakan pustaka NinePatchKit untuk mengimplementasikan gambar NinePatch di aplikasi iOS dan macOS.

Menggunakan Gambar NinePatch di iOS dan macOS

1. Buat Gambar NinePatch

Sekarang, Anda harus membuat gambar NinePatch. Saya merekomendasikan penggunaan alat 9 Patch Editor untuk menghasilkan gambar Anda. Prosesnya adalah sebagai berikut:

Buka situs 9 Patch Editor.
Unggah gambar PNG yang ingin Anda konversi menjadi NinePatch.
Tentukan batas (Anda dapat melakukannya dengan menyeret tepinya) dan pratinjau hasilnya.
Unduh gambar NinePatch yang dihasilkan. Dalam opsi unduhan, pastikan Anda mencentang opsi "Simpan sebagai gambar terkompilasi" karena ini akan memastikan gambar Anda berisi semua metadata yang diperlukan sehingga dapat diurai dengan benar oleh NinePatchKit.

2. Sertakan Gambar NinePatch ke dalam Proyek

Anda dapat menggabungkan gambar NinePatch ke dalam bundle, Data Set, atau di mana pun yang Anda inginkan tetapi jangan pernah menambahkannya ke Image Set. Selama pembuatan, semua png yang ada di Image Set akan dioptimalkan melalui penyematan potongan CgBI dan tanpa potongan tambahan sehingga gambar NinePatch yang dikubur di Image Set tidak akan lagi berfungsi dengan benar dalam format penguraian karena modifikasi yang mereka alami.

3. Impor NinePatchKit

Selanjutnya, Anda akan memerlukan penggunaan pustaka NinePatchKit untuk membuat dan merender gambar NinePatch. Pustaka sumber terbuka ini menyediakan API yang sangat sederhana untuk gambar NinePatch, menyederhanakan penggunaannya di dalam aplikasi di iOS dan macOS. Anda dapat menautkannya ke proyek Anda melalui CocoaPods atau menambahkan kode secara manual di dalam proyek Anda.

Menggunakan CocoaPods: Tambahkan baris ini ke Podfile Anda:
```
pod 'NinePatchKit'
```
Kemudian jalankan pod install.
Integrasi Manual: Unduh pustaka NinePatchKit, dan tambahkan folder NinePatchUtils ke proyek Anda.

4. Menggunakan Gambar NinePatch dalam Kode

Sekarang, Anda dapat menggunakan NinePatchKit untuk memuat dan merender gambar NinePatch Anda. Ini adalah contoh sederhana untuk menunjukkan bagaimana Anda dapat menggunakannya di NinePatchImageView:

#import <NinePatchKit/NinePatchKit.h>
...
NSString * path = [[NSBundle mainBundle] pathForResource:@"NamaGambarNinePatchAnda" ofType:@"png"];
NinePatchImageView * imageView = [[NinePatchImageView alloc] init];
imageView.showImage = [NinePatchUtils imageWithContentsOfFile:path];

[imageView.contentView addSubview:CustomView]; // tambahkan subview ke contentView

Ganti "NamaGambarNinePatchAnda" dengan nama gambar NinePatch Anda (tanpa ekstensi). Potongan kode ini membuat NinePatchImageView, dan menggunakan NinePatchUtils, ia memuat gambar NinePatch Anda. NinePatchImageView mirip dengan UITableViewCell-mereka dapat memiliki subview tambahan yang ditambahkan ke contentView mereka untuk tata letak yang lebih kompleks.

5. Ringkasan

Jadi sekarang Anda akan dapat menggunakannya dengan mudah dengan aplikasi iOS dan macOS menggunakan grafik NinePatch. Dengan menggunakan pustaka NinePatchKit, Anda dapat dengan mudah merender gambar yang dapat diregangkan berkualitas tinggi untuk meningkatkan pengalaman antarmuka Anda.

Catatan

Format Gambar: Pastikan gambar Anda dalam format PNG yang benar dan menyertakan semua metadata NinePatch yang diperlukan.
Lokasi Gambar: Sertakan NinePatch dalam paket sumber daya proyek Anda dan muat dengan jalur yang benar. Jangan letakkan NinePatch ke dalam Image Set karena dapat merusak format gambar.