[iOS Dev] Interactive UIViewController Transitions

วันนี้จะเขียนเรื่อง Interactive UIViewController Transition นะ ก่อนอื่นขอให้ไปอ่านนี่ก่อน


จะได้เข้าใจแนวคิดการทำงานคร่าวๆ คราวนี้ก็คล้ายๆ เดิมเพียงแต่เพิ่มคำว่า Interactive ดังนั้น เราจะตอบสนองกับมันได้อย่างอิสระ ซึ่งจะทำงานร่วมกับ UIGestureRecognizer ทั้งหลายนั่นแหละ เช่น แทนที่เราจะ Dismiss Dialog ด้วยการกดปุ่ม (Action) ก็จะใช้ลากนิ้วบนพื้นที่จอเพื่อ Dismiss (Interaction) จากบนลงล่างแทน เป็นต้น ที่ผมเรียก Interaction เพราะเราจะสามารถลากนิ้วได้อย่างอิสระ จะลากจบ/ไม่จบก็ได้ ซึ่ง Transitions จะเล่นไปตามที่เราลาก


Blog ที่แล้วผมเขียนโดยใช้การ Present Modal View แต่ Project คราวนี้เราจะ Custom Transitions ของ UINavigationController แทน จะได้แบ่งปันความรู้กันอย่างทั่วถึง

Github Repositoryhttps://github.com/macbaszii/InteractiveTransitions

ซึ่งใน Blog นี้ผมจะไม่อธิบายส่วนของ Transitions Animation นะ จึงต้องให้ไปอ่าน Blog แรกเพื่อให้เข้าใจแนวคิดคร่าวๆ ก่อน :) ส่วนนั้น มันแล้วแต่งาน แล้วแต่คนเลย

** ในการทำ Transitions Animation คราวนี้มีการใช้ UIView Snapshot API ด้วย ไว้จะมาเขียนให้อ่านกันอีกครั้งนะครับ

ส่วนที่เราจะต้อง Focus มีแค่ใน OZDetailViewController.m เท่านั้นครับ ซึ่งจะเป็นการทำ Interactive Transitions จากหน้า Detail เพื่อกลับไปหน้าที่เป็น Collection View ของสัตว์ต่างๆ

เรื่มแรกต้องสร้าง Instance Variable ตัวหนึ่ง เพื่อเก็บ Progress ของการทำ Interaction ซะก่อน อย่างที่บอกในตอนต้น มันจะมีเหตุการณ์ที่เราลากนิ้วจนจบ หรือไม่จบ ซึ่งแน่นอนว่าเป็น % นั่นแหละ


อย่างที่บอกว่า การทำ Interaction นั้น สิ่งที่จะต้องพบเจอก็คงไม่พ้น UIGestureRecognizer นั่นแหละ ซึ่งคราวนี้ ผมเลือก UIScreenEdgeGestureRecognizer มาเป็นตัวอย่าง จริงๆ เป็น Gesture ที่ผมตื่นเต้นมากเลยนะ ตอนที่มันเปิดตัว :P


คราวนี้อย่างเรารู้กันว่าใน Controller Stack ของเรานั้น จะมี UINavigationController เพียงตัวเดียวเท่านั้น ดังนั้นเราจะต้องจัดการการเป็น Delegate ของ View Controller ด้วยว่า เมื่อไหร่ ใครจะเป็น ซึ่งจะต้องจัดการใน viewDidAppear และ viewWillDisappear ตามนี้


ต่อไปก็เขียน UINavigationController Delegate method เพื่อบอกว่าจะให้ Variable ตัวไหน เป็นคนเก็บ Progress ของ Interactive Transitions (ระวังเรื่องชื่อด้วย มันคล้ายๆ กัน)


จากนั้นเราก็จะมาเขียน Gesture Handler กัน (ควรจะกดดูรูปใหญ่ ฮ่าฮ่า) ก็ไม่มีอะไรมากเนอะ เรา Handle ทั้งหมด 4 State เพื่อเก็บ Progress ของการทำ Interactive Transitions ประกอบด้วย

  • Begin State: จะทำการสร้างตัวเก็บ Progress และสั่งให้ Navigation Controller ทำการ Pop
  • Changed State: จะทำการอัพเดท Progress
  • End and Cancel State: ก็จะทำการตัดสินใจจาก % ของ Interaction Progress ว่าจะให้จบการทำ Transitions หรือให้ Cancel Transitions และกลับสู่สถานะก่อนหน้า
โดย Progress เราจะคำนวณจากการเคลื่อนที่ View ที่เรา Interaction ด้วย โดยจะมีค่าระหว่าง 0.0 - 1.0 



จบแล้วครับ เท่านี้เอง ... ส่วนเรื่อง UIView Snapshot ติดไว้ก่อนนะครับ :)

Popular posts from this blog

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

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

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