黒魔術AutoLayoutとiPhone 6/6 Plus

iOS 8 & iPhone6/6 Plus 開発知見共有会での発表資料です。

Transcript

1. ࠇຐज़"VUP-BZPVUͱ
   J1IPOF1MVT
   @shobyshoby
   

   View Slide

2. ࣗݾ঺հ
   pixivͰΞϓϦͭͬͯ͘·͢
   

   View Slide

3. ຊ୊
   

   View Slide

4. iOS 7 ࣌୅
   

   View Slide

5. Before
   

   View Slide

6. After
   

   View Slide

7. Storyboard͕ഁ୼ͨ͠ͷͰ
   ੔ཧͯ͠AutoLayoutԽͨ͠
   ৄࡉ͸ʮStoryboard + AutoLayoutόουϊ΢ϋ΢ʯͷεϥΠυ
   https://speakerdeck.com/shoby/storyboard-plus-autolayout-bad-knowhow
   

   View Slide

8. iOS 8
   

   View Slide

9. ʮXcode Beta 6 Ͱ͏·͘ಈ͍ͯΔ͠ɺ
   iOS 8 ָউͬ͢Θʔ
   ը໘େ͖͘ͳΔͬͯᷚ͋Δ͚Ͳɺ
   AutoLayoutରԠͯ͠Δ͠ɺ༨༟ͬ͠ΐʯ
   

   View Slide

10. iPhone 6/6 Plus ൃද
    

    View Slide

11. ͏Θ͋͋͋͋
    

    View Slide

12. ࠇຐज़"VUP-BZPVUͱ
    J1IPOF1MVT
    

    View Slide

13. ը໘αΠζมߋͷରԠ͕
    ͭΒ͔ͬͨ෦෼Λڞ༗͠·͢
    !
    Α͘ߟ͑ͯ࢖͓͏
    AutoLayout
    

    View Slide

14. ֓ཁ
    

    View Slide

15. "VUP-BZPVUΞχϝʔγϣϯ
    "VUP-BZPVU6*4DSPMM7JFX
    "VUP-BZPVUͷϝϯςφϯείετ
    

    View Slide

16. "VUP-BZPVU
    Ξχϝʔγϣϯ
    

    View Slide

17. AutoLayoutΞχϝʔγϣϯ
    "VUP-BZPVUͷ$POTUSBJOUΛ
    *#0VUMFUͰ઀ଓ
    $POTUSBJOUΛ6*7JFXͷ
    BOJNBUJPO#MPDLதͰมԽͤ͞Δ
    

    View Slide

18. Ξχϝʔγϣϯ
    

    View Slide

19. Ξχϝʔγϣϯͷίʔυ
    [UIView animateWithDuration:duration animations:^{
    self.detailViewTopConstraint.constant = height;
    [self.view layoutIfNeeded];
    }];
    

    View Slide

20. ϝϦοτ
    ίʔυྔ͕ݮΔ
    ୯Ұͷ7JFX͚ͩͳΒγϯϓϧ
    Ͱ෼͔Γ΍͍͢
    

    View Slide

21. σϝϦοτ
    ґଘؔ܎Λ࣋ͬͨ7JFX͕ෳ਺ಉ࣌ʹมԽ͠
    ͯ͠·͏
    ґଘؔ܎ͷ͋Δผ7JFX΁ͷϢʔβʔૢ࡞͕
    ݪҼͰαΠζ͕มΘΔ͜ͱ΋ʜ
    BOJNBUJPO#MPDL֎ͰϨΠΞ΢τͷ࠶ߏ੒
    ͕ߦΘΕΔͱΞχϝʔγϣϯ͠ͳ͍
    

    View Slide

22. "VUP-BZPVU
    6*4DSPMM7JFX
    

    View Slide

