(Tutorial Ios) Sidebar Sajian With Swrevealviewcontroller In Swift

SWRevealViewController merupakan sebuah UIViewController yang sanggup dipakai untuk menciptakan hidangan samping (sidebar menu) di iOS. Side View sanggup diletakkan di kiri maupun di kanan. Jadi, SWRevealViewController ini ibarat dengan Sidebar hidangan pada aplikasi Facebook.

Contohnya ibarat ini :

Sidebar sendiri secara default gotong royong tidak ada di iOS. Namun, kita sanggup menciptakan atau mengcustom sendiri sidebar hidangan dengan santunan library SWRevealViewController.

Pada postingan kali ini aku mau membahas bagaimana cara menciptakan Sidebar Navigation Menu di iOS.

Sebelumnya kita harus mendownload dulu SWRevealViewController library di sini https://github.com/John-Lluch/SWRevealViewController 

Hanya ada 2 buah file yang kita butuhkan yakni :
- SWRevealViewController.h 
- SWRevealViewController.m 

Kemudian buat project gres di XCODE, kemudian masukkan import kedua file SWRevealViewController.h dan SWRevealViewController.m ke folder SideBar.

Pada ketika diimport biasanya akan muncul alert untuk menambahkan Bridging Header.

Apa itu Bridging Header? Bridging Header berfungsi sebagai penghubung atau jembatan komunikasi antara Objective-C ke Swift. Jadi, kita sanggup memanggil kelas Objective-C ke dalam kelas Swift.

Download icon-icon (menu, home, profile, notifications, star dan settings) yang diharapkan dan sanggup dicari di : https://design.google.com/icons/
Kemudian taruh di assets/Images.

File Bridging Header nantinya akan otomatis di tambahkan. Untuk mengecek apakah sudah terpasang atau belum sanggup dilihat di tab Build Settings di project.

Selanjutnya mendesain Storyboard sebagai berikut :

*Sorry gan screenshotnya terpotong di bab bawah alias gak muat.

Pada Main.Storyboard terdiri dari :
1. RevealViewController
2. SideMenuController
3. HomeViewController
4. ProfileViewController
5. NotificationsViewController
6. FavoritesViewController
7. SettingsViewController

Pada desain Storyboard di atas kita harus menambahkan Custom UIViewController dengan SWRevealViewController.

Setting dan tambahkan 2 custom segue yang satunya ke UIViewController untuk Home (sw_front).

Dan yang kedua untuk SideMenuController. Masing-masing di setting class SWRevealViewControllerSegueSetController.

Kemudian dari SideMenuController hubungkan masing-masing ke HomeViewController, ProfileViewController, NotificationsViewController, FavoritesViewController dan SettingsViewController dengan custom segue.

Lalu di set class SWRevealViewControllerSeguePushController.

Berikutnya yaitu menciptakan hidangan di SideMenuController. Desain layoutnya dengan UITableView sebagai berikut :

Setelah layoutnya selesai, buat kelas-kelas Swift.

Pertama, buat kelas SideMenuController.swift, di kelas ini lah kita akan mengatur menunya.

import Foundation import UIKit  class SideMenuController: UIViewController, UITableViewDelegate, UITableViewDataSource {          @IBOutlet weak var tableView: UITableView!          let arrayTitle = ["Home", "Profile", "Notifications", "Favorites", "Settings"]     let arrayIcon = ["ic_home_36pt", "ic_person_36pt", "ic_notifications_36pt", "ic_star_36pt", "ic_settings_36pt"]          override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.                  self.tableView.dataSource = self         self.tableView.delegate = self     }          override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()         // Dispose of any resources that can be recreated.     }          override func preferredStatusBarStyle() -> UIStatusBarStyle {         return .LightContent     }          func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return arrayTitle.count     }          func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {                  let cell: SideBarCell = tableView.dequeueReusableCellWithIdentifier("SideBarCell") as! SideBarCell                  cell.title.text = arrayTitle[indexPath.row]         cell.icon.image = UIImage(named: arrayIcon[indexPath.row])                  return cell     }          func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {                  switch (indexPath.row) {         case 0:             self.performSegueWithIdentifier("home_segue", sender: self)             break         case 1:             self.performSegueWithIdentifier("profile_segue", sender: self)             break         case 2:             self.performSegueWithIdentifier("notifications_segue", sender: self)             break         case 3:             self.performSegueWithIdentifier("favorites_segue", sender: self)             break         case 4:             self.performSegueWithIdentifier("settings_segue", sender: self)             break         default:             break         }     }  } 

