SWRevealViewController merupakan sebuah UIViewController yang dapat digunakan untuk membuat menu samping (sidebar menu) di iOS. Side View bisa diletakkan di kiri maupun di kanan. Jadi, SWRevealViewController ini mirip dengan Sidebar menu pada aplikasi Facebook.
Contohnya seperti
ini :
Sidebar sendiri secara default sebenarnya tidak ada di iOS. Namun, kita bisa membuat atau mengcustom sendiri sidebar menu dengan bantuan library SWRevealViewController.
Pada postingan kali ini saya mau membahas bagaimana cara membuat 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 baru di XCODE, lalu masukkan import kedua file SWRevealViewController.h dan SWRevealViewController.m ke folder SideBar.
Pada saat 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 dapat memanggil kelas Objective-C ke dalam kelas Swift.
Download icon-icon (menu, home, profile, notifications, star dan settings) yang dibutuhkan dan bisa 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 bisa dilihat di tab Build Settings di project.
Selanjutnya mendesain Storyboard sebagai berikut :
*Sorry gan screenshotnya terpotong di bagian 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 adalah membuat menu 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, sekarang tinggal build dan running maka hasilnya seperti berikut :
Source Code lengkap bisa dilihat di sini https://github.com/wimsonevel/SidebarMenu-Swift
Ok, Sekian tutorial kali ini dan semoga bermanfaat
Happy Coding ^^
0 Komentar
Penulisan markup di komentar