23. 6*4DSPMM7JFXͷϝϦοτɾ
    σϝϦοτ
    .JYFE"QQSPBDIͱ1VSF
    "VUP-BZPVU"QQSPBDI
    ԣ෯ґଘίʔυ
    

    View Slide

24. UIScrollViewͷ
    ϝϦοτɾσϝϦοτ
    

    View Slide

25. UIScrollView͸
    AutoLayoutʹ޲͍ͯͳ͍
    

    View Slide

26. ཧ༝͕ແ͚Ε͹
    UIPageViewController΍
    UICollectionViewΛ୅ΘΓʹ
    ࢖͏ࣄΛߟ͑ͨํ͕ྑ͍
    

    View Slide

27. UIScrollViewͷϝϦοτ
    εΫϩʔϧɺϖʔδϯάɺζʔ
    ϜΛ݉Ͷඋ͑ͨଟػೳੑ
    εΫϩʔϧঢ়گʹ߹Θͤͨ
    ࡉ͔͍ϑΟʔυόοΫ͕Մೳ
    

    View Slide

28. UIScrollViewͷσϝϦοτ
    6*4DSPMM7JFXͷ֎෦ͱ಺෦ͷ࠲ඪͷ
    ࢓૊Έ͕ҟͳΔͨΊɺ"VUP-BZPVU
    ʹΑͬͯԿ͕ى͔ͨ͜ཧղͮ͠Β͍
    ಺෦ͷίϯςϯπΛಈతʹมԽͤ͞
    Δ͜ͱ͕ଟ͘ɺ੩తʹ੍໿Λ௥Ճ͢
    Δ"VUP-BZPVUͱ૬ੑ͕ѱ͍
    

    View Slide

29. UIScrollViewͷ༻్
    ଟ͘ͷ৘ใͷҰ෦ΛݟͤΔʢεΫϩʔϧʣ
    จ຺͸ಉ͚ͩ͡ͲɺͦΕͧΕҧ͏ίϯςϯ
    πΛͭͭݟͤΔʢϖʔδϯάʣ
    ͭͷڊେͳίϯςϯπͷҰ෦ΛݟͤΔ
    ʢζʔϜʣ
    

    View Slide

30. UIScrollViewͷ୅ସ
    ଟ͘ͷ৘ใͷҰ෦ΛݟͤΔʢεΫϩʔϧʣ
    ˠ6*5BCMF7JFXɺ6*$PMMFDUJPO7JFX
    จ຺͸ಉ͚ͩ͡ͲɺͦΕͧΕҧ͏ίϯςϯπΛͭ
    ͭݟͤΔʢϖʔδϯάʣ
    ˠ6*1BHF7JFX$POUSPMMFSɺ6*$PMMFDUJPO7JFX
    ͭͷڊେͳίϯςϯπͷҰ෦ΛݟͤΔʢζʔϜʣ
    ˠ͖͋ΒΊͯ6*4DSPMM7JFX࢖͓͏ʜ
    

    View Slide

31. pixivΞϓϦͷ৔߹
    ΠϥετӾཡͷͨΊͷ
    շదੑΛ௥ٻͨ݁͠Ռɺ
    UIScrollViewΛ࢖͍ଓ͚͍ͯΔ
    

    View Slide

32. Mixed Approachͱ
    Pure Auto Layout
    Approach
    

    View Slide

33. UIScrollView And Autolayout
    https://developer.apple.com/library/ios/technotes/tn2154/_index.html
    ໰͍߹Θ͕ͤଟ͔ͬͨͷ͔
    UIScrollViewˍAutoLayoutͷ
    ઐ༻υΩϡϝϯτ͕͋Δ
    

    View Slide

