Tentang UIPageViewController di iOS Part I – FoodPin Apps

Hai All, di postingan kali ini kita akan membahas tentang apa itu UIPageViewController dan bagimana mengggunakna atau mengimplementasikan UIPageViewController ini di aplikasi iOS.

UIPageViewController SampleUntuk diawal penggunaan aplikasi setelah selesai instalasi aplikasi, mungkin Anda pernah menemukan halaman tutorial pada sebuah aplikasi. Nah biasanya ini digunakan untuk menjelaskan tentang fitur aplikasi dan langkah-langkah penggunaan aplikasi. Di postingan kali ini kita akan membahasnya secara menyeluruh tentang bagaimana membuat halaman tutorial di aplikais iOS.

Untuk membuatnya tetap keren, kondisikan agar halaman tutorial tetap simple dan tidak terlalu banyak agar tidak membuat boring. Untuk mengimplementasikannya kita akan menggunakan UIPageViewController. Salah satu contoh sederahanya adalah aplikasi Souncloud yang menampilkan halaman tutorial yang sangat menarik dan simple.

Contoh Alur Halaman dari Souncloud
Contoh Alur Halaman dari Souncloud

Class UIPageViewController pertama kali di perkenalkan di SDK iOS 5, tetapi telah dilakukan perbaikan di iOS 6 yang telah support untuk scrolling transition. Dengan page view, user bisa dengan mudah berpindah dari beberapa halaman dengan gesture yang mudah. Page view controller tidak hanya terbatas untuk membuat halaman tutorial/walkthrough. Kita bisa ambil contoh halaman dari game Angry Birds yang menampilkan level atau aplikasi buku yang menampilkan halaman demi halaman.

Dengan class UIPageViewController kita bisa:

  • Mengganti mode orientasi dari halaman – misalnya vertikal atau horizontal.
  • Gaya transisinya – page curl transition atau scrolling transition
  • Location spine – hanya dapat dipakai di page curl transition
  • Jarak antara halaman – hanya bisa dipakai di scrolling transition.

Kita akan menambahkan halaman tutorial ketika aplikasi FoodPin pertama sekali dijalankan, dan disini kita akan bisa melihat bagaimana cara kerja UIPageViewController. Kita tidak akan mengimplementasikan kedua gaya transisinya, karena pada pembahasan kali ini kita hanya akan menggunakan scrolling transition untuk menampilkan halaman tutorial di aplikasi FoodPin. Tenang, dengan mengetahui dasar penggunaanya sudah cukup untuk mengeksplor lebih jauh tentang implementasi halaman tutorial di iOS. So let’s get started.


 

Walktrough Screen / Halaman Tutorial

Mari kita lihat terlebih dahulu seperti apa jadinya nanti halaman tutorial aplikasi FoodPin. Nah disini kita akan menampilkan 3 halaman tutorial. User bisa berpindah dari tiap halaman menggunakan cara swiping atau menyentuh icon panah. Di akhir halaman tutorial, kita akan menampilkan tombol “Get Started”. Ketika user menyentuh tombol tersebut, halaman tutorial akan dihilangkan dan tidak akan pernah muncul kembali. Dengan kata lain hanya akan tampil ketika aplikasi pertama kali dijalankan setelah selesai diinstal, seperti gambar dibawah ini.

Alur Halaman dari aplikasi FoodPin
Alur Halaman dari aplikasi FoodPin

 

Menambahkan UIPageViewController di Storyboard

Buka project FoodPin dan pergi ke Main.storyboard. Di Object Library, pindahkan Page View Controller ke dalam storyboard. Seperti yang terlihat dibawah Attribute Inspector, dimana terdapat 3 piliah untuk mengatur behavior dari controller. Kita bisa mengganti navigation style, transition style, page spacing dan spine location dengan tombol itu.

Page View Controller
Page View Controller
Memasang ID storyboard untuk Page View Controller
Memasang ID storyboard untuk Page View Controller

