#2 iOS Tutorial: Cara Membangun User Interface di iOS dengan Programmatically: UIKit + SnapKit

Photo by Mark Mialik on Unsplash

Hai teman-teman selamat datang di bagian kedua dari rentetan series belajar untuk mebangun user Interface (UI) di IOS menggunakan teknik programmatically. Pada bagian sebelumnya saya telah menuliskan bagaimana cara untuk membangun UI mengunakan UIkit+NSLayoutConstraint. Apabila anda belum membacanya saya sangat menyarankan anda untuk membaca bagian sebelumnya. Karena apabila anda telah mengetahui penggunaan UIKit + NSLayoutConstraint anda akan sangat bersyukur sekali bisa mengetahui UIKit + SnapKit. Kenapa bisa begitu? Akan saya bahas juga pada artikel kali ini. Anda bisa membaca bagian pertama pada link dibawah ini.

#1 iOS Tutorial: Cara Membangun User Interface di iOS dengan Programaticaly: UIKit + Auto Layout

Apa itu SnapKit?

“ Lightweight DSL (domain-specific language) to make Auto Layout and constraints a breeze to work with.” raywenderlich.com

Dikutip dari website raywenderlich.com yang dimaksud dengan SnapKit itu adalah Domain-Spesific Languange (DSL) yang ringan untuk membuat auto layout dan constraint mudah untuk digunakan. Selanjutnya akan muncul pertanyaan apa itu DSL?

“ A domain-specific language (DSL) is a language created to express and deal with a specific domain or to solve a specific problem.” raywenderlich.com

DSL sendiri merupakan sebuah bahasa yang dibuat untuk menyelesaikan suatu problem yang spesifik. Pada kasus ini SnapKit itu dibuat untuk menyelesaikan problem yang spesifik. Apa masalah spesifik yang diselesaikan oleh SnapKit? Jawabannya adalah pembuatan auto layout dan constraint.

Jadi dapat disimpulkan Snapkit itu ada untuk menyelesaikan masalah pembuatan auto layout dan constraint yang masih banyak kekurangan apabila kita hanya menggunakan bawaan UIkit, seperti NSLayoutConstraint.

Apa Fitur-Fitur yang Ada pada SnapKit?

1. Composability and Chaining

Dengan Snapkit kita bisa constraint dangan sangat mudah dan tentunya dengan sintak yang lebih singkat. Salah satunya karena kita bisa melakukan chaing / menyambungkan bebearapa constraint menjadi satu baris sintak yang mudah untuk dipahami.

Perhatikan bahwa SnapKit terdapat extenstion view bernama snp. Dengan extenstion ini kita dapat dengan mudah untuk mengakses method-method yang disediakan oleh SnapKit.

2. Modify Constraints

Dengan menggunakan SnapKit kita bisa dengan mudah untuk melakukan perubahan pada constraint yang telah kita buat sebelumnya.

Kita bisa menggunakan updateConstraints() untuk melakukan perubahan atau bisa menggunakan remakeConstraints() untuk mengganti seluruh constraints yang telah dibuat oleh SnapKit dengan menggunakan constraints baru.

3. No Specificity Needed

Perhatikan code diatas disitu kita membuat 2 constraints. Constraint pertama agar view memiliki width yang sama dengan view lain, sedangkan constraint kedua dimaksudkan agar view berada ditengah view lain secara horisontal.

Perhatikan bahwa di dalem method equalTo kita memanggil lagi otherView.snp.width dan otherView.snp.centerX. Di SnapKit kita bisa menuliskan dengan lebih singkat lagi, seperti code dibawah.

Disini kita tidak perlu lagi menuliskan lebih spesifik seperti penambahan snp.width dan snp.centerX. Snapkit otomatis tahu bawa kita akan membuat width dan centerX sama dengan view lain.

4. Debug with Ease

Hal ini menurut saya merupakan kunggulan dari SnapKit. Sering kali kesalahan pembuatan constraints itu sulit untuk dilakukan pelacakan apabila kita menggunaan fitur bawaan dari UIKit seperti NSLayoutConstraint.

