インタラクティブ画面遷移の実践的解説

補足: 動画埋め込み部分、Xcodeでの説明を追記した版を別途更新予定です。

Transcript

1. ΠϯλϥΫςΟϒը໘ભҠ
   ͷ࣮ફతղઆ
   ෰෦ ஐ
   גࣜձࣾAbemaTV
   2017/9/16 iOSDC
   

   View Slide

2. View Slide

3. Satoshi Hattori
   satoshi0212
   AbemaTV
   Twitter: @shmdevelop
   ৽͍ٕ͠ज़ͱɺͦͷগ͠มΘͬͨ࢖͍ํ͕େ޷͖
   TechCrunch Tokyo 2015 Hackathon ༏ल৆
   Mizuho.Hack ༏ल৆
   Microsoft MPC Hackathon TMCN৆
   Hack Cars Days 2015 χϑςΟ৆
   MUSICIANS HACKATHON 2015 ༏ल৆
   

   View Slide

4. ͜͜ͰલఏΛڞ༗
   

   View Slide

5. ਺ϲ݄લͷແ஌ͳࢲ͸ɺ͜Μͳൃද಺༰͕৺͔Βཉ͔ͬͨ͠...ʂ
   iOS9 Ҏ߱Λର৅
   ͭ·Γ iOS10͔Βͷػೳ͸࢖͍ͬͯ·ͤΜ
   ·ͨࠓճͷ࣮૷Ͱ͸֎෦ϥΠϒϥϦΛ࢖༻͍ͯ͠·ͤΜ
   

   View Slide

6. ࠓ೔࿩͢಺༰
   ΠϯλϥΫςΟϒը໘ભҠͱ͸
   ࣮૷ղઆ
   ɹɹ1. Ϟʔμϧը໘ͷΠϯλϥΫςΟϒԽ
   ɹɹ2. ಉҰը໘಺ͰͷΠϯλϥΫςΟϒঢ়ଶભҠ
   

   View Slide

7. ΠϯλϥΫςΟϒը໘ભҠͱ͸
   

   View Slide

8. Ϣʔβૢ࡞ʹΑΔมԽྔʹԠͨ͡
   τϥϯδγϣϯΞχϝʔγϣϯ
   

   View Slide

9. ΧελϜτϥϯδγϣϯ + α
   

   View Slide

10. SafariͷΤοδεϫΠϓ
    

    View Slide

11. ʮભҠʹΠϯλϥΫςΟϒੑΛ௥Ճ͢Δʯ
    

    View Slide

12. “ΞχϝʔγϣϯΛΠϯλϥΫςΟϒʹ͢Δʹ͸ɺ
    UIPercentDrivenInteractiveTransition ΦϒδΣΫτΛ࢖༻͢Δͷ͕
    ࠷΋؆୯Ͱ͢ɻUIPercentDrivenInteractiveTransition ΦϒδΣΫτ
    ͸ɺطଘͷΞχϝʔλʔΦϒδΣΫτͱ࿈ܞͯ͠Ξχϝʔγϣϯͷλ
    ΠϛϯάΛ੍ޚ͠·͢ɻ”
    Apple "View Controller Programming Guide for iOS" ΑΓҾ༻
    ʮભҠʹΠϯλϥΫςΟϒੑΛ௥Ճ͢Δʯ
    

    View Slide

13. ࣸਅ
    

    View Slide

14. AWA
    

    View Slide

15. ࣮ફฤ: 1
    Ϟʔμϧը໘ͷΠϯλϥΫςΟϒԽ
    

    View Slide

16. ݩͷঢ়ଶ
    

    View Slide

17. ݩͷঢ়ଶ
    presentͰը໘શମʹϞʔμϧදࣔ
    

    View Slide

18. ໨తͱ͢Δঢ়ଶ
    

    View Slide

19. ΠϯλϥΫςΟϒʹ͢Δ͜ͱ
    ը໘ͷ໿൒෼·Ͱͷදࣔʹ͢Δ͜ͱ
    

    View Slide

