Tab helaian merupakan elemen navigasi yang menguruskan paparan antaramuka menggunakan kaedah pilihan radio-style. Setiap pilihan akan memaparkan View Controller yang berbeza.

Elemen Tab helaian ini diletakkan pada bahagian bawah paparan skrin, supaya paling hampir dengan ibu jari pengguna telefon mudah alih. Apabila pengguna memilih salah satu item dari menu Tab ini, paparan baru yang dipilih akan menggantikan paparan terdahulu.

Contoh terbaik penggunaan Tab helaian ini ialah aplikasi Instagram. Melalui menu Tab yang disediakan, pengguna boleh mengakses kesemua fungsi utama aplikasi, menjadikan setiap elemen yang disediakan di dalam Instagram digunakan dengan optimum.

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 myTabMenu.

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

LANGKAH 4: Klik untuk mengaktifkan View Controller sedia ada.

LANGKAH 5: Kemudian, klik pada menu Editor > Embed In > Tab Bar Controller seperti rajah 1.

LANGKAH 6: Klik View Controller anda dan ubah Tab Bar Item dari Custom kepada History. Kaedah ini digunakan untuk mengubah ikon yang dipapar pada item menu Tab.

LANGKAH 7: Leret dan lepas sebuah View Controller baru dari library ke dalam Main.Storyboard, aturkan di bawah View Controller yang pertama.

LANGKAH 8: Klik butang kiri tetikus bersama butang Control di papan kekunci pada view Tab Bar Controller, kemudian tarik dan lepas butang tetikus pada View Controller kedua untuk menghidupkan 
sambungan di 
antara kedua-dua Controller tadi.

LANGKAH 9: Pada 
tetingkap 
kecil yang muncul, pilih hubungan View Controller dari senarai Relationship Segue yang dicadangkan.

LANGKAH 10: Ubah warna latar kedua-dua View bagi memudahkan anda melihat hasilnya kelak

LANGKAH 11: Klik butang Run untuk mencuba hasil kerja anda. Latihan kali ini tidak mempunyai sebarang kod atur cara.

SEMAKAN

MENERUSI latihan tadi, kita telah pelajari kaedah kedua membina aplikasi yang memiliki lebih dari satu paparan.

Kaedah pertama telah kita pelajari melalui ruangan Genius Corner siri 68 yang lepas.

Kaedah yang disediakan melalui Xcode ini sangat mudah dan tidak memerlukan sebarang kod aturcara tambahan.

Anda juga boleh mengubahsuai paparan menu Tab serta elemen yang terkandung dalam setiap View tanpa mengganggu Tab utama, mahupun View yang lain.

SOALAN

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

  1. Tambah View Controller ketiga
  2. Ubah Tab Bar Item dan warna latar pada View Controller ketiga
  3. Gabungkan projek Navigation Controller dan Tab Bar Controller

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!