Lanjutan Soryboarding : Segue

Pada tulisan kali ini kita akan melanjutkan pelajaran sebelumnya mengenai Storyboard. Kali ini kita akan membuat aplikasi sederhana yang melibatkan multiple view controller, seperti pada gambar di atas.

Tab Bar Controller

Pertama-tama buatlah project baru dengan menggunakan template Tabbed Application. Beri nama project misalnya Latihan 3. Kemudian pilih Main.storyboard. Seharusnya muncul gambar seperti di bawah ini.

Anda bisa melakukan zoom-in/zoom-out jika diperlukan dengan cara mengklik kanan mouse sehingga muncul pilihan zoom seperti pada gambar di atas. Pilih zoom 50% supaya tampil semua view controller.

Salah satu keuntungan menggunakan storyboard adalah kita bisa menggambarkan aplikasi kita secara konseptual dengan jelas. Dibandingkan melihat code-code yang sulit dibayangkan tampilannya, dengan storyboard kita bisa lihat bukan saja tampilan layar, tetapi hubungan antara layar satu (view controller) dengan layar lainnya. 

Seperti dicontohkan di atas, kita bisa lihat aplikasi kita ada dua tab. Untuk lebih memahami apa yang terjadi coba jalankan aplikasinya di iOS simulator.

Kita akan melanjutkan storyboard di atas dan membuat game "Number Game" yang terdiri dari 3 jenis game yaitu:

Nama Game Deskripsi
Tebak Angka User menebak suatu angka yg dihasilkan secara random antara 1-100. Nanti akan dikasih bantuan sampai ketemu angkanya. Makin sedikit bantuan, makin besar scorenya
Mengingat Angka Sederetan angka akan ditampilkan sekilas, kemudian kita harus mengingatnya dan memasukkan kembali angka tersebut
Mencari Angka Sebuah angka disembunyikan di antara sebuah barisan bilangan. Anda harus mencari bilangan yg tidak sesuai dengan barisan tsb

 

Kita akan membuat 4 tab dgn judul : Home, Tebak Angka, Ingat Angka, dan Cari Angka seperti di bawah ini. Silakan dibuat.

Custom Modal Segue

Segue adalah perpindahan dari satu view controller ke view controller lain. Pada project tabbed application di atas, segue terjadi ketika kita tap tab bar button di bagian bawah layar. Pada Master-Detail Application, segue terjadi antara Master VC ke Detail VC ketika kita tap salah satu cell di table, dilakukan secara programmatically.

Kita juga bisa membuat membuat segue sendiri secara custom menggunakan modal seperti yang ditunjukkan pada video di bawah ini.

Seperti terlihat pada contoh tersebut, untuk kembali ke tampilan awal (presenting view controller), kita menggunakan perintah self.dismissViewControllerAnimated()

@IBAction func backHome(sender: UIButton) {
    self.dismissViewControllerAnimated(true , completion: nil)
  }

Sebetulnya kita juga bisa membuat segue programmatically, misalnya kita ingin memanggil suatu View Controller jika kondisi tertentu dipenuhi. Untuk itu kita perlu memberi id segue kita tersebut, agar nanti kita bisa panggil dengan perintah di bawah ini.

self.performSegueWithIdentifier("namaSegue", sender: self)