Tentang UIPageViewController di iOS Part II – FoodPin Apps

Setelah sebelumnya kita membuat class PageContentViewController, hal selanjutnya yang perlu dilakukan adalah mengimplementasikan UIPageViewController agar walkthrough dapat difungsikan.

UIPageViewController Cover Part II

Mengimplementasikan UIPageViewController

Ok jika Anda telah mengikuti postingan sebelumnya berarti kita telah selesai mendesign dan mengimplementaiskan content view. Selanjutnya kita tambahkan keduanya kdelaman UIPageViewController sehinga user bisa melakukan perpindahan halaman. Kita bisa melakukannya dengan dua cara untuk memberitahukan UIPageViewController apa yang akan ditampilkan. Jika kita hanya ingin menampilkan beberapa view controller di UIPageViewController, kita hanya perlu memanggil method setViewController(_:direction:animated:completion:) da view controller akan ditampilkan.

Karena perpindah pada halaman tutorial yang akan kita buat nantinya support terhadap gesture-based, maka dari itu kita membutuhkan on-demand approach. Pada approach ini, kita membuat sebuah object data source sebagai penyedia untuk content view controller. Setiap kali user berpindah dari halaman satu ke halaman lainnya, UIPageViewController akan bertanya ke data source, “Oi, apa content view controller yang harus ditampilkan? Tolong kirimkan ke saya.” Object data source lah yang kemudian mengirimkan content view controllernya.

Object data source seharusnya menyesuaikan dengan protocol UIPageViewControllerDataSource dan akan mengimplementasikan method berikut:

  • pageViewController(_:viewControllerBeforeViewController:)
  • pageViewController(_:viewControllerAfterViewController:)

Kedua method diatas dipanggil ketika user melakukan perpindahan antar halaman. Ketika itu dipanggil, setiap method akan dikirimkan dengan view controller yang spesifik. Tugas kita lah yang menentukan content view controller yang akan ditampilkan sebelum/sesudah controller dipanggil. Misalnya kita mengirimkan content view controller dengan nomor index 1. Maka UIPageViewController akan bertanya:

  • Oi, apa “next” view controller? Nah kita mengirimkan content view controller dengan index ke 2.
  • Oi, apa view controller sebelumnya “before”? Dan kita mengirimkan content view controller dengan index ke 0.

Sekarang kita telah mengerti bagaimana UIPageViewController bekerja. Selanjutnya kita akan membuat sebuah clas baru. Tetapi pertama kli download kumpulan gambar disini: om https://www.dropbox.com/s/z3ivtlpvkeho58a/project-image-ch18.zip?dl=0, lalu unzip dan tambahkan gambar tersebut di images.xcassets. Kita akan menggunakan gambar tersebut untuk membuat halaman tutorial.

Klik kanan foler FoodPin dan pilih “New File ..”. Beri nama classnya dengan PageViewController dan pasang subclassnya dengan UIPageViewController.

Setelah selesai dibuat, buka file PageViewController.swift dan pasangkan code berikut pada protocol UIPageViewControllerDataSource:

class PageViewController: UIPageViewController, UIPageViewControllerDataSource

Deklarasi dan inisiasikan headings, suheadings dan variabel gambarnya, yang akan digunakan ketika membuat content view controllers:

Selanjutnya implementasikan dua method dari protocol UIPageViewControllerDataSource:

Method diatas sangat mudah, pertama kita dapatkan index halaman sebelumnya dari view controller. Tergantung methodnya, kita bisa menambahkan/mengurangi jumlah index dan mengembalikannya ke view controller untuk ditampilkan.

Tetapi kita belum membuat method viewControllerAtIndex¸ dimana method ini didesign untuk membantu view controller. Pada class PageViewController, tambahkan method helper berikut:

Memanggil kembali ID Storyboard untuk view controller yang telah kita isi ketika mendesign user interface. ID ini digunakan sebagai referensi nutuk membuat contoh view controller. Untuk mencontohkan view controller di storyboard, kita hanya perlu memanggil methid instantiateViewControllerWithIdentifier dengan ID storyboard yang spesifik. Method tersebut akan mengirimkan object yang sesuai ke ID storyboard. Inilah kenapa kita menggunakan as? Untuk menunjukkan object ke PageContentViewController.

Terakhir kita perbarui method viewDidLoad dengan code berikut:

Dengan class yang telah diatur, buka Storyboard dan pilih PageViewController. Di Identity Inspector, ganti custom classnya dari UIPageViewController menjadi PageViewController.


 

Menampilkan Walkthrough Screen

Kita sudah hampir siap untuk melakukan testing halaman tutorial ini. Tapi sebelumnya kita membuat controller di RestaurantTableViewController, dengan cara menambahkan code dibawah ini pada method viewDidLoad yang ada di class RestaurantTableViewController :

