Slide Menu ด้วย CollectionView

       

สวัสดี๊!! สวัสดี ทุกๆคนที่หลงเข้ามาอ่าน (เอ๊ะ!!! ฮ่าๆๆๆๆๆๆๆ) จากภาพด้านบนที่เห็นคงเดาไม่ยาก

วันนี้เดี๊ยนขอนำเสนอ การทำ Slide Menu แบบเริศๆให้ทุกคนได้ดูกันล่ะค่ะคู๊ณณณณณ!!!

หลังจากที่ได้เห็นเพื่อนๆได้ลองทำ slide menu โดยใช้ UITableView หรือ View แบบธรรมดากันไปแล้ว
เรามาเพิ่มความสวยงามให้กับเจ้าตัว slide menu โดยใช้ CollectionView กันจ้าาาาา(อ่านแบบแอคโค่)

เพื่อไม่ให้เสียเวลากด create new project แบบด่วนๆเลยค่ะ

จากนั้นนะคะ เราก็จัดการตกแต่งหน้า ViewController ของเราก็นะคะ อันนี้ก็แล้วแต่บุคคลเลย ชอบแบบไหนก็ทำแบบนั้น ส่วนเดี๊ยนชอบความอลังการ เลยใช้เป็น UIImage นะคะ 

                                

   

                                 

                      

หลังที่เราใส่รูปแล้ว ถ้าเราปล่อยรูปไว้เฉยๆก็กระไรอยู่ จัดการใส่ effect blur ให้กับรูปภาพด้วยนะจ๊ะ เพื่อความสวยงามที่แท้จริง

                             

เมื่อใส่ background เป็นที่เรียบร้อยแล้ว ก็จัดการเพิ่มปุ่มเมนูลงไป จากตัวอย่างเราใส่เป็น text แต่สำหรับเพื่อนๆ อาจจะใช้รูปภาพแทนก็ได้ และอย่าลืมจัดวางให้สวยงาม ตามใจชอบ

                       

ซึ่งตามหัวข้อหลักของวันนี้เลย คือ เราจะทำ Slide Menu โดยใช้ Collection View ดังนั้นเราก็ขาดตัวสำคัญตัวนี้ไม่ได้เลย จัดการลากมาไว้ใน ViewController และจัดรูปแบบการจัดวางให้เรียบร้อย

อย่าลืม!!!! ปรับแต่งตัว CollectionView ด้วย

                         

เมื่อปรับแต่งเสร็จเป็นที่เรียบร้อยแล้วก็นำ UIImage View ใส่ลงไปใน Collection View Cell ด้วย และก็ Add Constrain ให้กับ Collection View ปรับตามภาพด้านล่างได้เล้ยยยยย    

                        

จากนั้นให้ New File  ขึ้นมาใหม่ โดยเลือกเป็น Swift File ตามภาพ และใส่โค้ดลงในไฟล์ตามภาพเลย

                    

                  

จากนั้นให้ New File ขึ้นมาอีกหนึ่งไฟล์ แต่ให้เลือกเป็น Cocoa Touch Class และเลือกตรง Subclass เป็น

UICollectionViewCell จากนั้นผูกไฟล์ ShowFoodCollectionViewCell กับ CollectionViewCell และพิมพ์โค้ดตามดังภาพ

                   

                         

จากนั้นให้ประกาศ Datasource กับ Delegate ให้กับ CollectionView และเข้าไปที่หน้า ViewController และพิมพ์โค้ดตามภาพด้านล่าง

                     

                     

       

                    

จากนั้นเมื่อกดรัน ก็จะแสดงดังภาพด้านล่างที่ปรากฎ

                         

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