Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

satoshi0212
September 17, 2017

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

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

satoshi0212

September 17, 2017
Tweet

More Decks by satoshi0212

Other Decks in Programming

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