Navigation Controller dan Segue di iOS – FoodPin Apps

Yang perlu diketahui pertama kali apa itu Navigation Controller? Seperti halnya dengan table view, navigation controller merupakan element UI lainnya yang biasanya digunakan ketika mengembangkan aplikasi iOS. Ini biasanya bertanggung jawab untuk memperlihatkan hirarki pada asebuah aplikasi.

Navigation Controller Cover

Contohnya seperti aplikasi Photos, Youtube, dan Contact, aplikasi tersebut menggunakan navigation controller untuk menampilkan hirarki dari konten aplikasi. Biasanya table view controller dan navigation controller bekerja sama untuk banyak aplikasi, tapi bukan berarti kita harus menggunakan keduanya.

Navigation Controller

Scene dan Seque di Storyboard

Sejauh ini kita telah membuat satu layout view controller di storyboard untuk membangun aplikasi FoodPin. Storyboard memperbolehkan kita untuk membuat lebih dari satu layout. Kita juga bisa dengan mudah menghubungkan view controller di navigation controller dan membuat transisi antara keduanya. Ketika kita bekerja dengan Storyboard, scene dan segues terdiri dari dua term yang selalu jalan berbarengan. Dengan storyboard, scene menghubungkan dengan single view controller dengan tampilannya. Setiap scene memiliki dock, yang digunakan untuk membuat action dan outlet connection antara view controller dengan tampilannya. Segue di pasanga antara dia scene dan yang mengatur dua transisi antara dua scene, dimana Push dan Model merupaka tipe transisi yang digunakan.

 

Membuat Navigation Controller

Kita akan melanjutkan pengembangan aplikasi FoodPin. Setelah kita mengikuti tutorial di postingan selanjutnya, kita menambahkan fitur transisi pada aplikasi menggunakan navigation controller. Jadi skenarionya, ketika kita memilih salah satu restaurant, maka aplikasi akan mengarahkan kita ke halaman selanjutnya untuk menampilkan detail dari restaurant.

Jalankan Xcode dan buka project FoodPin kembali, lalu pilih Main.srotyboard untuk mengganti editor storyboard. Namun kita hanya membuat table view controller. Nah Xcode menyediakan fitur embed untuk membuat penyimpanan view controller di navigation controller jadi lebih mudah. Pilih table view controller dan klik “Editor” di menu. Pilih “Embed in” dan kemudian “Navigation Controller”, seperti gambar dibawah ini.

Embed table view controller di navigation controller
Embed table view controller di navigation controller

Xcode akan otomatis menyimpan controller dengan navigation controller seperti gambar dibawah ini.

Embed view controller dengna Navigation Controller
Embed view controller dengna Navigation Controller

Tambahkan judul untuk navigation bar, dengan memilih navigation bar dari table view controller. Dibawah Attribut Inspector, pasang namnay dengan “Food Pin”. Sekarang jalankan aplikasi dan lihat bagaimana itu bekerja. Aplikasinya akan sama, tetapi kita telah menambahkan navigation bar.

 

Menambahkan Detail View Controller

Mudah kan? Dengan beberapa klik kita telah menambahkan navigation bar ke dalam aplikasi. Satu lagi yang belum kita lakukan adalah menambahkan tampilan dari halaman detail dari restaurant. Ketiki user memilih  salah satu restaurant, aplikasi harusnya berpindah dari ke detail view controller dan menampilkan detail restaurant.

Di Interface Builder, pindahkan view controller daro Object Library untuk membuat detai view controller. Pembahasan utama di pembahasan kali ini adalah bagaimana cara untuk mengimplementasikan navigation controller. Kita akan tetap membuat detail view terlihat mudah seperti menampilkan gambar photo saja. Pindahkan Image View dari Object Library dan tempatkan di tengah dari view. Pasang ukurang photos dengan lebar 320 dan ketinggian 250.

