วิธีติดตั้ง Interactive Navigation Controller ให้สามารถใช้งานได้ในโปรเจคจริง — สำหรับปัดหน้าจอจากส่วนใดก็ได้เพื่อเรียก Pop transition
สำหรับบทความนี้ จะเป็นการนำเสนอการติดตั้ง Interactive pop trasition ของ Interactive navigation controller ในโปรเจคจริงๆ กันอย่างละเอียด ก่อนอื่นขอเกริ่นเพื่อปรับความเข้าใจก่อนที่เราจะเข้าถึงเนื้อหาหลักกันซักเล็กน้อย การใช้งาน swipe to pop view controller นั้นมีสาเหตุมาจาก
- ขนาดหน้าจอมือถือที่มีขนาดใหญ่ขึ้นเรื่อยๆ จนผู้ใช้เอื้อมไปกดปุ่ม Back ที่บริเวนซ้ายบนได้ยากมากยิ่งขึ้น
- เพิ่มความสะดวกในการกลับไปยังเนื้อหาส่วนก่อนหน้าได้ง่ายมากยิ่งขึ้นด้วยการปิดส่วนใดของหน้าจอก็ได้ ไปทางขวา
หากผู้อ่านต้องการทราบรายละเอียดการสร้าง Interactive navigation controller สามารถติดตามได้ที่บทความต่อไปนี้
ส่วนใครที่ต้องการนำ InteractiveNavigationController ไปใช้ คุณอยู่ถูกที่แล้ว! เพราะในบทความนี้จะพูดถึงการนำ Interactive navigation controller มาใช้กับโปรเจคที่มีอยู่จริงๆ โดยเนื้อหาจะแบ่งเป็น 1. ติดตั้ง UINavigationController ให้กับ ViewController — 2. เปิดใช้งาน interactivePopGestureRecognizer ของ UINavigationController — 3. ติดตั้งและใช้งาน InteractiveNavigationController
สำหรับการยกตัวอย่างนี้ ผมจะใช้โปรเจคของบริษัทผมเอง คือแอปเกมโชว์ตอบคำถามออนไลน์ หรือแอป Panya หากใครต้องการดูตัวอย่างที่เสร็จแล้ว สามารถโหลดได้ที่ลิงค์ข้างบนเลยครับผม :) — ถ้าพร้อมแล้วเรามาดูหัวข้อแรกกันเลยดีกว่าครับ
1. ติดตั้ง UINavigationController ให้กับ ViewController
สำหรับมือโปรก็คงจะทราบกันดีอยู่แล้วใช่มั้ยว่าการติดตั้ง UINavigationController ให้กับ UIViewController นั้นทำยังไง? ถ้าหากรู้อยู่แล้วสามารถข้ามไปยังหัวข้อถัดไปได้เลย แต่ถ้ายังไม่รู้เรามาเริ่มกันทีละ Step กันเลยครับ
- การติดตั้งผ่าน Storyboard — สำหรับสาย Storyboard ก็ทำได้ไม่ยาก เพียงแค่เลือก UIViewController ของเราที่ต้องการให้เป็น RootViewController ของ UINavigationController แล้วเลือก Editor > Embed In > Navigation Controller หลังจากนั้นเราก็จะได้ UIViewController ที่เราเลือกมาพร้อมกับ NavigationController นั่นเอง
2. ติดตั้งผ่าน Code — การสร้าง UINavigationController ขึ้นมานั้นก็ไม่ยาก โดยการเรียกใช้ UINavigationController และใส่ RootViewController ให้กับมันแค่นั้นเอง
2. เปิดใช้งาน interactivePopGestureRecognizer ของ UINavigationController
เมื่อเราตั้งค่า Gesture นี้ให้กับ UIViewController ที่มี UINavigationController แล้ว จะทำให้ผู้ใช้งานสามารถปัดหน้าจอไปทางขวา จากบริเวณขอบซ้ายของหน้าจอ เพื่อทำการ Pop กลับไปยัง UIViewController ก่อนหน้าได้
โดยเจ้า InteractivePopGestureRecognizer นี้รอบรับ iOS ตั้งแต่เวอร์ชั่น 7.0 เป็นต้นไป และ UIViewController นั้นต้อง Implement protocol ที่ชื่อว่า UIGestureRecognizerDelegate ด้วยถึงจะใช้งานได้ ลองมาดูตัวอย่างโค้ดกัน
อันดับแรกเราต้องกำหนด Delegate ให้กับ UINavigationController และเปิดใช้งาน InteractivePopGesture ด้วย โดยผมจะใส่ไว้ที่ ViewDidAppear เนื่องจากผมต้องการให้มันเปลี่ยนไปเรื่อยๆ ตาม UIViewController ล่าสุดที่เจ้า UINavigationController นี้เก็บไว้
หลังจากนั้นเราก็ต้อง Implement protocol ที่ชื่อว่า UIGestureRecognizerDelegate เพื่อกำหนดว่าเมื่อใดที่เราจะให้เจ้า Gesture นี้ใช้งานได้ โดยเงื่อนไขที่ผมจะให้มันใช้งานก็ได้ก็คือ
1. ต้องไม่ใช่ RootViewController
2. เป็น InteractivePopGestureRecognizer
3. แอปของเราขณะนั้นต้องเปิดใช้งาน Animation อยู่
หลังจากเสร็จขั้นตอนทั้งสองเราก็ลองรันโปรเจคขึ้นมา และลองปัดบริเวณขอบหน้าจอด้านซ้ายเพื่อทดสอบ Pop transition ของเรา อ้อ อย่าลืมเรียกใช้งาน Push ก่อนนะครับไม่งั้นจะไม่สามารถใช้งาน Pop ได้ตามเงื่อนไขที่ตั้งไว้ใสขั้นตอนที่ 2
3. ติดตั้งและใช้งาน InteractiveNavigationController
หลังจากติดตั้ง UIGestureRecognizer ให้กับ UINavigationController แล้วเราก็จะปัดหน้าจอได้อย่างคูลๆ แต่ว่า iPhone บางรุ่นก็ยังมีขนาดหน้าจอที่ใหญ่ ยากเกินจะเอื้อมถึง มันจะดีกว่ามั้ยถ้าหากเราปัดหน้าจอจากส่วนใดก็ได้?
ก่อนอื่นเลย ให้ไปดาวโหลด Source code: InteractiveNavigationController ของผมที่ลิ้งก์ข้างล่างนี้ ผู้อ่านสามารถ Build + Run โปรเจคเพื่อลองเล่นได้
หลังจากโหลดเสร็จ ให้ทำการคัดลอกไฟล์ InteractiveGestureRecognizer.swift, InteractiveNavigationController.swift, และ InteractivePopViewAnimator.swift แล้วโยนใส่โปรเจคหลักของเรา
ต่อมาคือการเรียกใช้งานเจ้า InteractiveNavigationController ถ้าหากผู้อ่านมี NavigationController ของตัวเองอยู่แล้ว ก็ให้ไป Subclass ออกมาจาก InteractiveNavigationController ได้เลย เช่น
หรือถ้าหากใครไม่มีก็ให้ใส่แทนที่ UINavigationController ได้เลยไม่ว่าจะเป็น Storyboard หรือด้วย Code
สุดท้ายลองมาทดสอบกัน! ก่อนอื่นเลยต้องเรียกใช้งาน Push ก่อน แล้วให้ลอกปัดหน้าจอไปทาวขวา จากตำแหน่งใดก็ได้
ปิดจ๊อบ — Where to go from here
เรียบร้อยแล้วครับ สำหรับการติดตั้ง InteractiveNavigationController ซึ่งอาจจะมีการแสดงผล UI ที่ผิดพลาดเล็กน้อยยังไงผู้อ่านสามารถปรับได้ตามสดวก เพื่อให้เหมาะสมกับโปรเจคนั้นๆ ครับ
ยังมีบทความที่ผมเขียนเกี่ยวกับเรื่อง UX สามารถลองอ่านได้จากข้างล่างนี้ครับ อย่าลืมกดปรบมือเป็นกำลังใจให้ผมด้วยครับ ขอบคุณครับ