34. Mixed Approach
    TDSPMM7JFXͷ֎ଆʹ੍໿
    TDSPMM7JFXͷDPOUFOU4J[F͸खಈͰઃఆ
    DPOUFOU7JFX͸BVUPSFTJ[JOH.BTL
    DPOUFOU7JFXΛಈతʹ௥Ճ࡟আͨ͠Γɺ
    ෳ਺ͷDPOUFOU7JFXΛѻ͏৔߹͸ͬͪ͜
    

    View Slide

35. Pure Auto Layout Approach
    TDSPMM7JFXͷ֎ଆͱɺத਎ʹ੍໿
    TDSPMM7JFXͷDPOUFOU4J[F͸੍໿ʹΑΓܾ
    ·ͬͨDPOUFOU7JFXͷαΠζʹͳΔ
    DPOUFOU7JFXͷαΠζ͸ɺTDSPMM7JFXͱ
    ֎ଆͱ਌WJFXͷ੍໿ʴDPOUFOU7JFXͱ
    TDSPMM7JFXͱͷ੍໿ͷෳ߹৚݅Ͱܾ·Δͨ
    Ίɺཧղ͸ࠔ೉ΛۃΊΔ
    

    View Slide

36. contentView
    scrollView
    contentView
    scrollView
    Mixed Approach
    Pure Auto Layout
    Approach
    

    View Slide

37. UIScrollViewͱ
    ԣ෯ґଘίʔυ
    

    View Slide

38. UIScrollViewͰ
    ԣํ޲ʹϖʔδϯά͢Δͱ
    σόΠεͷԣ෯ґଘʹͳΔ
    

    View Slide

39. Mixed Approachͷ৔߹ɺ
    contentViewੜ੒ޙ
    scrollViewͷԣ෯͕มΘΔͱ
    ද่͕ࣔΕΔ
    

    View Slide

40. 2
    1 3 4
    pixivΞϓϦͷߏ੒
    

    View Slide

41. 2
    1 3 4
    CGFloat offset = 2 * self.scrollView.frame.size.width;
    self.scrollView.contentOffset = CGPointMake(offset, 0);
    2ϖʔδ໨ʹඈͿͱ͖
    

    View Slide

42. 2
    1 3 4
    scrollViewͷԣ෯͕มΘΔ
    CGFloat offset = 2 * self.scrollView.frame.size.width;
    self.scrollView.contentOffset = CGPointMake(offset, 0);
    

    View Slide

43. ԣ෯ґଘίʔυͷղܾࡦ
    WJFXͷԣ෯͕มΘΔ౓ʹશͯ
    ͷDPOUFOU7JFXͷGSBNFΛܭ
    ࢉ͠௚͢
    ԣ෯ґଘͷॲཧͷલʹɺ
    MBZPVU*G/FFEFEΛݺͼग़͢
    

    View Slide

44. "VUP-BZPVUͷ
    ϝϯςφϯείετ
    

    View Slide

45. AutoLayout͸
    ਓྨʹ͸ૣ͗ͨ͢…
    

    View Slide

46. ಡΊΔAutoLayout
    ίʔυଆͰ"VUP-BZPVUΛॻ
    ͘ͱϝϯςφϯεੑ͕ߴ͍
    όʔδϣϯ؅ཧ͕Ͱ͖Δʂ
    ଞਓͷ੍໿͕ಡΊΔʂ
    

    View Slide

47. ·ͱΊ
    

    View Slide

48. ৽͍͠୺຤Ͱͷಈ࡞֬ೝ͸ɺൃද͞Εͨ
    ޙ͡Όͳ͍ͱ೉͍͠
    "VUP-BZPVUΛ࢖ͬͯΞχϝʔγϣϯΛ
    ͢Δͱίʔυ͸؆ܿʹͳΔ͕ɺґଘ͕ଟ
    ͍ͱෳࡶ
    6*4DSPMM7JFX͸"VUP-BZPVUͩͱͭΒ͍
    ίʔυଆͰ੍໿Λॻ͘ͱϝϯςφϯεͰ͖
    Δ
    

    View Slide

49. http://recruit.pixiv.net/
    

    View Slide

50. ͓͠·͍
    

    View Slide