Membuat Color Picker berdasarkan Gambar dalam aplikasi iOS
Cara membuat sistem color picker berdasarkan gambar yang dimiliki pada aplikasi iOS
Dalam aplikasi iOS, memilih warna berdasarkan RGB atau CMYK sudah biasa. Bagaimana jika user diperbolehkan memilih warna menggunakan color picker? Tetapi sistem ini juga dimodifikasi sehingga bisa mengambil warna berdasarkan gambar yang telah dimasukkan.
Berikut adalah tampilan aplikasi yang akan dibuat:
Pada bagian atas tampilan terdapat UIImageView yang akan kita gunakan sebagai gambar atau tempat kita memilih warna. Lalu, terdapat lingkaran pada gambar berupa CGRect yang dapat dipindahkan untuk memilih warna. Sedangkan di bagian bawah tampilan terdapat UIView dengan background yang akan berubah-ubah sesuai dengan warna yang dipilih.
Desain Tampilan
Pertama, buat project baru di Xcode. Saya menggunakan storyboard pada contoh ini.
UIImageView berukuran maksimal pada layar dengan aspect ratio 1:1 dan di bawahnya terdapat UIView dengan ukuran lebar maksimal dan tinggi 100px. Pemberian warna biru hanya digunakan untuk memudahkan melihat. Untuk CGRect yang nantinya terintegrasikan akan dibuat secara programmatically.
Setelah itu, jangan lupa untuk mengkoneksikannya pada ViewController. Pada contoh ini, saya menggunakan variabel imageView dan colorView.
Mengubah CGPoint menjadi warna
Mari kita memahami konsep aplikasi ini. Untuk mendapatkan warna pada sebuah gambar, kita membutuhkan posisi lingkaran. Posisi di sini berupa CGPoint.
CGPoint pada picker belum tentu sama dengan CGPoint pada gambar. Mengapa? Posisi CGPoint memang selalu berada di posisi pojok kiri atas, begitupun pada posisi picker terhadap layar. Namun, content mode pada ImageView dapat membedakan point pada layar dan gambar. Bayangkan sebuah gambar persegi panjang 16:9 dipotong oleh image view berukuran 1:1 dengan content mode Aspect Fit. Aspect Fit akan men-crop gambar menjadi ukuran yang pas dengan image view yang ada. Dengan begitu, pojok kiri atas gambar bukanlah posisi x=0, y=0. Kita perlu membuat sistem converternya.
Sistem converter ini dibuat berdasarkan setiap content mode yang dimiliki pada pengaturan image view. Dengan parameter CGPoint picker, lalu akan diubah menjadi CGPoint pada gambar.
Setelah mendapatkan point pada gambar, kita akan ubah point yang ada menjadi warna.
Membuat Custom Class untuk Image View
Setelah membuat sistem pengubah point menjadi warna, mari kita memahami konsep imageview. Image View yang akan dibuat akan menerima sentuhan (touch), lalu picker akan berubah posisi menjadi tempat user menyentuh dan mengambil warna berdasarkan posisi tersebut. Perubahan warna akan terjadi secara real-time sehingga tidak ada jeda waktu antara pergeseran picker dengan perubahan warna.
Custom class ini kita beri nama ColorPickerImageView. Class ini bertanggung jawab atas semua proses yang terjadi terhadap Image View termasuk sentuhan yang terjadi. Harapannya setelah class ini memproses data, warna akan dikirimkan ke dalam ViewController melalui protocol. Protocol ini bernama ColorPickerImageViewDelegate yang berisikan sebuah method, yaitu:
func didPickColor(with color: UIColor, in imageView: UIImageView)Selanjutnya, kita buat sistem pickernya secara programmatically. Kita atur posisi awal picker adalah (0,0)
var pickerStartPoint: CGPoint = CGPoint(x: 0, y: 0)dan, kita buat pickernya. Note: saya buat pickernya adalah lingkaran.
private lazy var pickerView: UIView = {
let view = UIView(frame: CGRect(origin: pickerStartPoint, size: CGSize(width: 50, height: 50)))
view.layer.cornerRadius = view.frame.width * 0.5
view.layer.borderColor = UIColor.gray.cgColor
view.layer.masksToBounds = true
view.layer.borderWidth = 2
view.layer.contentsScale = UIScreen.main.scale
return view
}()Jangan lupa untuk menyambungkan class ini dengan protocol yang sudah kita buat sebelumnya.
weak var delegate: ColorPickerImageViewDelegate?Karena picker ini nantinya bisa digeser-geser, maka harus kita atur interaksinya.
override func awakeFromNib() {
super.awakeFromNib() setup()
}
private func setup() {
isUserInteractionEnabled = true
addSubview(pickerView)
}
Sekarang, kita perlu mengatur berdasarkan interaksi user ketika sentuhan dimulai (touchesBegan) dan sentuhan digeser (touchesMoved). Kedua fungsi ini merupakan bawaan class untuk memberitahu sistem apa yang harus dilakukan ketika adanya perubahan sentuhan. Pada aplikasi ini, ketika ada pergeseran picker, maka picker akan mengambil posisi dan mengubahnya menjadi warna berdasarkan gambar di bawahnya.
Setelah selesai, sekarang kita memiliki ColorPickerImageView sebagai pengganti ImageView yang sudah dibuat sebelumnya. Ubahlah class ImageView pada storyboard dan ViewController menjadi ColorPickerImageView.
Selanjutnya, mari kita berpindah pada ViewController.swift untuk menjalankan sistem yang sudah kita buat sebelumnya. Sambungkan protocol ColorPickerImageViewDelegate pada class, lalu pasang delegate pada viewDidLoad().
class ViewController : UIViewController, ColorPickerImageViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
imageView.delegate = self
}
}Terakhir, pasang fungsi pada protocol, yaitu didPickColor untuk menampilkan perubahan setelah data telah diproses.
func didPickColor(with color: UIColor, in imageView: UIImageView) {
colorView.backgroundColor = color
}Note: colorView adalah tampilan setelah memilih warna. Warna biru apabila mengikuti contoh gambar di atas.
Akhirnya, program color picker kita telah selesai. Untuk mendapatkan kode lengkapnya, klik di sini.
Kesimpulan
Pada tutorial kali ini, kita belajar bagaiman mengubah posisi menjadi warna berdasarkan gambar yang ada di belakangnya. Sekali lagi, tidak perlu kita menggunakan 3rd party library namun kita bisa membuatnya sendiri. Dengan menambah ilmu, kelak ke depannya kita bisa membuat library sendiri. Amin…
Semoga artikel ini mampu berguna untuk masa depanmu. Selamat mencoba dan semoga berhasil.