Dengan menggunakan labeled yang telah disediakan SnapKit kita bisa dengan mudah untuk melakukan debuging constraints. Apabila terdapat kesalahan penulisan constraints maka SnapKit akan menginfokan di menu log dan terlihat label yang telah kita atur sebelumnya.

5. Keeping a Reference

Dengan menggunakan SnapKit kita bisa memasukan constraint kedalam suatu variable. Sehingga kita bisa melakukan perubahan terhadap constraint tersebut dengan menggunakan reference dari variable yang telah kita buat.

Studi Kasus Penggunaan Snapkit.

Pada studi kasus ini saya akan menggunakan kasus yang sama dengan studi kasus pada bagian pertama, dimana kita menggunakan UIKit + NSLayoutConstraint sedangkan pada studi kasus kali ini kita menggunakan UIKit + SnapKit. Sebagai gambaran kita akan mebuat tampilan seperti gambar dibawah ini

Let’s goo!

1. Install SnapKit pada projek iOS anda.

Kita bisa menginstall SnapKit dengan menggunakan package manager seperti Cocoapod, Cartage dan SPM. Snapkit sendiri support untuk 3 package manager populer tersebut. Silakan anda membaca pada dokumentasi SnapKit link dibawah ini untuk mengetahui bagaimana cara menginstallnya.

GitHub - SnapKit/SnapKit: A Swift Autolayout DSL for iOS & OS X

2. Buat View Controller, Delarasikan View dan Setup Constraints.

Karena pada dasarnya kita menggunakan studi kasus yang sama dengan bagian pertama disini saya akan menjelaskan bagian-bagian terpenting saja. Dibawah ini merupakan full code yang saya tuliskan pada view controller.

private func setupContraints() {
requestButton.snp.makeConstraints{ make in
make.bottom.equalTo(view.safeAreaLayoutGuide)
make.leading.trailing.equalToSuperview().inset(20)
make.height.equalTo(46)
}
changeDataTable.snp.makeConstraints{ make in
make.top.equalTo(view.safeAreaLayoutGuide)
make.leading.trailing.equalToSuperview()
make.bottom.equalTo(requestButton.snp.top).inset(-16)
}
}

Perhatikan function setupConstraints() diatas. Function tersebut digunakan untuk melakukan pengaturan constraints menggunakan SnapKit. Kita bahas satu satu yaa. Pengaturan constraints pada requestButton :

1. Atur constraint pada requestButton disitu kita menggunakan extension bawaan dari SnapKit yaitusnp. Kemudian kita panggilmakeConstraints sehingga kita bisa melakukan pengaturan constraints di dalam clousure tersebut.
2. Apa saja contraints yang kita atur pada requestButton? Kita buat bagian bawah menempel dengan bagian safe area dengan menggunakan sintak make.bottom.equalTo(view.safeAreaLayoutGuide) .
3. Selanjutnya kita buat bagian leading dan trailing menempel dengan super view dan jangan lupa untuk memberi jarak 20 pixel dengan menggunakan sintak make.leading.trailing.equalToSuperview().inset(20). Disini Kita memanfaatkan fitur chaning yang disediakan oleh SnapKit.
4. Terakhir kita atur height pada button menjadi 46 pixel dengan menggunakan make.height.equalTo(46)

Pengaturan constraints pada changeDataTable :

1. Sama seperti requestButton kita juga menggunakan snp.makeConstraints untuk membuat constrainst pada changeDataTable .
2. Selanjutnya kita atur contraint bagian atas table supaya menempel dengan safea area menggunakan sintak make.top.equalTo(view.safeAreaLayoutGuide) .
3. Kita atur contraint bagian leading dan trailing supaya menempel pada super view, tetapi disini kita tidak memberikan jarak dengan super view sehingga sintak yang kita buat seperti ini make.leading.trailing.equalToSuperview() .
4. Terakhir kita atur bagian bawah dari changeDataTable supaya menempel dengan bagian atas dari requestButton dan kita beri jarak keduanya 16 pixel. Caranya dengan menambahkan sintak make.bottom.equalTo(requestButton.snp.top).inset(-16) .

