หัดทำ Slide Out Menu เป็นของตัวเองกันเถอะ !!!

กลับมาอีกแล้วค่ะ ทักทายกันตอนบ่ายๆ

หลังจากเรารู้เกี่ยวกับ Layout ไปแล้วในบทความก่อนหน้านี้ คราวนี้เรามาลองสร้าง Menu ในแบบที่เขาเรียกกันว่า Slide Menu Out กันดีกว่าค่ะ

เพื่อไม่ให้ยุ่งเยิงมาก เราสร้าง Project ใหม่กันดีกว่าค่ะ ( ขั้นตอนการสร้าง Project ใหม่คงไม่กล่าวถึงแล้วนะคะ )

เมื่อสร้าง Project ใหม่มาแล้ว เราเริ่มจากหา UI มาวางดีกว่าค่ะ จะได้เห็นความแตกต่างบ้าง ตามตัวอย่างเราวาง UILabel ค่ะ แล้วกำหนด Constrain Layout ให้เรียบร้อยด้วยนะคะ

ทีนี้ Menu ของเราจะปรากฏให้เห็นเมื่อผู้ใช้งานกดปุ่มค่ะ เราจึงไปเอา UIButton มาวางในตำแหน่งที่ต้องการค่ะ (อย่าลืมจัด Layout นะคะ)

แล้วเมื่อผู้ใช้กดปุ่มเราจะให้ Menu ปรากฏออกมาอย่างไร ตามตัวอย่างเราต้องการพื้นเมนูว่างๆ ที่ ดังนั้นเราจึงต้องไปเอา UIView มาวางค่ะ (เปลี่ยนสีพื้นของ UIView ซะหน่อยนะคะ เดี๋ยวมองไม่เห็นความแตกต่าง) แต่สิ่งที่สำคัญคือ เราอยากให้ UIView นั้นปรากฏหรือเลื่อนออกมาแค่ไหน ก็อยู่ที่การกำหนด Layout ค่ะ

จะสั่งเกตได้ว่าเรามีการกำหนดส่วนของ Width ไว้ด้วย ซึ่งตรงนี้จะเป็นความกว้างของ Menu ของเรานั่นแหล่ะค่ะ รวมทั้งค่าตรงนี้เราจะต้องเอาไปใช้ตอนจะซ่อน Menu ด้วยนะคะ มาต่อกันดีกว่า ทีนี้เราต้องไปเขียน Code กันหน่อยที่ ViewController.swift ให้กำหนด Outletให้กับแนวของ Constrain ด้านซ้ายเพื่อใช้กำหนดระยะห่างของ UIView กับ ViewController รวมทั้งประกาศตัวแปรสำหรับเก็บสถานะของ Menu ว่าแสดงหรือซ่อนอยู่

จากนั้นสร้าง Function สำหรับจัดตำแหน่งแสดง Menu (func positionOpenMenu) และ สำหรับจัดตำแหน่งซ่อน Menu (func positionCloseMenu)

เมื่อเราได้ Function แล้วมาถึงเรียกใช้งานกันล่ะค่ะ เวลาที่ Menu จะแสดงให้เห็น คือผู้ใช้งานกดปุ่มที่เราวางไว้ ดังนั้นเราต้องประกาศ Action ให้กับ UIButton ที่เราเอามาวางล่ะค่ะ

การทำงานคือ เรียกใช้ Function positionOpentMenu เพื่อแสดง Menu น่ะค่ะ แล้วเปลี่ยนสถานะของ Menu ให้เป็นตรงข้าม เพื่อบอกว่า ตอนนี้แสดง Menu อยู่นะ คราวนี้ลอง Run Simulator ดูค่ะ

ปรากฏว่า ปัญหาที่ตามมาคือ จะซ่อน Menu อย่างไรดี ก็ Menu บังปุ่มไปแล้ว มีทางแก้ค่ะ คือ ถ้าผู้ใช้กดหรือแตะที่ใดก็ได้ในหน้าแอปพลิเคชัน Menu จะซ่อนทันที Code ที่เราจะใช้ก็

แค่นี้เองค่ะ คราวนี้ลอง Run Simulator ดูใหม่ค่ะ เราก็จะได้ Menu ที่แสดงและซ่อนได้แล้วตามที่ต้องการ ที่นี้เราอยากวางอะไรบน Menu บ้างก็ลาก UI จาก Object Library ไปวางตามต้องการได้เลยค่ะ เพิ่มเติมอีกนิดค่ะ เป็นการจัดตกแต่งนิดหน่อยเพื่อให้เห็นชั้นระหว่าง Menu กับหน้า View หลัก เพียงแค่ประกาศ Outlet ให้ View ที่เป็น Menu (view สีเทาน่ะค่ะ)