มาทำ SlideOut Menu แบบ left menu และ right menu กัน

Left Menu

Right Menu

          สวัสดีครับเพื่อนๆชาว DevMobile ทุกท่าน ในครั้งนี้ เราจะทำ SlideOut Menu แบบ left menu และ right menu กันนะครับไม่ไช่แค่นั้น เมนูของเรานั้นสามารถเลื่อนซ้าย ขวา เพื่อเปิดปิด เมนูของเราได้อีกด้วย โอเคอย่าให้เสีย เรามาทำกันเลยดีกว่า

ในขั้นแรกให้เราสร้างProjectใหม่ขึ้นมา

        เมื่อเราสร้างโปรเจคขึ้นมาแล้วให้ไปที่ Main.storyboard แล้วลบ ViewController ที่โปรแกรมสร้างมาให้ออกดังรูปด้านล่างเลยครับ

จากนั้นให้เราลาก ViewController มา 2 อันนะครับ ต่อด้วย NavigationController อีก 1 อันนะครับเมื่อเราลากออกมาแล้ว Main.storyboard จะเป็นแบบนี้นะครับ

จะมี ViewController 2 อัน NavigationController อีก 1 อัน

จากนั้นให้เราลบตัว NavigationController ที่เป็น RootView Controller ออกไปนะครับ 

ยังไม่จบนะครับ เราต้องลาก ViewController มาอีก 1 อันเพื่อเอามาแทนหน้าที่เราลบไปเมื่อครู่ ครับ สรุปแล้วในตอนนี้ตัว Main.storyboard จะเป็นแบบนี้นะครับ

ViewController 3 อัน และ Navigation Controller 1 อันครับ

              โอเคครับถ้าหากเพื่อนๆได้ตามนี้แล้วนะครับก็คือว่าผ่านครับ ไปขั้นตอนต่อไปกันเลย ต้องขอ บอกก่อนเลยว่าในปัจจุบันนี้เราในการเขียนโปรแกรมเราไม่จำเป็นต้อเขียนเองทั้งหมด เราสามารถเอาบางไฟล์ที่มีอยู่แล้วมาปรับใช้ได้ ดังนั้นจึงให้เพื่อนๆไปโหลดไฟล์ SWRevealViewController มานะครับ สามารถดาวโหลดได้ตรงนี้เลย >>> ดาวโหลด<<<

เราจะได้ไฟล์มา 2 ไฟล์

จากนั้นให้เพื่อนๆลาก 2 ไฟล์นี้เข้าไปในโปรเจคของเรานะครับ ตรง Destination เลือก copy items ด้วยนะ และกด Finish จากนั้นให้กด Create Bridging Header เพื่อสร้าง ไฟล์ header

หลังจากนั้นเราจะได้ไฟล์มา 3 ไฟล์ดังรูป 

เมื่อมาถึงขั้นตอนนี้แล้ว กลับไปที่ Main.storyboard ครับแล้วเชื่อมเส้นให้แต่ละหน้า

1. ในหน้า NavigationController  ให้ลากไป  ViewController เลือก root view controller

      2. ให้เราเลือก ViewController ที่ว่างๆ 1 ตัวเป้นเพื่อทำเป็น ViewController เริ่มแรกเมื่อเปิดเข้ามา จากนั้นให้ใส่ class ให้มันเป็น SWRevealViewController ดังรูป

จากนั้นไปที่ attributes inspector  เลือก Is Initial ViewController  ดังรูป

จากนั้นให้เราลาดเส้นไปที่ ViewController อีก 1 อันที่เหลือกดเลือก reveal view controller set controller ดังรูปด้านล่าง

จากนั้นตั่งชื่อเส้นว่า "sw_rear" ชื่อเส้นตรงนี้ต้องพิมพ์ตามนี้นะครับ ไม่อย่างงั้นมันจะ error นะครับเพราะมันเป็นชื่อที่ตั่งใน SWRevealViewController.m ใช้สำหรับเอา ViewController นี้ทำเป็น leftMenu

และ ลากอีกเส้นไปที่  Navigation Controller เลือกเหมือนเดิม ตั่งชื่อเส้นว่า "sw_front"

จากนั้นให้ทำการ import SWRevealViewController.h ลงใน Menu_test-Bridging-Header.h

โดยในไฟล์ Menu_test-Bridging-Header.h ให้ทำการพิมพ์

พิมพ์ในไฟล์ Menu_test-Bridging-Header.h

จากนั้นให้มาที่  Main.storyboard ให้เราทำการลาก Bar Button Item มาวางใน ViewController ที่เชื่อมกับ Navigation Controllerไว้ จากนั้นตั่งชื่อตามต้องการในที่นี้ผมจะใส่ว่า Menu

จากนั้นให้ทำการใส่ class ให้มันเป็น ViewController ดังรูป

จากนั้นเชื่อมปุ่ม Menu ที่ลากมาวางไว้เมื่อครู่กับ ViewController

ตรง Connection ให้เลือกเป็น Outlet

