[iOS] Slide Out Menu dengan SWRevealViewController (Swift 2, iOS 9, Xcode 7)

slide out menu

SSH Gitlab : git@gitlab.com:bnctvns/slide-out-menu-demo.git

Download Zip : Slide Out Menu Demo

Ditemani track “Wherever you are” nya ONE OK ROCK and susu dancow coklat *hhaha, postingan kali ini mau cerita tentang membuat Slide Out Menu untuk aplikasi iOS (you don’t say ?? haha). Slide Out Menu ini hampir serupa dengan Navigation Drawer’nya Android. Salah satu perbedaannya adalah Navigation Drawer Android muncul di depan view yang sedang aktif, sedangkan Slide Out Menu iOS muncul di belakang view tsb. Slide Out Menu ini dibuat dengan class SWRevealViewController yang ditulis dengan bahasa Objective C, namun walaupun begitu kita bisa mengintegrasikannya dengan Swift. And that being said, let’s fire our XCode !

Create a new Xcode project
Disini digunakan bahasa Swift ver. 2 dengan iOS 9 dan XCode 7.

  • Buka Launchpad -> Xcode dan pilih Create a New Xcode Project.

new xcode project

Create Single View Application
Berikutnya pilih tab menu Application, kemudian pilih Single View Application. Setelah itu klik Next.

single view application

Choose options for Project
Masukkan nama product, organisasi dan identifier yang diinginkan. Berikut contoh yang digunakan untuk tutorial ini :

project options

Setelah itu klik Next -> pilih direktori yang diinginkan untuk membuat project -> Klik Create.

Download SWRevealViewController
Download SWRevealViewController di link Github ini, setelah itu ekstrak archive Zip di direktori yang diinginkan. Setelah selesai men’ekstrak, buka direktori SWRevealViewController-master/SWRevealViewController. Di dalam direktori tsb. terdapat dua file bernama :

  • SWRevealViewController.h
  • SWRevealViewController.m

Klik dan drag kedua file tsb. ke panel Navigator Xcode. Setelah itu akan muncul pop-up Xcode untuk memilih opsi menambah file ke project. Pilih opsi seperti gambar berikut :

add file options

Kemudian klik Finish. Xcode akan menampilkan pop-up lagi mengenai Objective-C bridging header.

bridging options

Pilih Create Bridging Header. File bridging header ini diperlukan agar kita bisa mengintegrasikan class yang dibuat dengan Objective-C dengan Swift. Setelah klik Create Bridging Header, akan muncul 3 file baru di panel Navigator :

  • SWRevealViewController.h
  • SWRevealViewController.m
  • Slide Out Menu Demo-Bridging-Header.h

new 3 file

Modifikasi file Slide Out Menu Demo-Bridging-Header.h


//
// Use this file to import your target's public headers that you would like to expose to Swift.
//

#import "SWRevealViewController.h"

Langkah ini diperlukan karena kita akan mengintegrasikan file Objective-C dengan file Swift.

Import Icon
Disini kita akan mengimport icon yang akan digunakan pada Slide Out Menu. File icon ini bisa diambil di source code project yang bisa di download di link yang berada di awal postingan. Import icon yang akan digunakan untuk Slide Out Menu dengan cara :

  • Buka panel Navigator.
  • Pilih file Assets.xcassets.
  • Klik tombol “+” yang ada di ujung bawah kiri.
  • Pilih Import….

import icon

  • Pilih empat file icon (ic_home, ic_account, ic_account, ic_menu). Kemudian klik Open.

Hapus ViewController scene dan ViewController.swift
Disini kita akan menghapus ViewController scene pada Storyboard yang dibuatkan secara otomatis oleh Xcode.

  • Masuk ke Storyboard, pilih ViewController scene, kemudian tekan tombol Delete.
  • Pilih ViewController.swift pada panel Navigator, kemudian tekan tombol Delete -> Move To Trash.
  • Masuk kembali ke Storyboard, buat ViewController baru ke dalam Storyboard.
  • Pilih ViewController tsb. dan modifikasi class’nya menjadi SWRevealViewController (panel Utilities -> tab menu Identity-> Custom Class -> Class).