Sekarang kita sudah bisa melakuakn testing aplikasi, saat pertama kali dijalankan seharunya aplikasi akan menampilkan halaman tutorial dan kita bisa melakukan perpindah halaman menggunakan gesture seperti biasa.


 

Menambahkan Indikator Halaman

Halaman tutorial sudah terlihat keren, tetapi belum memiliki indikator seperti titik-titik untuk menandakan halaman. Jadi bagimana kita bisa membuatnya ?

Jika kita ingin menambahkan indikator halaman yang standar, kita haya perlu mengimplementasikan method dibawah ini pada class PageViewController:

  • presentationCountForPageViewController – kita mengimplementasikan method ini untuk mengirimkan jumlah titik (halaman) yang akan ditampilkan di indikator.
  • PresentationIndexForPageViewController – kita mengimplementasikan method in untuk mengirimkan index dari halaman yang dipilih.

Oke, mari kita implementasikan kedua method tersebut dengan code berikut:

Jika kita mencoba compile dan menjalankan aplikasi, kita akan menemukan indikator halaman berada di bawah halaman tutorial seperti gambar dibawah ini.

Halaman indicator yang di tampilkan di bawah halaman
Halaman indicator yang di tampilkan di bawah halaman

 

Menambahkan Indikator Halaman yang telah dimodifikasi

Sangat mudah kan menambahkan indikator halaman? Tapi kita tidak bisa mengganti posisinya. Hal ini dikarenakan kita menggunakan indikator bawaan.

Untuk memodifikasinya kita harus mengapus code yang ditambahkan sebelumnya. Kita tidak membutuhkan itu lagi selama modifikasi indikator. Buka Interface Builder dan pindahkan object Page Control dair Object Library ke Page Content View Controller. Letakkan itu tepat dibawah label Heading. Dibawah Attribute Inspector, isi jumlah halamannya denga 3. Ganti warnya menjadi abu-abu dan halaman sebelumnya menjadi merah. Seharunya storyboardnya akan terlihat seperti gambar dibawah ini:

Menambahkan page control
Menambahkan page control

Setelah kita menambahkan page control, itu sudah siap digunakan. Tetapi menggantu halaman sebelumnya menjadi warna merak ketika user memilih halaman tersebut, kita harus membuat variabel outle di class PageContentViewController:

@IBOutlet weak var pageControl:UIPageControl!

Pada method viewDidLoad, tambahkan code dibawah ini untuk memperbarui property currentPage dari page control:

pageControl.currentPage = index

Pergi ke Interface Builder dan klik kanan Page Content View Controller di Document Outline lalu buat koneksi dengan outlet.

Menghubungkan outlet page control
Menghubungkan outlet page control

Ya beres dah, kita telah membuat page control kita sendiri. Sekarang jalankan aplikasi, dan lihat indikator halaman sudah berjalan sesuai dengan keinginan belum?


 

Menambahkan Tombol Next dan Get Started

Page View Control telah bekerja tetapi bagaimana cara menghilangkannya ketika selesai. Nah yang perlu kita lakukan selanjutnya adalah menampilkan “Get Started” di akhir halaman tutorial ini. Dan di atas tiap halaman kita tambahkan tombol “Next” untuk menunjukkan pindah dari halaman satu ke halaman lainnya.

Buka Main.storyboard lalu pindahkan sebuah button kedalam Page Content View Controller. Beri nama dengan Get Started. Itu terserah kita untuk memodifikasi warna dan fontnya. Letakkan tombol tersebut setelah label subheading..

Selanjutnya tambahan tombol lainnya ke dalam view dan pasang image-nya dengan forward. Ganti lebar dan ketinggiannya dengan 30 pint. Jika kita ingin menggantinya kedalam bentuk tombol yang bulat, pilih Identity Inspector dan tambahkan layer.cornerRadius pada User Defined Runtime Attributes nya. Pasang tipenya dengan Number dengan nilai 15. Berikut contoh hasilnya:

Contoh design Get Started dan Tombol Next
Contoh design Get Started dan Tombol Next

Seperti yang telah dijelaskan sebelumnya, tombol next di tampilkan dihalaman pertama dan kedua dari tutorial, dan tombol get started di halaman terakhir. Untuk melakukanya kita akan menambahkan dua variabel outlet untu mengontrol tombol tersebut agar tampil di tempat yang kita inginkan. Di file PageContentViewController.swift, tambahkan variabel outle berikut:


@IBOutlet weak var getStartedButton:UIButton!
@IBOutlet weak var forwardButton:UIButton!

Di method viewDidLoad, tambahkan juga code berikut:


getStartedButton.hidden = (index == 2) ? false : true
forwardButton.hidden = (index == 2) ? true: false

Kita membuat tombol akan tampil ketika index yang sedang digunakan juga sama dengan index tombol.

Sekarang, hubungkan tombol di storyboard dengan variabel outlet. Klik kanan Page Content View Controller di Document Outline dan buat koneksi untuk kedua outlet getStartedButton dan forwardButton.

