#1 iOS Tutorial: Cara Membangun User Interface di iOS dengan Programaticaly: UIKit + Auto Layout
Hello kawan, senang sekali sudah bisa kembali menulis dimedium setelah vakum cukup lama. Pada kesempatan kali ini saya ingin berbagi tentang bagaimana cara membuat user interface (UI) di iOS terutama menggunakan programatically. Artikel ini terlahir karena acara sharing session kemarin di internal team iOS tempat saya bekerja. Disitu saya membandingkan membuat UI dengan cara programatically menggunakan UIkit dan auto layout bawaan, Uikit + Snapkit dan Texture. Pada artikel kali ini saya ingin sedikit berbagi pengalaman saya tentang cara membangun UI di iOS menggunakan UIKit dan auto layout dengan cara programatically. Selamat membaca temen-teman.
Ada banyak cara untuk membangun UI diOS yaitu kita bisa menggunakan storyboard, xib dan programatically. Semua itu punya kelebihannya dan kekurangan masing-masing. Kenapa sih kita memutuskan menggunakan cara programatically? ada beberapa faktor yang menurut saya pribadi cukup penting, yaitu:
- Tidak ada lagi konflik di storyboard atau xib file. Konflik biasa terjadi ketika kita mengerjakan disatu file yang sama. Permasalahannya adalah file yang di dalam storyboard atau xib itu berupa xml yang tidak manusiawi dan susah sekali untuk dibaca. Itulah yang menyebabkan resolve konflik di storyboard atau xib akan sangat susah. Dengan menggunakan programatically berarti kita tidak menggunakan file storyboard atau xib lagi sehingga tidak akan ada lagi konflik di storyboard atau xib.
- Programatically lebih cepat ketimbang storyboard atau xib. Hal ini juga bisa menjadi pertimbangan untuk temen-temen memilih menggunakan programatically dari pada storyboard atau xib. Kenapa menggunakan storyboard atau xib lebih lambat? ini dikarenakan ketika menggunakan metode tersebut dibelakangnya storyboard atau xib terdapat proses membaca terlebih dahulu dari disk, menganalisanya dan kemudian parsing. Hal tersebut akan membuatnya lebih lambar.
- Masih ada keterbatasan di storyboard atau xib. Contohnya ketika kita ingin menambahkan drop sahadow atau membuat rounded di sebuah button misalnya. Hal tersebut tidak bisa dilakukan dengan mudah di storyboard atau xib, biasanya kita perlu menggunakan cara programatically untuk melakukan hal custom tersebut.
Sebelum memulai ke langkah-langkah cara membangun UI menggunakan programatically alangkah lebih baik temen-temen sebelumnya pernah menggunakan cara storyboard atau programatically. Temen-temen harus tau dulu apa saja komponen view yang terdapat di dalam UIKit, seperti image view, text view, table view dan lain sebagainya. Temen-temen juga harus bisa membayangkan minimal pembuatan auto layoutnya seperti apa dan constraint antar komponan viewnya bagaimana. Jika sudah ada gambaran baru nih temen-temen bisa menggunakan cara programatically ini dengan lebih mudah.
Sebagai gambaran, kita akan membuat sebuah aplikasi dengan tampilan seperti gambar dibawah ini.
Kita mulai masuk ke langkah-langkahnya ya. Let’s go!
Langkah 1: Break down komponen apa saja yang dibutuhkan.
Okee jika dilihat untuk membuat tampilan seperti diatas kita membutuhkan button, table view, dan sebuah cell yang akan menampung data. Di dalam cell terdapat 3 buah text view dan satu button. Di langkah ini temen-temen minimal sudah tahu komponen penyusun view di human interface design (HIG) iOS ada apa saja. Untuk lebih memperdalam kamu bisa membaca langsung dokumentasi si apple di link di bawah. Lanjutt…
Langkah 2: Buat file view controllernya dan deklarasikan view apa saja yang dibutuhkan.
View controller di iOS sendiri pada dasarnya merupakan penampung atau dasar dari tampilan yang akan kita buat. View controller sendiri memiliki lifecycle dimana kita sebagai iOS engineer wajib untuk mengetahuinya. Mungkin di lain waktu kita bahas tentang itu yaa, oke langsung saja silahkan pahami code dibawah.
Disini kita membuat satu button dan satu table jangan lupa untuk menambahkan addSubview sehingga kita bisa menyusun auto layoutnya. function viewDidLoad merupakan salah satu dari lifecycles view controller, pada intinya function tersebut hanya dipanggil sekali saja setelah semua view telah berhasil di load. Sesuai sama namanya ;D di function tersebutlah kita akan melakukan pengaturan autolayout dan contraint masing-masing view.
Langkah 3: Setting constraints programatically.
Buat function untuk menampung semua contraints terlebih dahulu kemudian kita panggil di dalam viewDidLoad, setelah itu kita mulai mengatur constraints untuk masing-masing view yang telah kita buat.
Perhatikan bahwa kita perlu mengatur translatesAutoresizingMaskIntoConstraints menjadi false sebelum mengatur constaintsnya. Ketika kita menggunakan story board atau xib otomatis translatesAutoresizingMaskIntoConstraints bernilai false. Saya ambil contoh cara mengatur constraint pada pada requestButton. Jika di break down kita membuat code untuk melakukan perintah ini:
- Atur constraint bagian bawah requestButton sama dengan safe area bagian bawah.
- Bagian leading dan trailing requestButton kita samakan dengan bagian view dan beri jarak 20 pixel.
- Setelah itu kita buat height button tersebut menjadi 46 pixel.
Untuk bagian changeDataTable sendiri kita lakukan perintah sebagai berikut:
- Atur constraint atas changeDataTable agar sama dengan safe area bagian atas.
- Leading dan trailing changeDataTable kita samakan dengan view, akan tetapi disini kita tidak memberikan jarak.
- Terakhir kita buat bagian bawah table agar menempel ke bagian atas requestButton dan beri jarak 16 pixel.
Perhatikan bahwa untuk bagian bottom (bawah) dan trailing saat mengatur jarak perlu menggunakan angka negatif.
Langkah 4: Buat data model dan generate dummy data.
Code diatas terdapat static function generateChangeData untuk melakukan generate 100 data dummy yang akan kita tampilkan ke dalam table view.
Langkah 5: Buat custom cell.
Pada langkah ini sebenarnya kita melakukan pengulangan dari langkah 2 dan 3. Yaitu:
- Pertama kita deklarasikan apa saja komponen view yang dibutuhkan dan sekalian melakukan styling disana.
- Kemudian kita mulai melakukan setup constraint yang kurang lebih mirip-mirip dengan bagian view controller. Bedanya disini kita memanggil function setupContraint pada function init. Function init merupakan sebuah function yang pertama kali dijalankan pada saat kita membuat objek tersebut.
Langkah 6: Setup table dan data source delegate.
Kita break down apa yang kita jalankan satu-satu ya:
- Pertama kita perlu membuat variable changeDataCellId untuk menampung id cell dan changesData untuk menampung dummy data.
- Kemudian buat function setupTable dan panggil di dalam viewDidLoad. Didalam function setupTable kita melakukan register cell dan atur data source delegate ke class view controller itu sendiri.
- Terakhir kita buat extension UITableViewDataSource. di dalamnya kita wajib untuk mengoverride numberOfRowInSection dan cellForRowAt. numberOfRowInSection digunakan untuk mengatur jumlah barisnya ada berapa sedangkan cellForRowAt digunakan untuk mengatur cell yang akan kita tampilkan di table view.
Akhirnya kita telah sampai di penghujung nih. Oh ya untuk lebih lengkapnya bagian view controller akan menjadi seperi ini.
Sebelum dijalankan aplikaSinya apabila temen-temen ikut membuat codenya dari projek awal jangan lupa untuk menghapus semua file story board, hapus referensi ke main story board pada project setting dan info.plist. Terakhir pada SceneDelegate kamu perlu menambahkan code untuk mengatur default view controller yang akan pertama kali dijalankan pada saat aplikasi di run.
Sekarang lah saat yang ditunggu-tunggu, jalankan programnya dan bamm!😁 Seharusnya akan muncul tampilan sama persis dengan yang saya lampirkan di awal.
Untuk projek lengkapnya temen-temen bisa mengunjungi akun github saya di link di bawah. Disitu sebenarnya terdapat perbandingan penggunaan UIKit saja, UIkit+Snapkit dan Texture.
Terima kasih buat temen-temen yang sudah membaca artikel ini dari awal sampai akhir dan semoga bermanfaat. Jangan lupa clap apabila artikel ini bermanfaat dan follow untuk tetap mendapatkan artikel-artikel yang menarik lainya. Jadi tungguin terus yaa, artikel berikutnya bakalan ada lebih menarik lagi nih yaitu building UI menggunakan snapkit dan texture. Saya akan tuliskan pada artikel yang terpisah sehingga bisa lebih jelas dan lebih dalam lagi. Semangat buat temen-temen masih strugle buat meraih cita-citanya. Saya yakin semua akan indah pada waktunya.
Keep the spirit and happy coding!
