黒魔術AutoLayoutとiPhone 6/6 Plus

Slide 1

Slide 1 text

ࠇຐज़"VUP-BZPVUͱ J1IPOF1MVT @shobyshoby

Slide 2

Slide 2 text

ࣗݾ঺հ pixivͰΞϓϦͭͬͯ͘·͢

Slide 3

Slide 3 text

ຊ୊

Slide 4

Slide 4 text

iOS 7 ࣌୅

Slide 5

Slide 5 text

Before

Slide 6

Slide 6 text

After

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

iOS 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

iPhone 6/6 Plus ൃද

Slide 11

Slide 11 text

͏Θ͋͋͋͋

Slide 12

Slide 12 text

ࠇຐज़"VUP-BZPVUͱ J1IPOF1MVT

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

֓ཁ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

"VUP-BZPVU Ξχϝʔγϣϯ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Ξχϝʔγϣϯ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

"VUP-BZPVU 6*4DSPMM7JFX

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

UIScrollView͸ AutoLayoutʹ޲͍ͯͳ͍

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Mixed Approachͱ Pure Auto Layout Approach

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

contentView scrollView contentView scrollView Mixed Approach Pure Auto Layout Approach

Slide 37

Slide 37 text

UIScrollViewͱ ԣ෯ґଘίʔυ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

2 1 3 4 pixivΞϓϦͷߏ੒

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

AutoLayout͸ ਓྨʹ͸ૣ͗ͨ͢…

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

·ͱΊ

Slide 48

Slide 48 text

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