Biasanya, transition style dari oage vew controller dipasang dalam mode Page Curl. Style ini cocok untuk aplikasi buku. Untuk halaman tutorial pada aplikasi FoodPin kita akan menggunakan scrolling style. Jadi ganti transition stylenya menjadi Scroll dibawah Attribute Inspector.

Selanjutnya buat ID Storyboard untuk page view controller. Pilih controller dan pasang ID nya di Identity Inspector, pasang ID Storyboard dari page view controller dengan “PageViewController”. Kemudian kita akan menggunakan ID tersebut di code untuk membuat controller.


 

Menambahkan View Controller Sebagai Page View Controller

Mungkin kita sempat bingung bagaimana caranya mendesign walkthrough screen ini, tapi sebelumnya kita juda harus mengerti terlebih dahulu bagaimana page view controller bekerja.

Class UIPageViewController diklsifikasikan sebagai container controller. Container controller di design untuk menampung dan mengatur banyak view controller yang ditampilkan di aplikasi, dan juga mengontrol perpindah tiap viewnya Dipembahasan kita, UIPageViewController merupakan container controller yang memperbolehkan user untuk berpindah dari halaman satu ke halaman lainnya. Setiap halaman tersebut diatur oleh view controller.

Hubungan antara page view controller dengan page content view controller
Hubungan antara page view controller dengan page content view controller

Untuk membuat walkthrough screen, kita harus menambahkan sebuah View controller kedalam storyboard. Tapi mungkin kita sedikit heran, kenapa kita hanya menggunakan satu view controlle untuk menampilkan 3 halaman tutorial. Seperti yang terlihat pada gambar diatas, akan lebih efektif jika kita menggunakan satu halaman dan menggunakannya kembali untuk menampilkan halaman yang berbeda.

Ok, pindahkan View controller dari Object library ke storyoard, design tampilannya dengan cara berikut:

  • Tambahkan object label dan beri nama dengan Heading. Ganti font dan ukuran fontnya sesuai yang diingkan dan pasang modenya rata tengah.
  • Tambahkan object label lainnya dan beri nama dengan Label. Sekali lagi ganti font dan buat rata tengah.
  • Tambahkan Image View dengan lebar 320 point dan tinggi 366 point.

Nantinya akan terlihat seperti gambar dibawah ini.

Mendesign View Controller untuk alur halaman
Mendesign View Controller untuk alur halaman

Terakhir, pasang ID Storyboard dari view controller dibawah Identity Inspector dengan PageContentViewController. ID ini nantinya digunakan untuk code kita.


 

Membuat Class PageContentViewController

Klik kanan folder FoodPin di project navigator dan pilih “New File ..”. Beri nama classnya dengan PageContentViewController dan jadikan subclassnya dengan UIViewController.

Pada file PageContentViewController.swift, deklarasikan variabel outlee dan instansi pada class tersebut:

Variabel index digunakan untuk menyimpan index halaman sebelumnya. Halaman awal dari tutorial akan mempunyai index 0. View Controller didesign untuk menampillkan gambar, heading, dan subheading. Jad kita membuat 3 variabel untuk mengirimkan data. Selanjutnya ganti method viewDidLoad dengan code berikut:

Disini kita inisiasi label dan image view. Selanjutnya kita harus membuat koneksi antara UI dengan variabel outlet.

Di storyboard, pilih content view controller yang yang dibuat, dan di Identity Inspector, pasang custom class dengan PageContentViewController. Selanjutnya klik kanan Page Content View Controller di Document Outline dan buat koneksi dengan cara berikut:

  • Hubungkan outlet headingLabel dengan label Heading
  • Hubungkan outlet subHeadingLabel dengan label Label
  • Hubungkan outlet contentImageView dengan image view
Membuat koneksi dengan variabel outlet
Membuat koneksi dengan variabel outlet

Lanjut ke Part II Guys >>

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