Mari Belajar iOS - Tutorial UISwitch

Tajuk: UISwitch iOS
Genius Corner Siri 56
Oleh: Fariz Gaskin

Salam ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner minggu ini, bersama latihan iOS Swift bahagian ketiga. Di dalam latihan kali ini, kita akan bina aplikasi ringkas menggunakan elemen UISwitch.

UISwitch merupakan elemen input yang memberikan pilihan binari kepada pengguna seperti contoh On/Off. Elemen ini sangat sesuai digunakan pada pilihan ‘Settings’ sesebuah aplikasi. Contohnya, memilih samada menhidupkan fungsi GPS atau tidak.

Dalam latihan kali ini, kita akan mula pelajari kaedah mendaftarkan elemen yang sama sebagai IBOutlet dan juga IBAction. IBOutlet merupakan kaedah paparan (output) manakala IBAction merupakan kaedah masukan (input).

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

Latihan

Langkah 1: Buka aplikasi Xcode dan pilih ‘Create a new Xcode project’

Langkah 2: Pilih Single View App’ sebagai template projek kali ini dan namakan projek anda sebagai mySwitch’.

Langkah 3: Klik fail Main.storyboard untuk mendapat paparan Graphical User Interface yang aktif.

Langkah 4: Cari objek ‘Switch’ di dalam Object Library pada bahagian bawah kanan Xcode dan tarik ke dalam paparan utama projek

Langkah 5: Klik ikon ‘Assistant Editor’ pada bahagian kanan atas IDE Xcode. Ikon ini ditandakan dengan imej seperti dua cincin yang bertindih

Langkah 6: Klik butang kiri tetikus bersama butang ‘control’ di keyboard pada objek UILabel, kemudian tarik dan lepas butang tetikus di antara ‘class ViewController: UIViewController’ dan ‘override func viewDidLoad’

Langkah 7: Pada tetingkap kecil yang muncul, namakan Outlet anda sebagai mySwitch

Rajah 1: mySwitch

Langkah 8: Klik butang kiri tetikus bersama butang ‘control’ di keyboard pada objek UILabel, kemudian tarik dan lepas butang tetikus di antara ‘@IBOutlet weak var mySwitch: UISwitch!’ dan ‘override func viewDidLoad’

Langkah 9: Pada tetingkap kecil yang muncul, ubah jenis hubungan dari Outlet kepada Action dan namakan hubungan tadi sebagai mySwitchAction

Rajah 2: mySwitchAction

Langkah 10: Cari objek ‘Label’ di dalam Object Library dan tarik ke dalam paparan utama projek

Langkah 11: Klik butang kiri tetikus bersama butang ‘control’ di keyboard pada objek UITextField, kemudian tarik dan lepas butang tetikus di bawah ‘@IBOutlet weak var mySwitch: UISwitch!’

Langkah 12: Pada tetingkap kecil yang muncul, namakan Outlet anda sebagai myLabelSwitch

Langkah 13: Masukkan kod aturcara berikut di dalam ‘@IBAction mySwitchAction’

Berikut adalah kod aturcara lengkap untuk ViewController.swift

Langkah 16: Klik butang run untuk mencuba hasil kerja anda!

Rajah 3: Hasil projek mySwitch

Semakan

Melalui latihan tadi, kita telah pelajari kaedah mendaftarkan elemen yang sama sebagai IBOutlet dan IBAction. Tujuan berbuat demikian ialah menghubungkan dua elemen berbeza yang akan digunakan untuk saling bertukar data.

Kemasukan data dari pengguna telah diterima melalui objek mySwitch yang kemudiannya dipaparkan pada skrin menerusi objek mySwitchLabel. Proses ini dikawal oleh fungsi mySwitchAction, yang memapar teks ‘Tracdisk Technogreen’ jika aktif, atau memadamkan sebarang paparan jika pasif.

Pelajar sekitar Keramat sedang mengikuti kelas GameSalad

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

Tambah Switch kedua
Ubah teks paparan mySwitchAction kepada teks pilihan anda
Nyatakan fungsi isHidden

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

Leave a Reply

Your email address will not be published. Required fields are marked *