sw_reveal_view_controller_as_class

  • Berikutnya centang opsi Is Initial View Controller (panel Utilities -> tab menu Attribute) untuk ViewController ini, sehingga ViewController ini akan menjadi ViewController yang pertama kali diload.

initial view controller

Buat Slide Out Menu TableViewController
Setelah itu buat TableViewController ke dalam Storyboard. TableViewController ini akan menjadi Slide Out Menu yang akan muncul di belakang view yang sedang aktif ketika terjadi event tap di BarButton pada Navigation Bar, dan event pan gesture (melakukan swapping jari dari sisi kiri ke kanan layar).

  • Beri nama “Slide Out Menu” untuk scene TableViewController ini (Panel Utilities -> Tab Menu Identity -> Document -> Label).
  • Pilih TableView pada scene ini, kemudian modifikasi nilai Prototype Cells menjadi 3 (Panel Utilities -> Tab Menu Attribute -> TableView -> Prototype Cells). Disini kita memberikan nilai 3 yang artinya kita akan membuat tiga menu, dimana masing-masing menu akan menampilkan ViewController.

prototype cell count

  • Setelah itu pilih Prototype Cell pertama.
  • Buka panel Utilities.
  • Buka tab menu Attribute.
  • Pilih opsi “Basic” untuk kolom Style pada opsi Table View Cell.
  • Pilih “ic_home” untuk kolom Image.

cell style

Lakukan hal yang sama untuk Prototype Cell kedua dan ketiga, masing-masing menggunakan image “ic_account” dan “ic_about”.

cell with icon

Buat tiga UIViewController
Buat tiga UIViewController yang kemudian di embed ke dalam Navigation Controller.

  • Pilih ViewController kemudian klik menu Editor -> Embed In -> Navigation Controller.

embed in nav controller

  • Ganti nama label pada Navigation Bar untuk ketiga scene tsb. dengan masing-masing bernama “Home”, “Account” dan “About”.

Sampai langkah ini kita mempunyai 8 scene. 3 scene untuk ViewController, 3 scene untuk NavigationController, 1 scene untuk TableViewController, dan 1 scene untuk SWRevealViewController. Agar tidak membingungkan, beri nama untuk setiap Navigation Controller scene sesuai dengan nama ViewController di dalamnya dengan cara klik NavigationController, kemudian masukkan nama di opsi Document -> Label yang berada di tab Identity pada panel Utilities.

all scene

Buat Bar Button Item
Berikutnya buat BarButton untuk setiap ViewController (Home, Account, About). Masing-masing BarButton ini akan menampilkan Slide Out Menu setiap kali terjadi event tap.

  • Setelah itu pilih BarButton untuk Home scene.
  • Buka panel Utilities.
  • Buka tab menu Attribute.
  • Masukkan “ic_menu” pada kolom Image pada opsi Bar Item.

bar button style

Lakukan hal yang sama untuk Account scene dan About scene.

Buat Label untuk setiap ViewController
Buat satu label untuk setiap ViewController. Label ini hanya akan menjadi tanda untuk setiap ViewController yang sedang aktif. Beri nama label “Home” untuk Home scene, “Account” untuk Account scene dan “About” untuk About scene.

label view controller

Buat File Cocoa Touch Class
Setelah itu kita akan membuat tiga file CocoaTouchClass yang masing-masing bernama HomeVIewController.swift, AccountViewController.swift, dan AboutViewController.swift. Masing-masing file ini akan dihubungkan dengan tiga scene sebelumnya yang telah kita buat di Storyboard (Home scene, Account scene, About scene).

  • Klik kanan di folder Slide Out Menu Demo pada panel Navigator.
  • Pilih New File….

create new file

  • Pada dialog yang muncul pilih Cocoa Touch Class.

create new cocoa touch

  • Klik Next.
  • Pada dialog yang muncul berikutnya berikan nama File “HomeViewController” dengan subclass “UIViewController“.

new cocoa touch name

  • Setelah itu klik Next.
  • Pada dialog yang muncul berikutnya kita tidak perlu melakukan perubahan apapun karena Xcode secara otomatis telah memilih direktori project. Klik Create.

Lakukan hal yang sama untuk membuat file “AccountViewController.swift” dan “AboutViewController.swift”.