Bagaimana cukup mudah bukan? Disini jelas sekali bahwa sintaks yang ada pada SnapKit itu cukup mudah untuk dipahami dan akan menyingkat code yang kita buat dibandingkan ketika kita menggunakan NSLayoutConstraint. Saya sangat menyarankan anda untuk menggunakan SnapKit apabila ingin mebangun UI dengan cara programmatically.

3. Buat Table Cell, Deklarasaikan View dan Setup Constraints.

Pada langkah ini caranya sama seperti langkah sebelumnya. Untuk code lengkapnya silakan lihat code dibawah ini.

Perhatikan code didalam function setupConstraints()

private func setupContraints() {
detailButton.snp.makeConstraints { make in
make.centerY.equalToSuperview()
make.trailing.equalToSuperview().inset(20)
make.height.equalTo(40)
make.width.equalTo(100)
}
titleLabel.snp.makeConstraints { make in
make.top.leading.equalToSuperview().inset(20)
make.trailing.equalTo(detailButton.snp.leading).offset(8)
}
changesLabel.snp.makeConstraints { make in
make.top.equalTo(titleLabel.snp.bottom).offset(8)
make.leading.equalToSuperview().offset(20)
make.trailing.equalTo(detailButton.snp.leading).offset(8)
}
statusLabel.snp.makeConstraints { make in
make.leading.bottom.equalToSuperview().inset(20)
make.top.equalTo(changesLabel.snp.bottom).offset(8)
make.trailing.equalTo(detailButton.snp.leading).offset(8)
}
}

Apabila anda telah mengikuti dengan seksama pada langkah sebelumnya seharusnya anda bisa memahami code diatas dengan sangat mudah. Oke lanjut kita bahas satu-persatu biar lebih paham lagi.

1. pada detailButton kita atur supaya berada ditengah tengah sumbu y, bagian leading menempel ke super view dengan jarak 20 pixel, height kita buat 40 pixel dan widthnya 100 pixel.
2. Pada bagian titleLabel kita buat bagian atas dan trailing agar menempel ke super view dengan jarak 20 pixel, kemudian bagian trailing menempel dengan bagian leadingdetailButton dengan jarak 8 pixel.
3. changeLabel disini kita buat agar bagian atas menempel pada bawahtitleLabel dengan jarak 8 pixel, bagian leading kita buat agar menmpel dengan super view dengan jarak 20 pixel, sedangkan bagian trailing kita buat agar menempel bagian leadingdetailButton dengan jarak 8 pixel.
4. statusLabel pada bagian ini bagian leading kita buat menpel dengan super view dengan jarak 20 pixel, bagian atasnya kita buat menempel dengan bagian bawah dari changeLabel dengan jarak 8 pixel, sedangkan bagian trailing kita atur supaya menempel dengan bagian leading dari detailButton dengan jarak 8 pixel.

Mudah dipahami bukan? Untuk sample projek lebih lengkapnya silakan anda bisa mengujungi github link saya dibawah ini.

GitHub - galangajisusanto/Build-UI-WIth-Uikit-Snapkit-Texture: Sample projects for defferences…

Kelebihan dan Kekurangan Penggunaan SnapKit.

Kita masuk kebagian terakhir nih tetap semangat, berikut merupakan merupakan pendapat saya setelah sedikit mempelajari penggunaan SnapKit ini.

Kelebihan :

1. Sintaknya yanga ada pada SnapKit sangat intuitif dan mudah untuk digunakan.

2. Banyak Tutorial di Internet yang membahas tentang SnapKit. Hal ini tentunya akan sangat berguna bagi kita yang baru belajar penggunaan SnapKit.

Kekurangan:

1. Masih membutuhkan pengetahuan dasar pembuatan autolayout dan constraint. Minimal anda bisa membayangkan pengaturan constraints atas, bawah, leading dan trailing seperti apa.

Terima kasih buat temen-temen yang telah membaca artikel ini dari awal sampai akhir. Jangan lupa clap apabila artikel ini bermanfaat dan follow untuk dapat update artikel terbaru lainya. Semangat buat temen-teman yang baru mulai belajar iOS😘. You’re in the right way dan tidak ada ruginya buat belajar hal baru. Happy Coding!

Resource:

SnapKit for iOS: Constraints in a Snap

https://snapkit.github.io/SnapKit/docs