Storyboarding di Xcode 6

Tutorial kali ini kita akan membuat aplikasi sederhana berjudul BMI calculator menggunakan storyboard. 

Aplikasi BMI calculator ini akan meminta user memasukkan berat dan tinggi badan, kemudian ketika tombol hitung ditap, maka aplikasi akan menghitung BMI (Body Mass Index) dan menampilkannya. Kemudian dalam aplikasi kita akan tambahkan beberapa fitur pelangkap dalam rangka belajar.

Baiklah, mari kita mulai!

Buatlah project baru dengan menggunakan template Single View Application. Kalau anda belum tahu caranya, saya sarankan ikuti tutorial pengenalan Xcode. Kasih nama projectnya, misalnya BMI Calculator. Pilih bahasa pemrograman Swift dan Device iPhone. Biarkan Core Data tidak dipilih, karena kita belum akan menggunakannya.

Setelah project selesai dibuat, silakan click file Main.storyboard di layar navigator.

Seperti terlihat pada gambar di atas, di layar utama terdapat View Controller. Dalam setiap aplikasi yang kita bangun pasti ada 1 View Controller utama yang pertama kali dipanggil. Yang akan tampil di layar adalah viewController.view nya yang dalam tutorial ini akan kita isi dengan berbagai object seperti label, textfield dan button.

Menambahkan object ke dalam view controller

Untuk menambahkan object (button, texftfield, label, dll) bisa dilakukan dengan drag-and-drop. Pilih object yang ingin dimasukkan ke dalam view controller dari daftar yang ada di pojok kanan bawah kemudian drag and drop ke layar utama. Yang pertama pilihlah label dan taruh di tengah tengah sebelah atas.

Setelah object berada di layar view controller, maka kita bisa edit parameter object tersebut seperti warna, font, ukuran, dll di layar file inspector di sebelah kanan. Cobalag ganti warna textnya menjadi Merah.

Lengkapi object-objectnya dengan label, textfield dan button sehingga menjadi seperti gambar di bawah ini. Videonya bisa dilihat di sini

Kalau sudah coba jalankan aplikasi kita di simulator.

IBOutlet dan IBAction

Bagi yang pernah membuat program dengan Visual Studio mungkin akan mengira bahwa pada saat kita memasukkan object Button ke layar view controller, maka Xcode akan membuatkan beberapa baris code. Ternyata TIDAK! Xcode memiliki pendekatan yang berbeda mengenai Visual Programming. Alih-alih memasukkan code ke dalam program kita, design user interface kita diperlakukan terpisah.

Agar object-object yang kita drag and drop ke dalam layar bisa dikenali oleh program maka perlu kita kasih IBOutlet ke dalam code. Jadi IBOutlet boleh dikatakan sebagai penghubung dari Visual ke Code. Cara melakukannya adalah dengan control-drag. Namun sebelumnya pastikan layar utama kita pilih Assitant Editor pada toolbar di kanan atas. Sehingga tampilan layar utama terbelah menjadi 2, visual dan code. Kalau perlu, untuk menambah luas layar utama, kita bisa hilangkan layar utilities di sebelah kanan.

Kemudian tambahkan code ini di dalam IBAction hitungBMI

@IBAction func hitungBMI(sender: AnyObject) {
        let tinggi = tinggiBadan.text.toInt()
        let berat = beratBadan.text.toInt()
        let bmi = tinggi!/berat!/berat!
       
        BMI.text = String(bmi)
    }

Pada artikel selanjutnya kita akan membahas multi-MVC dan segue