Hubungkan ViewController scene dengan Cocoa Touch Class.
Next kita akan menghubungkan setiap ViewController scene pada Storyboard (Home scene, Account scene, About Scene) dengan masing-masing file Cocoa Touch Class’nya.

  • Buka Storyboard.
  • Pilih ViewController untuk Home Scene.
  • Buka panel Navigator.
  • Pilih tab menu Identity.
  • Masukkan HomeViewController untuk kotak Class pada opsi Custom Class.
  • Tekan Enter.

connect home scene

Lakukan hal yang sama untuk Account Scene dan About Scene.

Hubungkan BarButton dengan ViewController
Next kita akan menghubungkan setiap BarButton pada setiap ViewController scene dengan masing-masing file Cocoa Touch Class‘nya.

  • Buka Storyboard.
  • Pilih Assistant Editor -> Automatic.
  • Pilih ViewController untuk Home Scene.
  • Ctrl + Drag n Drop dari BarButton ke dalam file Cocoa Touch Class‘nya (HomeViewController.swift).
  • Pada dialog yang muncul berikutnya, pilih “Outlet” untuk Connection, “barButtonOpen” untuk Name, “UIBarButtonItem” untuk Type, dan “Weak” untuk Storage.

connect bar button

  • Lakukan hal yang sama untuk Account Scene dan About Scene.
  • Setelah itu modifikasi method viewDidLoad dengan listing program berikut :

override func viewDidLoad() {
    barButtonOpen.target = self.revealViewController()
    barButtonOpen.action = Selector("revealToggle:")
    self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
}

 

Dengan method ini maka Slide Out Menu akan muncul setiap kali kita melakukan tap pada BarButton, atau melakukan swipe dari sisi kiri ke kanan layar.

Lakukan hal yang sama untuk AccountViewController.swift dan AboutViewController.swift.

Buat segue Slide Out Menu cell – Navigation Controller
Berikutnya hubungkan setiap Prototype Cell pada Slide Out Menu TableViewController ke masing-masing NavigationController.

  • Prototype cell 1 -> Navigation Home Scene
  • Prototype cell 2 -> Navigation Account Scene
  • Prototype cell 3 -> Navigation About Scene

Ctrl + Drag n Drop dari Prototype Cell pertama ke label Navigation Home pada sisi kiri Storyboard, setelah itu akan muncul dialog untuk memilih tipe segue. Pilih segue “reveal view controller push controller”. Dengan ini maka ViewController untuk Home scene akan diload ketika terjadi event tap untuk cell pertama.

segue push controller

Lakukan hal yang sama untuk Navigation Account dan Navigation About masing-masing dengan Prototype Cell kedua dan ketiga.

Buat segue Reveal View Controller scene – Slide Out Menu Scene
Next buat segue dari Reveal View Controller ke Slide Out Menu.

  • Ctrl + Drag n Drop dari simbol berwarna kuning pada bagian atas Reveal View Controller scene ke dalam TableView pada Slide Out Menu scene.
  • Setelah itu akan muncul opsi segue, disini pilih “reveal view controller set controller”.

segue reveal slide out menu

  • Berikutnya akan muncul segue yang menghubungkan kedua scene ini pada Storyboard.
  • Pilih segue tsb. kemudian masuk ke panel Utilities -> tab menu Attribute -> Storyboard Segue dan isikan “sw_rear” untuk kolom Identifier.

segue sw rear

Nilai “sw_rear” ini sebelumnya telah didefinisikan pada class SWRevealViewController.h sebagai SWSegueRearIdentifier.

Buat segue Reveal View Controller scene – Navigation Home scene
Langkah berikutnya adalah membuat segue dari Reveal View Controller ke Navigation Home.

  • Ctrl + Drag n Drop dari simbol berwarna kuning pada bagian atas Reveal View Controller scene ke label Navigation Home yang ada pada panel sebelah kiri pada Storyboard.
  • Setelah itu akan muncul opsi segue, disini pilih “reveal view controller set controller“.

sw reveal navigation controller

  • Berikutnya akan muncul segue yang menghubungkan kedua scene ini pada Storyboard.
  • Pilih segue tsb. kemudian masuk ke panel Utilities -> tab menu Attribute -> Storyboard Segue dan isikan sw_front untuk kotak Identifier.

segue sw front