20. ΠϯλϥΫςΟϒʹ͢Δ·Ͱ
    

    View Slide

21. 1. dismissτϥϯδγϣϯΛ੍ޚ͢ΔUIViewControllerAnimatedTransitioning ͷ
    ࣮૷ΫϥεͱͦΕΛ࢖͏ͨΊͷϓϩτίϧ࡞੒
    2. Ϟʔμϧը໘ʹϓϩτίϧద༻
    3. දࣔݩը໘ͰUIViewControllerTransitioningDelegateΛ࣮૷
    ΠϯλϥΫςΟϒʹ͢Δ·Ͱ
    

    View Slide

22. શը໘Ͱ͸ͳ͘ը໘ͷҰ෦ΛදࣔྖҬʹ͢Δ·Ͱ
    

    View Slide

23. 1. UIPresentationControllerΛ࣮૷͢ΔΫϥεΛ࡞੒
    2. දࣔݩը໘ͰUIViewControllerTransitioningDelegateͰݺͼग़͠௥Ճ
    શը໘Ͱ͸ͳ͘ը໘ͷҰ෦ΛදࣔྖҬʹ͢Δ·Ͱ
    

    View Slide

24. Xcode΁
    

    View Slide

25. ࣮ફฤ: 2
    ಉҰը໘಺ͰͷΠϯλϥΫςΟϒঢ়ଶભҠ
    

    View Slide

26. ݩͷঢ়ଶ
    ΠϯλϥΫςΟϒੑͳ͠
    

    View Slide

27. ໨తͱ͢Δঢ়ଶ
    

    View Slide

28. ͔ͳΓΠϯλϥΫςΟϒʂ
    

    View Slide

29. ͋Ε...
    

    View Slide

30. Present / Dismiss ΍ Push / Pop Ͱ
    ࣮ݱͰ͖Δؾ͕͠ͳ͍ͧ...
    

    View Slide

31. ը໘಺ͷΠϯλϥΫςΟϒͳঢ়ଶભҠ
    

    View Slide

32. ը໘಺ͷΠϯλϥΫςΟϒͳঢ়ଶભҠ
    CGAffineTransformར༻ॲཧͱalpha஋ௐ੔
    UIScrollViewར༻ʹΑΔprogress஋ੜ੒Ͱ࣮ݱͨ͠
    

    View Slide

33. Xcode΁
    

    View Slide

34. ·ͱΊ
    

    View Slide

35. ·ͱΊ
    - UIPercentDrivenInteractiveTransition ΦϒδΣΫτͱ஥ྑ͘ͳΖ͏
    - ը໘಺ͷΠϯλϥΫςΟϒͳঢ়ଶભҠͰ͸ɺCGAffineTransformར༻Ͱͷ
    ॲཧͱalpha஋ௐ੔ΛɺUIScrollViewར༻ʹΑΔprogress஋ੜ੒Ͱ࣮ݱͨ͠
    

    View Slide

36. ΞϓϦΛૉఢʹ͍ͯ͜͠͏ͥʂ
    

    View Slide

37. Enjoy! iOSDC 2017
    

    View Slide

38. - എܠϒϥʔɺυϩοϓγϟυ΢ɺ্୺ͷΈؙ֯ͷಉ࣮࣌ݱ͸·͡େมͩͬͨ
    - ॎɺԣɺiPadରԠͨ͠AutoLayout૊Έ͖ͬͨͥʂ
    - αΠόʔΤʔδΣϯτϒʔεʹؾܰʹ࿩ֻ͚͠ʹ͖͍ͯͩ͘͞
    - Appleͷ޻෉͕ࢀߟʹͳΔ
    ɹγϟυ΢ͷมԽɺݩը໘ͷҠಈɺด͡Δɺ։͘εϨογϣϧυͷมԽ
    ༨ஊ
    

    View Slide