Sekarang kita telah mempunyai dua view controller yang telah dikongfigurasi di storyboard, tetapi belum ada koneksi antara keduanya. Kita harus menghubungkan keduanya menggunakan segue. Nah di storyboard, transisi antara dua scene dinamakan dengan segue.

Kita ingin adanya perpindahan ke scene detail ketika user menyentuh salah satu cell di table view, maka dari itu kita akan menambahkan sebuah segue untuk menghubungkan prototype cell dengan detail scene. Tekan dan tahan tombol control pada keyboard, klik pada prototype cell dan pindahkan ke View Controller, seperti gambar dibawah ini.

Menghubungkan scene dengan segue
Menghubungkan scene dengan segue

Storyboard SeguesLepaskan kedua tombol dan akan muncul pop-up tiga tipe dari segue yaitu push, modal dan custom seperti gambar disamping.

Seperti yang telah dijelaskan sebelumnya bahwa segue adalah perpindahan antara scenes. Di iOS, push dan modal adalah dua transisi standar antar view. Untuk navigation, mari kita pilih “Push”. Push Navigation di design untuk perpindah antar tampilan. Ketika kita ingin menampilkan informasi detail dari sesuatu biasanya menggunakan segue push navigation ini. Ketika dipilih, Xcode akan otomatis menghubungkan prototype cell dengan detail view controller menggunakan segue Push, seperti yang terlihat pada gambar dibawah ini.

Storyboard Segues View
Storyboard Segues View

Nah sekrang kita sudah bisa menjalankan aplikasi, ketika aplikasi telah berjalan pilih salah satu restaurant untuk pindah ke halaman detail view controller. Untuk saat ini halaman detail view controller hanya menampilkan halaman kosong, tapi yang penting kita telah berhasil melakukan perpindah antar halaman.

Tanpa menggunakan satu pun baris code kita telah bisa menambahkan navigation controller di aplikasi kita, mudah kan? Tapi mungkin akan muncul pertanyaan seperti ini:

  • Bagaimana cara agar kita bisa mengirimkan informasi restaurang dari “Restaurant Table View Controller” ke “Detail View Controller”?
  • Bagaimana cara agar kita bisa menampilkan photo restaurant di detail view controller ketika memilih salah satu restaurant?

Nah, itulah yang selanjutnya akan kita bahas.

 

Fitur Tambahan

Setelah kita menghubungkan cell dengan detail view controller, cell akan menampilkan disclosure indicator. Tanda bewarna abu-abu menandakan cell dapat berpindah user memilih salah satu cell dan akan berpindah ke detail view, seperti yang terlihat pada gambar dibawah ini.

Disclosure Indicator
Disclosure Indicator

 

Membuat Class Baru

Ok, mari kembali lagi ke detail view. Harusnya image view yang ada di view controller juga harus ikut ter-update ketika kita memilih restaurant. Karena secara default,  view controller telah terhubung dengan class UIViewController.

Tapi faktanya class UIViewController hanya menyediakan fundamental view untuk mengatur model. Tidak ada variabel yang di gunakan untuk menampung gambar restaurant. Dengan demikian, dari pada kita memaksakan menggunakan UiiewController, lebih baik kita membuat class extend dengan class kita sendiri.

Membuat class DetailViewController
Membuat class DetailViewController

Di Project Navigator, klik kanan folder “FoodPin” dan pilih “New File ..” pilih “Cocoa Touch Class” sebagai template classnya. Beri nama class tersebut dengan nama DetailViewController dan isikan subclassnya UIViewController. Klik “Next” untuk menyimpan class tersebut di project.

Seperti yang telah disebutkan sebelumnya, kita harus menghubungkan class DetailViewController dengan view controller. Di Interface Builder, pilih detail view controller. Di Idntity Inspector, ganti custom class menjadi DetailViewController, seperti gambar dibawah ini.

Assign custom class untuk detail view Controller
Assign custom class untuk detail view Controller

 

Menambahkan Variabel ke Custom Class

