[iOS Dev] Custom UIViewController Transitions

หนึ่งในเรื่องที่น่าสนใจที่สุดของ iOS 7 SDK จะเรียกอย่างนี้เลยก็ว่าได้ เรื่องเกี่ยวกับ Animation สำหรับ iOS 7 นี่เยอะ และน่าสนใจทั้งนั้นเลย เมื่อก่อนเราจะ Custom Transition ระหว่าง View Controller ทำได้ไม่ง่ายเลย ต้องทำผ่าน Core Animation

นั่นล่ะครับ วันนี้เราจะมาว่ากันเรื่อง Custom UIViewController Transitions
โดยใน Blog นี้จะกล่าวถึงการทำ Present Modal View Controller อย่างเดียว 
แต่ทั้งนี้ ทั้งนั้นก็สามารถจะใช้เรื่องนี้กับ UINavigationController ได้เช่นเดียวกัน 

App ที่นำมาเป็นตัวอย่าง วันนี้ง่ายมากเลย เราจะทำการแสดง Login Dialog ขึ้นมาเท่านั้นเอง


แล้วมันจะต่างอะไรกับการแสดง หรือเปลี่ยน View Controller แบบปกติล่ะ ? ก่อนอื่นผมอยากให้ Clone Repository นี้มารันเป็นตัวอย่างก่อนนะครับ (ประเด็นคือขี้เกียจทำ Gif File)


จากผลลัพธ์จะเห็นว่า Login Dialog จะถูกแสดงบนพื้นที่ของหน้าแรกเลย 
โดยที่หน้าแรกก็ยังไม่ได้หายไปไหน 

วิธีการก็ไม่ยากเลยครับ แต่อาจจะต้องใช้จินตนาการเยอะสักหน่อย ผมจะพยายามใส่ภาพให้นะ

ขั้นแรก็สร้าง Action ของปุ่ม Login ที่ Controller หน้าแรก แล้วประกาศ Protocol UIViewControllerTransitioningDelegate เพราะเราจะต้องบอกว่า เราจะให้ Transition ด้วย Custom Animation ตัวไหน 


ในส่วนของ Action ที่แปลกไปมีแค่เราต้องกำหนดค่า TransitioningDelegate เพื่อให้ Controller บอก transitionContext ว่าจะทำการจะใช้ Animation ไหนในการทำ Transition และกำหนดค่า modalPresentationStyle เป็นเป็น Custom ครับ :)

ส่วนของ Delegate ก็จะแค่คืนค่า Custom Transition Class ที่เรากำลังจะสร้างขึ้นกลับมา โดยจะเห็นข้อกำหนดของการคืนค่า จะต้องเป็น Object ใดๆ ก็ได้ที่กำหนด Protocol UIViewControllerAnimatedTransitioning เอาไว้


จาก Code ด้านบน จะเห็นว่าต้องสร้าง Custom Class ใช่ไหม ? มาสร้างกันเลย พอสร้างแล้วก็อย่าลืมประกาศ Protocol UIViewControllerAniamtedTransition ด้วย พอประกาศแล้ว Xcode ก็จะบอกเราถึงฟังก์ชั่นที่จำเป็นจะต้อง Implement เพื่อทำ Custom Transition ประกอบไปด้วย



และ


โดยฟังก์ชั่นแรกนี่ง่ายมากเลย แค่คืนค่าระยะเวลาของการ Transition เท่านั้นเอง ซึ่งควรจะสัมพันธ์กับเวลาของ Animation ที่เราจะเขียนในฟังก์ชั่นถัดไป

คราวนี้เราจะมาเริ่มจุดสำคัญของการทำ Custom Transition Animation 
โดย Flow ของการทำงานจะเป็นดังนี้

  • เรามี View Controller ทั้ง 2 ตัว โดยที่จะแสดง B บน A โดย TransitionContext จะนำ A มาใส่ลงใน ContainerView ซึ่งเป็นพื้นที่จัดแสดงของเราให้อยู่แล้ว

  •  จากนั้นเราจะทำการนำ B ที่จะแสดงมาไว้ใน ContainerView เดียวกัน (ในขณะเวลาเดียวกัน เราจะไม่เห็น B เพราะหน้าจอเราแสดง A อยู่ ดังนั้นเราต้องจินตนาการให้ดี ว่าจะให้ B มาจากทางไหน)


  • และก็ทำการแสดง B โดยแค่ย้าย B มาซ้อนทับไว้ด้านบนของ A เท่านั้นเอง แต่อย่างที่บอกว่าเราเล่นกับ View ดังนั้นตอนนี้ TransitionContext จะทำการแช่แข็ง Controller เอาไว้ก่อนจนกว่า ...


  • เราจะส่งข้อความไปบอก TransitionContext ว่าทำการแสดง B บน A เรียบร้อยแล้วนะ Action ของ Controller B ก็จะทำงานได้อย่างปกติสุข 


เท่านี้เองครับ พอเรามาดูที่ Code ก็จะได้ประมาณนี้ ลองอ่านโค้ดดีๆ จะพบว่ามันตรงไปตรงมามากเลยนะ เพียงแต่เราจะต้องจินตนาการเยอะสักหน่อย โดยเราสามารถที่จะประยุกต์ใช้ UIView Animation Function ได้ทุกอย่างเลย 


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

คราวนี้ผมจะจบไว้ที่ตรงนี้ก่อน คราวหน้าเจอกันกับเรื่อง Interactive Transition นะครับ

** Update! ผมได้เพิ่ม Dismissal Animation ไว้ที่ Github แล้วนะครับ เข้าไปดูกันได้

Popular posts from this blog

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

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

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น