Name ให้ใส่ตามต้องการ

จากนั้นกดปุ่ม connect ดังรูป

จากนั้นให้เราไปที่หน้า ViewController ที่เราทำการเชื่อมปุ่ม Menu ไว้ให้พิมพ์ code ตามนี้ใน ViewDidLoad

ลองกด run เพียงเท่านี้ก็จะได้ SlideOut Menu แบบ left menu ออกมา

     ต่อมาเราจะทำการตกแต่งกัน อย่างที่ทราบกันดีกว่า หน้าเมนูของเรานั้นเป็นViewController 1 ตัวเพราะงั้นแล้วเราสามารถทำอะไรกับมันก็ได้ ไม่ว่าจะเป็น TableView , collectionView , label หรืออะไรก็ตามแต่สามารถใช้ได้ตามแต่ความต้องการ แต่ในที่นี้ผมจะใส่ TableView ไปเพื่อความง่ายในการสอนนะครับ 

     

        ขั้นแรกให้เราลาก TableView มาใส่ใน ViewController ที่มีชื่อเส้นว่า "sw_rear" ปรับขนาดตามใจชอบ ดังรูป

จากนั้นทำเหมือนกับการสร้าง TableView ตามปกติเลยนะครับ โดยขั้นแรก ทำการลาก dataSource และ delegae ก่อนนะครับ ดังรูปด้านล่างเลย

ในส่วนนี้เพื่อนๆอาจจะงงนิดนึงนะครับให้ทำความเข้าใจตามเราไปก่อนอย่าข้ามขั้นตอนนะครับ

พอมาถึงขั้นตอนนี้นะครับให้เราตั้ง  Phototype cell เป็น 1 ก่อนนะครับ ย้ำนะครับว่า 1 ก่อน ดังรูป

จากนั้นคลิกที่ Cell แล้วไปที่ attributes inspector  ตั่งชื่อ cell ตามที่เราจะให้เป็นชื่อเมนู เช่น ปุ่มนี้เราจะเขียนว่า หน้าแรก ชื่อ cell ต้องเป็น หน้าแรก นะครับไม่อย่างนั้นมันจะ รันไม่ได้นะครับ 

จากนั้นให้เราลากเส้นเชื่อมไปยัง ViewController ที่เราต้องการให้เป็นหน้าแรกนะครับในที่นี้ผมเลือก ViewController ที่เชื่อมกับ NavigationController ไว้นะครับ ที่เราลากปุ่ม Menu ไปวางเมื่อครู่นี่ ลากไปวางแล้วเลือก  reveal view controller pust controller ดังรูป

จากนั้นให้เราทำการสร้าง file มาควยคุมตัวเมนูของเรานะครับ ที่เราวาง TableView กันไว้โดยคลิก   File > New > File.. เลือกCocoa Touch Class คลิก Next ตั้งชื่อตามต้องการแล้วกดตกลง

จะได้ไฟล์มาหนึ่งไฟล์นะครับให้เราทำการนำชื่อไฟล์ไปใส่ใน class ของ ViewController ที่เราวาง TableView ไว้ ดังรูป

จากนั้นเชื่อม TableView เข้ากับหน้าที่เราสร้างมา 

Connection เลือกเป็น Outlet

Name ใส่ตามต้องการ

จากนั้นกด Connect

จากนั้นให้เราเขียนโค้ดตามนี้เลยนะครับ

โอเคพิมพ์เสร็จแล้วใช่ไหมครับ ตรงตัวแปล menu = ["หน้าแรก"] ตรงนี้นะครับ ข้อมูลใน array นั้นจะไปอยู่เป็นปุ่มกดใน TableView ของเรานะครับ และอย่างที่บอกไปตอนแรกว่าชื่อของปุ่มต้องเท่ากับชื่อของ cell นะครับไม่งั้นรันไม่ได้จากนั้นลองรันดูนะครับจะได้ผลลัพดังรูปด้านล่าง

แต่ตอนนี้ทุกๆคนคงคิดอยู่ใช่ไหมครับว่าจะทำมาทำไมแค่ปุ่มเดียว 

ต่อไปเราจะมาทำปุ่มเพิ่มกันนะครับ

ขั้นตอนแรกให้เราลาก ViewController มาวางเท่ากับจำนวนปุ่มนะครับ ในตัวอย่างนี้ผมจะทำเพิ่มอีกสองปุ่มนะครับผมจึงลาก ViewController มาเพิ่มอีก 2 อัน

จากนั้นมาที่หน้าที่เราวาง TableView นะครับเพิ่ม Phototype cell เป็นจำนวนเท่ากับปุ่มที่เราจะทำนะครับเช่นในตัวอย่างนี้จำทำปุ่มทั้งหมด 3 ปุ่มนะครับ ดังนั้นให้เราเพิ่ม Phototype cell เป็น 3 นะครับ

จากนั้นทำเหมือนปุ่มแรกเลยครับ ตั่งชื่อแต่ละ cell ให้เหมือนกับชื่อของปุ่ม ในตัวอย่างนี้ ผมจะตั้งชื่อปุ่มว่า หน้าสอง และ หน้าสาม นะครับ

