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

黒魔術AutoLayoutとiPhone 6/6 Plus

shoby
October 03, 2014

黒魔術AutoLayoutとiPhone 6/6 Plus

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

shoby

October 03, 2014
Tweet

More Decks by shoby

Other Decks in Technology

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