Bootstrap Menu-based App with MMDrawerController

Menu-based หรือที่หลายคนเรียกมันจาก Icon ในการเปิดเมนูด้านข้างว่า Hamburger
จริงๆ เป็น UI ที่มีมานานมากละ ถ้าจำไม่ผิด มันถูกนำมาใช้โดย Facebook และหลายคนก็ทำตามกันมา
แม้ฝั่ง Apple จะไม่ค่อยเห็นด้วยเท่าไหร่ แถมมาจิกกัดใน WWDC session ปี 2014 ด้วย ฮ่าฮ่า

เนื่องจากผมต้องทำ App ที่มีรูปร่างนี้บ่อย และมันก็เป็นเพียงการทำครั้งแรกตอน Setup Project
ก็เลย อาจจะลืมๆ กันบ้าง เลยมาเขียนเก็บไว้ดีกว่า โดย Library ที่เลือกใช้ก็คือ

MMDrawerViewController

ขั้นแรกก็ลงผ่าน Cocoapods ก่อนเลย โดยให้ลงตัว MMDrawerController และ Extension ที่จะช่วยทำ Custom Segue ผ่าน Storyboard ด้วย โดย Podfile ของผมก็จะเป็นแบบนี้


จากนั้นเราก็จะมาเตรียม Storyboard สำหรับการทำ Bootstrap ครั้งนี้กัน จากภาพด้านล่างจะเป็นดังนี้

  • สร้าง View Controller ขึ้นมา แล้วกำหนดค่า Custom Class เป็น MMDrawerController
  • สร้าง Table View Controller ขึ้นมาเพื่อทำหน้าที่เป็น Menu
  • สร้าง Main Controller ขึ้นมาเป็นหน้าหลัก (ของผมมีหน้าที่ 2 ไว้เพื่อทดสอบด้วย)
  • จาก Drawer Controller ในข้อแรกให้เชื่อมต่อเส้น Segue ด้วย Custom Segue ที่ชื่อว่า drawer controller แล้วกำหนด Segue Identifier เป็น mm_left หรือ mm_right ตามด้านที่ต้องการให้เมนูขึ้น
  • เช่นเดียวกับด้านบน แต่ให้เชื่อมไปที่ Main Controller แล้วกำหนด Segue Identifier เป็น mm_center



เข้าสู่ขั้นตอนของการโค้ดละ เริ่มจากใน AppDelegate.m ก่อน


จากนั้นผมทำการสร้าง Base ViewController มาให้เป็น Superclass ของทุก Class ของ App โดยจุดประสงค์คือการใส่ปุ่ม Hamburger และควบคุม Animation การเปิด และปิดของเมนูด้านข้าง (ไม่อย่างนั้นจะต้องเขียนให้ทุก Class เลย)

โดยใน BaseViewController.m ก็จะเขียนไว้ประมาณนี้


จากนั้นในส่วนของ Menu ViewController ก็จะเขียนโค้ดเพื่อควบคุมการเปลี่ยนหน้าต่างๆ แบบนี้ โค้ดไม่มีอะไรซับซ้อนเลย (แต่ถ้า Custom Menu Cell ก็จะซับซ้อนเองล่ะ) น่าจะคุ้นเคยกันดี


ส่วนทั้ง FirstViewController และ SecondViewController ก็ไม่ต้องทำอะไรเลย เพียงแค่สร้างให้เป็น Base ViewController subclasses ก็เพียงพอแล้ว เท่านี้เมนูก็ใช้งานได้เลยทันที จากนั้นก็เริ่มทำ App ได้แล้วล่ะ จัดปายยยยยย

ถ้าอ่านแล้วยังไม่เข้าใจ ทำตามแล้วไม่ได้ ผมอัพไว้ที่นี้นะ https://github.com/macbaszii/Hamburger

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22