Ada beberapa hal yang harus kita ganti pada custom class, antara lain:

  • Menentukan variabel restaurantImage untuk passing data – ketika user memilih restaurant di table view, harnya gambar akan di pasing nama gambar ke detail view.
  • Menentukan outlet variabel restaurantImageView untuk image view – jadi nantinya kita bisa memperbaruinya ketika gambar dari restaurant lain dipilih juga.

Nah untuk mengaplikasikannya, tambahkan code dibawah ini pada file DetailViewController.swift:

Selanjutnya kita harus menghubungkan variavel restaurantImageView dengan image view di storyboard. Klik kanan object UIImageView, pindahkan daro pilih Referece Outlet ke Detail View Controller. Lepaskan tombol dan pilih variabel restaurantImageView seperti yang terlihat pada gambar dibawah ini.

Establish koneksi antara image view dengan outlet variabel
Establish koneksi antara image view dengan outlet variabel

Sekarang kita telah menghubungkan varibel dengan object image view di storyboard. Semua perubahan yang terjadi akan juga ikut diikuti oleh variabel. Tapi ada satu lagi yang ketinggalan, jadi kita ingin image view menampilkan gambar dari restaurant yang dipilih. Untuk melakukannya tambahkan code berikut di method viewDidLoad:

Method viewDidLoad akan dipanggil ketika view di panggil ke memory. Coba compile dan jalankan aplikasi.

Oopps! Ternyata detail view masih menampilkan halaman kosong setelah kita memlih salah satu restaurant. Mmm sepertinya kita melewatkan suatu hal, oya kita belum membuat code untuk mengirimkan gambar restaurant dari table view controller ke detail view controller. Oh makanya variabel restaurantImage tidak memiliki nilai apapun.

 

Passing Data menggunakan Segue

Untuk menangani error diatas, kita harus mem-passing data antara view controller menggunakan segue. Seperti yang telah disebukan sebelumnya bawah segue adalah perpindahan antara view controller dengan konten yang ada di view controller untuk di kirimkan. Ketika segue dijalankan, sebelum tampilan transisi dimulai, runtime storyboard akan memberitahu source view controller untuk memanggil method prepareForSegue. Umumnya implementasi dari method prepareForSegue tidak melakukan apa-apa. Dengan menolak method ini kita bisa mengirimkan data yang relevan ke controller baru, yaitu DetaiViewController.

Cara terbaik untuk memberikan segue pada storyboard adalah dengna membuat identifie yang unik. Identifier ini berupa string yang digunakan aplikasi untuk satu segue dengan segue lainnya.

Menambahkan Segue Identifier
Menambahkan Segue Identifier

Untuk menandakannya sebagai identifier, pilih segue dan isi dengan showRestaurantDetail pada attributes inspector seperti gambar diatas.

Setelah segue berhasil dikongfigurasikan, tambahkan code dibawah ini pada file RestaurantTableViewController.swift untuk mengesampingkan implemtasi bawaan dari method prepareForSegue :

Kode pertama digunakan untuk mengecek identifie dari segue, dan code diatas hanya akan dieksekusi untuk segue showRestaurantDetail .

Kita menggunakan seque.destinationViewController untuk menerima controller tujuan. Dalam kasus project kita, tujuan controller nya adalah DetaiViewController.

 

Siap untuk di Test

Detail ViewSekarang aplikasi sudah siap untuk di testing. Jalankan aplikasi dengan menekan tombol Run. Nah kali ini aplikasi harusnya berjalan dengan semestinya, coba pilih salah satu restaurant pada cell maka aplikasi akan melakukan transisi ke halaman detail view dan menampilkan halaman detail dari restaurant berupa gambar restaurant.

Well, mungkin cukup sekian pembahasan kali ini, oya untuk contoh code pada pembahasan kali ini bisa di download disini: https://www.dropbox.com/s/ispvzqxbqaivvyu/FoodPinNavigation.zip

Semoga bermanfaat ya Guys, and See Yaa .. 😉

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s