Nilai “sw_front” ini sebelumnya telah didefinisikan pada class SWRevealViewController.h sebagai “SWSegueFrontIdentifier”.

Buat file Swift untuk model Slide Out Menu
Next kita akan membuat class model yang akan menjadi menu Slide Out Menu.

  • Klik kanan folder Slide Out Menu Demo.
  • Pilih New File…

create new file

  • Pada dialog yang muncul berikutnya pilih Swift File. Klik Next.

create swift file

  • Pada dialog yang muncul berikutnya isikan “Menu” untuk nama file. klik Create.

create swift file name

  • Modifikasi file Menu.swift menjadi seperti berikut :
import Foundation

class Menu {
    var name: String

    init(name: String) {
        self.name = name
    }

    class func getListSlideOutMenu() -> [Menu] {
        var listMenu = [Menu]()

        var menu = Menu(name: "Home")
        listMenu.append(menu)

        menu = Menu(name: "Account")
        listMenu.append(menu)

        menu = Menu(name: "About")
        listMenu.append(menu)

        return listMenu
    }
}

Disini method getListSlideOutMenu akan memberikan kita objek array yang berisi setiap menu.

Buat file SlideOutMenuTableViewController.swift
Setelah itu buat file Cocoa Touch Class untuk TableViewController dengan nama “SlideOutMenuTableViewController”. File ini akan dihubungkan dengan Slide Out Menu scene pada Storyboard.

  • Klik kanan folder Slide Out Menu Demo
  • Pilih New File…

create new file

  • Pilih Cocoa Touch Class. Klik Next

create new cocoa touch

  • Pada dialog yang muncul berikutnya isikan kolom yang diperlukan seperti berikut :
  • Class : SlideOutMenuTableViewController
  • Subclass of : UITableViewController
  • Klik Next.

slide out menu table view controller

  • Pada dialog yang muncul berikutnya klik Create.
  • Modifikasi file ini menjadi seperti berikut :
import UIKit

class SlideOutMenuTableViewController : UITableViewController {

    var listSlideOutMenu = [Menu]()

    override func viewDidLoad() {

        listSlideOutMenu = Menu.getListSlideOutMenu()
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return listSlideOutMenu.count
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier(listSlideOutMenu[indexPath.row].name, forIndexPath: indexPath) as UITableViewCell

        cell.textLabel!.text = listSlideOutMenu[indexPath.row].name

        return cell
    }
}
  • Setelah itu buka Storyboard.
  • Pilih TableViewController untuk Slide Out Menu scene.
  • Buka panel Utilities.
  • Pilih tab menu Identity.
  • Masukkan “SlideOutMenuTableViewController” ke kolom Class pada opsi Custom Class.

slide out menu class identity

Buat cell identifier untuk PrototypeCell

Next kita akan membuat cell identifier untuk ketiga Prototype Cell pada SlideOutMenu TableViewController.

  • Buka Storyboard.
  • Pilih Slide Out Menu TableViewController.
  • Pilih Prototype Cell pertama pada TableView.
  • Buka panel Utilities.
  • Masuk ke tab menu Attribute.
  • Masukkan “Home” untuk kolom Identifier pada opsi Table View Cell.

cell identifier

  • Lakukan hal yang sama untuk Prototype Cell kedua, tetapi dengan nama “Account” sebagai Identifier’nya.
  • Lakukan hal yang sama untuk Prototype Cell ketiga, tetapi dengan nama “About” sebagai Identifier’nya.

Run Aplikasi
Last step is to run the App hehe.

  • Klik build (Product -> Build) *semoga tidak ada masalah 🙂
  • Klik tombol Play untuk menjalankan aplikasi pada simulator.

And that’s Slide Out Menu with SWRevealViewController !! Thanx for reading 🙂

Thanx for John-Lluch untuk library SWRevealViewController and Jared Davidson untuk tutorial YouTube’nya. 

Reference : SWRevealViewController on GithubJared Davidson Slide Out Menu Tutorial Video

2 respons untuk ‘[iOS] Slide Out Menu dengan SWRevealViewController (Swift 2, iOS 9, Xcode 7)

Tinggalkan Balasan

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 )

Foto Google

You are commenting using your Google 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 )

Connecting to %s