MIT School Muslimah : [XCode] Membuat Navigation Controller

MIT School Muslimah : [XCode] Membuat Navigation Controller

Jika sebelumnya kita sudah belajar mengenai view controller (scene) dan hubungannya dengan file brain, sesaat lagi kita akan belajar tentang bagaimana menyusun beberapa view controller ke dalam satu struktur ‘bertumpuk’ (stack) menggunakan navigation controller.

Apa itu navigation controller? Sesuai namanya, navigation controller adalah jenis view controller khusus yang digunakan untuk mengatur navigasi dari serangkaian view controller. Struktur ini diibaratkan sebagai tumpukan kartu, seperti gambar navigation stack di bawah ini. Jika menggunakan navigation controller, perpindahan antar halaman akan tampak seperti tumpukan kartu dengan halaman pertama menjadi ‘kartu’ paling bawah.

stacks

Navigation Stack. Sumber: http://code.tutsplus.com/

 

Di samping itu, fitur khas yang dapat kita lihat dari navigation controller adalah adanya navigation bar di bagian atas layar. Perhatikan daerah yang dilingkari dengan warna biru. Gambar di bawah menunjukkan struktur 4 buah layar view controller yang disusun dalam navigation stack. Screen_Shot_2016-05-20_at_13_49_21

Biar lebih kebayang, coba buka iPhone-mu dan cari aplikasi yang memiliki ciri-ciri seperti di atas. ^^

Oke, konsepnya sudah ngerti ya. Tapi gimana cara bikinnya?

Membuat Navigation Controller

1. Buka aplikasi XCode-mu dan buat project baru dengan format single view application.

Screen Shot 2016-05-20 at 13.56.49

2. Seperti biasa, beri judul dan detil-detil lainnya sesuai selera.

3. Dengan men-select view controller-mu, klik Editor > Embed In > Navigation Controller.
Screen Shot 2016-05-20 at 13.59.18

..dan kamu akan mendapatkan tampilan seperti ini:

Screen Shot 2016-05-20 at 14.00.46

Yep, kamu mendapatkan tambahan navigation controller yang langsung terhubung dengan view controller pertama. Di samping itu view controller-mu juga ketambahan area navigation bar berwarna kelabu. Walau di sini tampak seolah ada dua buah halaman, sebenarnya halaman pertama (Navigation Controller, yang berwarna abu-abu) tidak akan muncul saat aplikasi dijalankan. Halaman ini hanya berperan sebagai root view controller.

4. Kamu bisa mengubah warna navigation bar dengan terlebih dahulu men-select Navigation Bar pada document outline, kemudian utak-atik bagian Bar Tint pada Attribute Inspector.

              Screen Shot 2016-05-20 at 21.34.07         Screen Shot 2016-05-20 at 21.34.15

 

5. Kamu juga bisa memberi judul pada masing-masing navigation bar. Cukup double click di bagian tengah navigation bar, dan ketikkan judul pada field yang tersedia.

Screen Shot 2016-05-20 at 21.38.47

 

6. Sekarang yuk kita coba tambahkan view controller lain. Pertama, kita membutuhkan suatu button yang akan menjadi penghubung halaman pertama dan halaman kedua. Namun jika biasanya kita menggunakan button biasa, kali ini kita akan menggunakan Bar Button Item, yang dilingkari merah ini ya, bukan button yang atas.

Screen_Shot_2016-05-20_at_14_15_31

Drag bar button item ke area navigation bar, di sebelah kanan. Hasilnya jadi seperti ini:
Screen Shot 2016-05-20 at 14.18.16

Kamu mendapatkan tambahan sebuah ‘Item’ di sisi kanan atas, di bagian navigation bar. Untuk mengganti tulisannya tinggal double click kata ‘Item’.

7. Sekarang, tambahkan layar lain. Drag sebuah view controller dari object library.

8. Terakhir, hubungkan button di navigation bar dengan view controller yang baru. Seperti biasa, control + drag dari button ke area view controller. Pilih tipe segue Push ya.

Screen Shot 2016-05-20 at 14.21.45

9. Sip! Sekarang kedua view controller-mu sudah memiliki navigation bar.

Cobalah jalankan aplikasi dan lihat apa yang terjadi…. 🙂

Ada Yang Muncul Sendiri!

Jadi kita sudah membuat dua buah halaman (view controller) yang termuat dalam navigation controller, dan menghubungkan keduanya melalui sebuah button. Halaman kedua praktis kosong. Tapi ternyata ketika dijalankan, sudah ada tombol ‘< Back’ bertengger di atas sana. Padahal nggak ada yang nambahin ya. Kok bisa muncul sendiri? Magic!

Screen Shot 2016-05-20 at 14.30.47

Jadi memang begitulah ‘bonus’ yang diberikan oleh navigation controller. Jika tidak diutak-atik, bagian kiri dari navigation bar otomatis terisi dengan tombol back yang akan menampilkan layar sebelumnya (menutup layar yang sedang dibuka).

 

Tapi Kalau Kita Mau Mandiri…

Kita juga bisa menambahkan sendiri tombol ‘Back’ seperti di atas secara programatikal kok. Untukmu yang berjiwa mandiri, ikuti petunjuk berikut:

1. Select view controller-mu yang kedua. Drag bar button item ke area kiri navigation bar. Beri nama ‘< Back’. Jadinya seperti ini ya…
Screen Shot 2016-05-20 at 14.42.43

2. Oh iya, kita belum membuat file brain untuk view controller kedua ini. Jadi mari dibuat. File > New > File > select Cocoa Touch Class, klik Next, dan beri nama.

3. Hubungkan button ‘<Back’ dengan file brain. Di dalam function-nya, masukkan kode berikut:

self.navigationController?.popViewControllerAnimated(true)
Kode ini akan mengembalikan kamu ke halaman sebelumnya.
Tapi bagaimana kalau kita memiliki sejumlah halaman dan ingin kembali ke awal, bukan sekadar kembali ke satu halaman sebelumnyaBisa kok. Buat saja suatu function (misalnya berupa button ‘HOME’) dan masukkan kode berikut:
self.navigationController?.popToRootViewControllerAnimated(true)
Yey, selesai! 😀

Related posts:

Loading Facebook Comments ...