SideBarCell.swift

import Foundation  class SideBarCell: UITableViewCell {          @IBOutlet weak var icon: UIImageView!     @IBOutlet weak var title: UILabel!      } 

HomeViewController.swift

import Foundation  class HomeViewController: UIViewController {          @IBOutlet weak var menuBar: UIBarButtonItem!          override func viewDidLoad() {         setMenuBarBtn(menuBar)     }          func setMenuBarBtn(menuBar: UIBarButtonItem) {         menuBar.target = revealViewController()         menuBar.action = #selector(SWRevealViewController.revealToggle(_:))         view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())     }          override func preferredStatusBarStyle() -> UIStatusBarStyle {         return .LightContent     }          override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {         return UIInterfaceOrientationMask.Portrait     } } 

ProfileViewController.swift

import Foundation  class ProfileViewController: UIViewController {          @IBOutlet weak var menuBar: UIBarButtonItem!          override func viewDidLoad() {         setMenuBarBtn(menuBar)     }          func setMenuBarBtn(menuBar: UIBarButtonItem) {         menuBar.target = revealViewController()         menuBar.action = #selector(SWRevealViewController.revealToggle(_:))         view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())     }          override func preferredStatusBarStyle() -> UIStatusBarStyle {         return .LightContent     }          override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {         return UIInterfaceOrientationMask.Portrait     } } 

NotificationsViewController.swift

import Foundation  class NotificationsViewController: UIViewController {          @IBOutlet weak var menuBar: UIBarButtonItem!          override func viewDidLoad() {         setMenuBarBtn(menuBar)     }          func setMenuBarBtn(menuBar: UIBarButtonItem) {         menuBar.target = revealViewController()         menuBar.action = #selector(SWRevealViewController.revealToggle(_:))         view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())     }          override func preferredStatusBarStyle() -> UIStatusBarStyle {         return .LightContent     }          override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {         return UIInterfaceOrientationMask.Portrait     } } 

FavoritesViewController.swift

import Foundation  class FavoritesViewController: UIViewController {          @IBOutlet weak var menuBar: UIBarButtonItem!          override func viewDidLoad() {         setMenuBarBtn(menuBar)     }          func setMenuBarBtn(menuBar: UIBarButtonItem) {         menuBar.target = revealViewController()         menuBar.action = #selector(SWRevealViewController.revealToggle(_:))         view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())     }          override func preferredStatusBarStyle() -> UIStatusBarStyle {         return .LightContent     }          override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {         return UIInterfaceOrientationMask.Portrait     } } 

SettingsViewController.swift

import Foundation  class SettingsViewController: UIViewController {          @IBOutlet weak var menuBar: UIBarButtonItem!          override func viewDidLoad() {         setMenuBarBtn(menuBar)     }          func setMenuBarBtn(menuBar: UIBarButtonItem) {         menuBar.target = revealViewController()         menuBar.action = #selector(SWRevealViewController.revealToggle(_:))         view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())     }          override func preferredStatusBarStyle() -> UIStatusBarStyle {         return .LightContent     }          override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {         return UIInterfaceOrientationMask.Portrait     } } 

Selesai, kini tinggal build dan running maka kesannya ibarat berikut :

Source Code lengkap sanggup dilihat di sini https://github.com/andronut/SidebarMenu-Swift

Ok, Sekian tutorial kali ini dan supaya bermanfaat
Happy Coding ^^