使うっきゃない！iOS9で楽になったAuto Layout!

Swiftビギナーズ勉強会 第１３回
発表資料です。
iOS9から追加されたStackViewとAnchorsを説明しました
https://swift-beginners.doorkeeper.jp/events/37317

Transcript

1. ࢖͏͖ͬΌͳ͍ʂ
   J04Ͱָʹͳͬͨ
   "VUP
   -BZPVU ೥݄೔
   ࠤ౻߶࢜
2. ࣗݾ঺հ ʲ໊લʳ
   ࠤ౻߶࢜
   ʲ͓࢓ࣄʳ
   લ͸डୗ*5اۀͰΠϯϑϥͷอकӡ༻ۀ຿
   ࠓ͸༗ݶձࣾΧΠΧΠͰJ04ΞϓϦ࡞੒
   ʲͰ͖Δ͜ͱʳ
   SVCZ J04 BQBUDI MJOVY αʔόʔपΓʣ 5XJMJP
   8FCϑϩϯτ
   ʲϦϦʔεΞϓϦʳ
   :VNF)PTIJ
   
   -JMMZ#MPDLFS
   ޿ࠂϒϩοΫͰαΫαΫշద4BGBSJʹʂ
3. J04։ൃͷே׆͍ͯ͠·͢ CFF[ϓϩάϥϛϯάษڧձ
   IUUQTXXXGBDFCPPLDPNHSPVQT
   ຖि໦༵೔ʙిݯΧϑΣCFF[ौ୩ళ
   ৄղ4XJGUվఆ൛ಡॻษڧձ
   IUUQTXXXGBDFCPPLDPNHSPVQT
   ຖि೔༵೔ʙిݯΧϑΣCFF[ौ୩ళ
4. J04ʹͳΓ
   "VUP
   -BZPVU΋
   ͞ΒʹڧԽ͞Ε·ͨ͠
5. "VUP
   -BZPVUͷྺ࢙ J04ͷόʔδϣϯ্͕͕Δͨͼʹ࢖͍΍͘͢ͳΔ
   J04
   
   "VUP
   -BZPVU஀ੜ
   J04
   
   9DPEFͰ1JOͱ"MJHOػೳ௥Ճ
   J04
   
   $MBTT
   4J[F஀ੜʂ
   
6. "VUP
   -BZPVUͷྺ࢙ J04ͷόʔδϣϯ্͕͕Δͨͼʹ࢖͍΍͘͢ͳΔ
   J04
   
   "VUP
   -BZPVU஀ੜ
   J04
   
   9DPEFͰ1JOͱ"MJHOػೳ௥Ճ
   J04
   
   $MBTT
   4J[F஀ੜʂ
   J04
   
   4UBDL7JFX
   ͱ
   
   /4-BZPVU"ODIPS
   
7. "VUP
   -BZPVUͬͯͳΜ͚ͩͬʁ 6*ͷϨΠΞ΢τʹ͍ͭͯ
   ੍໿Λ՝͢͜ͱͰ6*ίϯϙʔωϯτͷҐஔͱαΠζΛ ࣗಈతʹܾఆ͢Δػೳ
   ˣ
   "VUP
   -BZPVUΛ࢖ͬͯخ͍͜͠ͱ
   ɾJ1IPOF T
   
   T1MVT ͱJ1BEͷϨΠΞ΢τରԠ
   ɾ%ZOBNJD
   5ZQFରԠ
   ɹจࣈͷେ͖͞ΛϢʔβʔ͕ܾΊΒΕΔ
   ɾࠃࡍԽରԠ
   ɹӳޠͱΞϥϏΞޠͰจࣈͷํ޲ٯ
8. 4UBDL7JFX
9. w J04
   
   ಋೖ͞Εͨػೳ
   w ॎํ޲·ͨ͸ԣํ޲ʹ7JFXΛฒ΂ΒΕΔػೳ
   w 4UBDL7JFXͷαϒϏϡʔͱͯ͠ϏϡʔΛೖΕΕ͹ 4UBDL7JFXͷํͰࣗಈతʹϨΠΞ΢τͯ͘͠ΕΔ
   w ֤Ϗϡʔʹରͯ͠"VUP-BZPVUΛͦΕͧΕઃఆ͠ͳͯ͘ ΋ϨΠΞ΢τΛͯ͘͠ΕΔʂ 4UBDL
   7JFX ͱͬͯ΋ָʂ
10. 4UBDL7JFXͷ࢖͍ํ
    JNBHF7JFXΛ౳ִؒʹฒ΂Δ
11. ϥΠϒϥϦʔ͔Β4UPSZCPBEʹ഑ஔ
12. 4UBDL7JFXͷ"VUP-BZPVUΛઃఆ
    τοϓʹ
    ࠨ̌
    ӈ̌
13. ࠓճ͸4UBDL7JFXͷߴ͞Λ਌Ϗϡʔͷͷߴ͞ʹ͢Δ
14. JNBHF7JFXΛͭஔ͘
15. 4UBDL7JFXΛબ୒ͯ͠
    "UUSJCVUF
    JOTQFDUPSͰ
    EJTUSJCVUJPOΛ'JMM
    &RVBMMZʹมߋ
    JNBHF7JFX͕౳ִؒʹฒͿ
16. 4UBDL7JFXͷೖΕࢠ
17. 6*ίϯϙʔωϯτΛબ ୒ͨ͠ঢ়ଶͰ4UBDL7JFX ϘλϯΛΫϦοΫ͢Δ ͱɺબ୒ͨ͠7JFXΛ಺ แͨ͠4UBDL7JFXΛ࡞ ੒Ͱ͖Δ
18. ೖΕࢠΛ૊Έ߹ΘͤΔ ͜ͱͰɺ͢͜͠ෳࡶͳ ϨΠΞ΢τ΋Ͱ͖Δ
    ࠨਤ͸ਨ௚4UBDL7JFX ͷதʹਫฏ4UBDL7JFX ΛೖΕࢠʹͨ͠΋ͷ ਨ௚4UBDL7JFX ਫฏ4UBDL7JFX
19. ͪͳΈʹɻɻɻ
    J04·ͰͷWJFXΛ౳ִؒʹฒ΂Δํ๏
20. ౳ִؒʹฒ΂͍ͨ7JFXʢWJFX WJFX ͱͦΕΑΓ΋ ̍ͭଟ͍εϖʔεௐ੔ͷWJFX TQBDJOH   Λ༻ҙ͢ Δ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH
21. ࠓճ͸ͭͷWJFXΛ7FSUJDBM
    $FOUFS
    JO
    $POUBJOFSͰ ਨ௚ํ޲த৺ʹஔ͘ɻʢZ࣠Λܾఆʣ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH
22. TQBDJOH7JFXͷԣ෯Λશͯಉ੍͡໿Λ͚ͭΔ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH TQBDJOHΛબ୒ͯ͠ DUM TQBDJOH΁υϥο άˠʮ&RVBM
    8JUIETʯ
    TQBDJOHΛબ୒ͯ͠ DUM TQBDJOH΁υϥο άˠʮ&RVBM
    8JUIETʯ
23. 7JFX 7JFXͷ8)ΛܾΊΔ
    ˠࠓճ͸8JEUIɺ)FJHIU TQBDJOH WJFX WJFX TQBDJOH TQBDJOH
24. ֤WJFXͷྡ௨͠ͷִؒͷ੍໿Λ͚͍ͭͯ͘ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH ᶃ ᶃTQBDJOHͱ TVQFS7JFXͷִؒͷ੍ ໿Λ௥Ճ ᶃͷ݁Ռˣ
25. ֤WJFXͷྡ௨͠ͷִؒͷ੍໿Λ͚͍ͭͯ͘ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH ᶄ ᶄTQBDJOHͱWJFXͷ ִؒͷ੍໿Λ௥Ճ ᶄͷ݁Ռˣ
26. ֤WJFXͷྡ௨͠ͷִؒͷ੍໿Λ͚͍ͭͯ͘ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH ᶅ ᶅWJFXͱTQBDJOHͷ ִؒͷ੍໿Λ௥Ճ ᶅͷ݁Ռˣ
27. ֤WJFXͷྡ௨͠ͷִؒͷ੍໿Λ͚͍ͭͯ͘ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH ᶆ ᶆTQBDJOHͱWJFXͷ ִؒͷ੍໿Λ௥Ճ ᶆͷ݁Ռˣ
28. ֤WJFXͷྡ௨͠ͷִؒͷ੍໿Λ͚͍ͭͯ͘ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH ᶇ ᶇWJFXͱTQBDJOHͷ ִؒͷ੍໿Λ௥Ճ ᶇͷ݁Ռˣ
29. ֤WJFXͷྡ௨͠ͷִؒͷ੍໿Λ͚͍ͭͯ͘ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH ᶈ ᶈTQBDJOHͱ TVQFS7JFXͷִؒͷ੍ ໿Λ௥Ճ ᶈͷ݁Ռˣ
30. TQBDJOHʹ਌ϏϡʔͱͷԼ޲͖ͷ੍໿Λ௥Ճ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH
31. TQBDJOH TQBDJOH TQBDJOHΛબ୒
    5PQ
    &EHFTͷ੍໿Λ௥Ճ
    ˠ࣮ફͰ࢖͏৔߹͸TQBDJOHͷഎܠΛಁ໌ʹ͍ͯͩ͘͠͞ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH
32. ͜ͷ޻ఔ͕J04͔Β͸͍Βͳ͘ͳͬͨʂ
33. -BZPVU
    "ODIPST
34. "VUP
    -BZPVUͷݪଇ SFE7JFX ZFMMPX7JFX  SFE7JFX-FBEJOH
    
    
    º
    #MVF7JFXUSBJMJOH
    
     *UFN "UUSJCVUF *UFN "UUSJCVUF $POTUBOU 3FMBUJPOTIJQ .VMUJQMJFS Ұ੍ͭ໿࡞Δͷʹͭͷཁૉඞཁ
35. 
    /4-BZPVU"ODIPSΫϥε௥Ճʂ redView.leadingAnchor.constraintEqualToAnchor(yellowV iew.trailingAnchor,constant: 8).active = true *UFN
     SFE7JFX "UUSJCVUF
     MFBEJOH"ODIPS 3FMBUJPOTIJQ DPOTUSBJOU&RVBM5P"ODIPS .VMUJQMJFS ͳ͠ʢσϑΥϧτ *UFN
     ZFMMPX7JFX "UUSJCVUF
     USBJMJOH"ODIPS $POTUBOU  ϓϩύςΟͰ੍໿ΛઃఆͰ͖Δʂ
36. /4-BZPVU"ODIPSͷ͍͍ͱ͜Ζ w ܕͷ҆શੑɺอূ͕Α͍
    w هड़͕͠΍͍͢
    w ίʔυ͕ಡΈ΍͍͢
37. ࠓ·Ͱͷ"VUP
    -BZPVU࡞੒ίʔυ w /4-BZPVU$POTUSBJOU
    Ϋϥε
    w "VUP
    -BZPVUʹඞཁͳཁૉΛҾ਺Ͱઃఆ
    w Θ͔Γ΍͍͕͢ίʔυྔ͕͓͓͍
    w 7JTVBM
    'PSNBU
    -BOHVBHF
    w 7JTVBM
    'PSNBU
    -BOHVBHFͱ͍͏੍໿ઃఆͷه๏Λ࢖ ͍ઃఆ
    w ෳ਺ͷ੍໿Λ͍͖ͬʹઃఆͰ͖Δ
    w จࣈྻͰઃఆ͢ΔͷͰෆਖ਼ͳه๏Λॻ͍ͨ࣌ʹ෼͔Δ ͷ͸࣮ߦ࣌ͷΈ
    w தԝἧ͑ͱ͔ɺϚʔδϯઃఆͷํ๏͕Θ͔Γʹ͍͘
38. /4-BZPVU$POTUSBJOU
    Ϋϥε let redViewLeadingConstraint = NSLayoutConstraint(item: redView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: yellowView, attribute: NSLayoutAttribute.Trailing, multiplier: 1.0, constant: 8) self.view.addConstraint(redViewLeadingConstraint)
39. 7JTVBM
    'PSNBU
    -BOHVBHF let views = [ "redView" : redView, "yellowView" : yellowView ] let redViewHorizonConstrains = NSLayoutConstraint.constraintsWithVisualFormat(" H:|-[yellowView]-8-[redView]-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views) self.view.addConstraint(redViewHorizonConstrains )
40. σϞ w ԼͷϨΠΞ΢τΛͭͷॻ͖ํͰΈͯΈ·͢ʂ SFE7JFX ZFMMPX7JFX ਌Ϗϡʔ       SFE7JFX
    ͸਌Ϗϡʔͷ
    ෯
    ͷେ͖͞ SFE7JFXͱ
    ZFMMPX7JFX
    ͸ಉ͡
    େ͖͞
41. αϯϓϧίʔυ IUUQTHJUIVCDPN4BUP5BLFTIJ9"VUP-BZPVUJOJPT
42. ࢀߟ63- J04
    Ͱ௥Ճ͞Εͨ/4-BZPVU"ODIPS࢖͏ͱ؆ܿʹΘ͔Γ΍ؒ͘͢ҧ ͑ͣʹ/4-BZPVU$POTUSBJOUʢ੍໿ʣ͕࡞Ε·͢ʲ"VUP
    -BZPVUʳ
    IUUQRJJUBDPNZVDPWJOJUFNTCFCDDBCCD
    "VUP
    -BZPVU
    (VJEF
    IUUQTEFWFMPQFSBQQMFDPNMJCSBSZJPTEPDVNFOUBUJPO 6TFS&YQFSJFODF$PODFQUVBM"VUPMBZPVU1( 1SPHSBNNBUJDBMMZ$SFBUJOH$POTUSBJOUTIUNMBQQMF@SFGEPD VJE51$)48