Tetapi masih ada yang ketinggalan, kita belum membuat method action untuk tombol tersebut. Tambahkan method berikut pada class PageContentViewController :

Method close digunakan untuk menghilangkan halaman tutorial. Selanjutnya kita akan menghubungkan tombol Get Started. Method nextScreen adalah method action untuk tombol next. Hal itu akan memanggil method forward.

Method forward  merupakan method helper yang adai di PageViewController.swift. Kita belum mengimplementasikannya sebelumnya, jadi tambakan code dibawah ini pada class PageViewController:

Method tersebut di gunakan di index halaman membuat content view controller selanjutnya. Jika controller telah bisa dibuat, kita bisa memanggil method setViewController dan memindahkannya ke view controller.

Ketika method action sudah siap, pekerjaan terakhir adalah menghubungkannya dengan tombol yang ada di storyboard. Tekan dan tahan tombol control, lalu pindahkan tombol Get Started ke Pafe Content View Controller di Document Outline. Lepaskan kedua tombol dan pilih event close. Ulangi prosedur yang sama untuk tombol next dan pilin event nextScreen. Seperti yang terlihat pada gambar dibawah ini.

Menghubungkan method action dengan tombol
Menghubungkan method action dengan tombol

Sekarang kita sudah siap menjalankan aplikasi. Seharusnya aplikasi telah mengampilkan halaman tutorial seperti yang diinginkan seperti gambar dibawah ini.

Alur Halaman dari aplikasi FoodPin
Alur Halaman dari aplikasi FoodPin

Ketika kita menyentuh tombol Get Started di halaman terakhir, maka halaman tutorial ini akan hilang dan akan berpindah kehalaman utama aplikasi.

Semuanya telah berjalan lancar, tetapi tunggu, kenapa halaman tutorial muncul setiap kali aplikasi dijalankan? Kan seharusnya cuma sekali di awal aplikasi dijalankan, itupun diawal setelah beres instalasi.

Nah untuk menanganinya, kita harus menemukan solusi untuk menyimpan status yang mengindiasikan user sudah pernah melihat halaman tutorial ini.

Sebelumnya kita sudah pernah membahas Core Data bukan? Nah kita bisa menyimpan status ini kedalam database. Tetapi ada cara lebih mudah untuk menyimpan aplikasi dan pengaturan yang dilakukan oleh user.


 

Tentang NSUserDefaults

iOS SDK memiliki class yang dinamakan dengan NSUserDefault yang bertugas untuk mengatur aplikasi dan pengaturan user. Contohnya, kita bisa menyimpan status halaman tutorial tadi. Class NSUserDefaults ini bertanggung jawab untuk berinteraksi dengan sistem default iOS. Sistem default dibuat secara otomatis dan tersedia untuk semua aplikasi. Data akan tersimpan secara terus-menerus di sistem default ini. Dengan kata lain kia masih bisa mengakses data tersebut walaupun user telah keluar dari aplikasi atau aplikasi crash.

Untuk menggunakan NSUserDefaults, kita harus mendapatkan object shared default:

NSUserDefaults.standardUserDefaults()

Tergantung dari tipe object yang diterima, kita bisa menggunakan satu method seperti:

  • arrayForKey(_:)
  • boolForKey(_:)
  • dataForKey(_:)
  • dictionaryForKey(_:)
  • floatForKey(_:)
  • integerForKey(_:)
  • objectForKey(_:)
  • stringArrayForKey(_:)
  • stringForKey(_:)
  • doubleForKey(_:)
  • URLForKey(_:)

Untuk menyimpan sebuah pengaturan di sistem default, kita harus memasing valuenya dengan key yang spesifik. Berikut contohnya:

defaults.setBool(true, forKey: "hasViewedWalkthrough")


 

Menggunakan NSUserDefaults

Jika kita telah megnerti bagaimana NSUserDefault bekerja, kita harus mengimplementasikannya ke halaman tutorial untuk mendapatkan statusnya. Setelah tombol Get Started dari halaman akhir tutorial di klik, kita akan menyimpan statusnya di user default yang mengindikasikan user tidak akan pernah melihat tutorial itu algi. Buka file PageContentViewController.swift dan perbarui method close dengan code dibawah ini:

Kita isi value boolean untuk keyhasViewedWalkthrough nya dengan user default. Sekarang buka RestaurantTableViewController.swift dan tambahkan logika sederhana untuk menentukan jika harus menampilkan halaman utama:

Nah beres, sekarang ketika kita menekan tombol Get Started, aplikasi tidak akan menampilkan kembali halaman tutorial di pembukaan aplikasi selanjutnya.

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code pada pembahasan kali ini bisa didownload disini: https://www.dropbox.com/s/xj3ij4czw33574d/FoodPinWalkthrough.zip?dl=0

Semoga bermanfaat ya Guys, 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