MIT School Muslimah : Cara Menggunakan Side Menu Controller – Swift Programming

MIT School Muslimah : Cara Menggunakan Side Menu Controller – Swift Programming

Istilah Side Menu Controller dikalangan programmer atau pegiat IT berbeda-beda, ada yang menyebutnya sebagai Sandwich, Burger, Off Page, maupun Drawer. Apapun label yang melekat pada side menu controller, intinya terletak pada fungsi – sebagai navigasi utama sebuah aplikasi. Saya lebih cenderung menggunakan istilah side menu controller dengan “Burger“, jadi dalam tulisan ini teman-teman akan lebih sering melihat tulisan “Burger” (Yummii,,,,  kebayang burger aslinya).

1. Langkah awal kita memulainya dengan rancangan seperti di bawah ini

screen-shot-2016-11-15-at-3-15-54-am

2. Selanjutnya menggunakan library Side Menu Controller yang bisa dilihat di sini, library tersebut diinstall dulu ke dalam Xcode, cara menginstall sebuah library bisa dibaca pada tulisan ini Belajar Menggunakan CocoaPods.

Sesuai dengan rancangan awal, dibutuhkan 4 scene terdiri dari scene utama, scene burger, scene 1, dan scene 2 serta 2 navigation controller yang di embed pada scene 1 maupun scene 2. Begitupun dengan file swiftnya kita menggunakan 4 file swift sesuai dengan kebutuhan scene, silahkan perhatikan pada gambar di atas. Icon burgernya jangan lupa ditambahkan ke dalam Assets, untuk nama iconnya adalah “menu” pada tulisan ini.

3. Pada file swift di scene utama tambahkan “import SideMenuController” dan class “SideMenuController” seperti ini;

import SideMenuController

class ViewController: SideMenuController{
}

4. Sisipkan syntax ini di dalam class di atas viewDidload

required init?(coder aDecoder: NSCoder) {
SideMenuController.preferences.drawing.menuButtonImage = UIImage(named: "menu")
SideMenuController.preferences.drawing.sidePanelPosition = .underCenterPanelLeft
SideMenuController.preferences.drawing.sidePanelWidth = 300
SideMenuController.preferences.drawing.centerPanelShadow = true
SideMenuController.preferences.animating.statusBarBehaviour = .showUnderlay
super.init(coder: aDecoder)
}

Menu (warna merah) pada syntax di atas adalah nama icon burger yang telah ditambahkan ke dalam Assets, silahkan sesuaikan dengan nama icon yang teman miliki.

5. Setting Segue pada Navigation Controller di Storyboard

screen-shot-2016-11-15-at-5-52-00-am

Point 1 : Klik segue pada navigation scene 1
Point 2 : Pilih attributes inspector
Point 3 : Nama identifier, di tulisan ini berlabelkan "satu" 
Point 4 : Pada class di navigation ini pilih "Center,,,"
Point 5 : Pada module pilih "Side,,,"
Point 6 : Untuk kind pilih "Custom"
Untuk Animates beri tanda centang.

Pada navigation scene 2, settingannya hampir sama di atas yang membedakan cuman pada identifier. Nama identifier navigation di scene 2 yaitu “dua” (silahkan disesuaikan).

6. Setting Segue pada Scene Burger di Storyboard

screen-shot-2016-11-15-at-6-23-12-am

Point 1 : Klik segue pada scene burger
Point 2 : Pilih attributes inspector
Point 3 : Nama identifier, di tulisan ini berlabelkan "burger" (Silahkan sesuaikan)
Point 4 : Pada class di scene ini pilih "Side,,,"
Point 5 : Pada module pilih "Side,,,"
Point 6 : Untuk kind pilih "Custom"
Untuk Animates beri tanda centang.

7. Sisipkan syntax ini di dalam viewDidload

performSegue(withIdentifier: "satu", sender: nil)
performSegue(withIdentifier: "burger", sender: nil)

8. Tambahkan extension pada file swift di scene utama

public extension UINavigationController {
public func addSideMenuButton(completion: ((UIButton) -> ())? = nil) {
guard let image = SideMenuController.preferences.drawing.menuButtonImage else {
return
}
guard let sideMenuController = self.sideMenuController else {
return
}
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
button.accessibilityIdentifier = SideMenuController.preferences.interaction.menuButtonAccessibilityIdentifier
button.setImage(image, for: .normal)
button.addTarget(sideMenuController, action: #selector(SideMenuController.toggle), for: UIControlEvents.touchUpInside)
let item:UIBarButtonItem = UIBarButtonItem()
        item.customView = button
        let spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.fixedSpace, target: nil, action: nil)
        spacer.width = -10
self.topViewController?.navigationItem.rightBarButtonItems = [spacer, item]
   completion?(button)
    }
}

 9. Pada file swift di scene burger tambahkan “import SideMenuController

import SideMenuController

10. Tambahkan 2 object button pada scene burger lalu hubungkan ke file swift burger dengan membuat IBAction. Sisipkan syntax ini di dalam IBAction yang telah dibuat.

sideMenuController?.performSegue(withIdentifier: "satu", sender: nil)

Syntax di atas saya sisipkan di IBAction pertama sedangkan untuk IBAction kedua saya ganti identifiernya sesuai yang telah dibuat tadi yaitu “dua”.

Silahkan di run untuk melihat hasilnya, jikalau ada yang keliru silahkan meninggalkan komentar di bawah tulisan ini.

Related posts:

Loading Facebook Comments ...