เมื่อตั่งชื่อ Cell เสร็จแล้วให้ลากเส้นไปยัง ViewController ที่เราลากมาวางเมื่อครู่นี้นะครับ โดยลากเป็น เซลล์ๆไปนะครับอยากให้ ViewControllerใหนเป็นหน้าสอง หรือ หน้า สาม สามารถลากไปได้ตามใจเลยนะครับ เลือกเป็น reveal view controller pust controller ดังรูป

จากนั้นให้เราเพิ่มปุ่มเมนูนะครับ ไปที่ หน้า code ของ ViewController ที่เราวาง TableView ไว้นะครับจากนั้นเพิ่ม code ตรงตัวแปร menu ตามนี้เลย แต่ๆแต่ 

แต่ๆแต่ อย่าลืมนะครับว่าข้อมูลใน array นี้ ต้องเหมือนกับชื่อ cell ในแต่ละหน้าด้วยนะครับไม่งั้นจะรันไม่ได้นะครับ ไคร error ก็ลองๆเช็คพวกนี้ดูนะครับ

มาๆลองกด run กัน จะได้ผลลัพดังรูปเลย

มาแล้วๆ จากนั้นลองกด ปุ่มซักปุ่มที่ไม่ใช่ ปุ่ม หน้าแรกดูนะครับ

อ่าว พอคลิกหน้าสอง จากนั้นก็ทำอะไรต่อไม่ได้เลย เพื่อนๆคิดว่าทำไมหรอครับ

.

.

.

นั่นก็เพราะว่าเรายังไม่มี file มาควบคุมหน้าพวกนี้เลยเรามาเขียน file เพื่อควบคุมมันหน่อยดีกว่า

ให้เราสร้างไฟล์ใหม่ขึ้นมา คลิก File > New > File.. เลือก Swift File คลิก Next ตั้งชื่อตามต้องการแล้วกดตกลง จะได้หน้าแบบนี้มา

  ให้เราพิมพ์โค้ดตามนี้เลยนะครับ

แนะนำนิดนึงครับชื่อ class ควรเป็นชื่อเดียวกับไฟล์ที่เราสร้างมานะครับ

จากนั้นเอาชื่อไฟล์ที่สร้างมาไปใส่ใน class ของ ViewController แต่ละหน้านะครับแบบนี้

ทำแบบนี้ไปเรื่อยๆจนกว่าจะครบเมนูของเรานะครับ

ลองกด Run ดู นะครับจะสามารถเลื่อนเมนูจากหน้าอื่นๆได้แล้วนะครับ

แต่ๆ เดี๋ยวนะ ปุ่ม Menu มันหายเมื่อคลิกไปหน้าอื่น มาๆแก้หน่อย สามารถแก้กันได้ง่ายๆเลยโดยการสร้างNavigationController มา โดยการคลิกที่ ViewController ที่ต้องการสร้างจากนั้นเลือก Editor > Embed In > NavigationController ดังรูป

จากนั้นมันลาก Bar Button Item มาวาง เปลี่ยนชื่อตามต้องการ

มันจะได้หน้าตาแบบนี้

จากนั้นทำการลากเส้นปุ่ม Bar Button Item ไปในหน้า code ที่ควบคุมหน้านี้ใว้ 

ตรง Connection ให้เลือกเป็น Outlet

Name ให้ใส่ตามต้องการ

จากนั้นกดปุ่ม connect ดังรูป

จากนั้นมาเขียน code ที่ ViewDidLoad ของหน้าที่ลาก Bar Button Item ไปวาง ให้พิมพ์  code ตามนี้

ทำแบบนี้กับทุกหน้าที่เราสร้างใว้ จากนั้นลอง Run จะพบว่าทุกๆหน้าสามารถ slide ได้ สามารถกดปุ่มได้แล้วนะครับ ก็เป็นการเสร็จกับการทำ  left menu

ต่อไปจะทำ right Menu กันนะครับ ง่ายๆเลย

ให้เราลาก ViewController มา 1 อันตกแต่งตามต้องการ จากนั้นให้เราลากเส้นจาก SWRevealViewController มาที่ ViewController ที่เราลากมาเมื่อครู่นี้แลือก

reveal view controller set controller  ดังรูป

จากนั้นให้เราตั่งชื่อเส้นเป็น "sw_right" ลองกด Run ดู ลองเลื่อนซ้ายจากด้านขวาดู จะพบว่ามีเมนูด้านขวา slide ออกมา ส่วนการตกแต่งปุ่มก็สามารถทำได้เหมือนกับ left menu เลยนะครับ

โอเค ครับก็เป็นอันเสร็จสิ้นการสอนแล้วนะครับ ผมหวังเป็นอย่างยิ่งว่า สิ่งนี้จะสามารถทำให้เพื่อนๆเอาไปปรับใช้กับงานของตัวเองได้นะครับ

VDO สำหรับการสอนนะครับ