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

53e2d354b3299d64a54af680865516d5?s=47 Sato Takeshi
February 20, 2016

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

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

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

February 20, 2016
Tweet

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஀ੜ J049DPEFͰ1JOͱ"MJHOػೳ௥Ճ J04$MBTT4J[F஀ੜʂ

  6. "VUP-BZPVUͷྺ࢙ J04ͷόʔδϣϯ্͕͕Δͨͼʹ࢖͍΍͘͢ͳΔ J04"VUP-BZPVU஀ੜ J049DPEFͰ1JOͱ"MJHOػೳ௥Ճ J04$MBTT4J[F஀ੜʂ J04 4UBDL7JFXͱ/4-BZPVU"ODIPS

  7. "VUP-BZPVUͬͯͳΜ͚ͩͬʁ 6*ͷϨΠΞ΢τʹ͍ͭͯ ੍໿Λ՝͢͜ͱͰ6*ίϯϙʔωϯτͷҐஔͱαΠζΛ ࣗಈతʹܾఆ͢Δػೳ ˣ "VUP-BZPVUΛ࢖ͬͯخ͍͜͠ͱ ɾJ1IPOF TT1MVT ͱJ1BEͷϨΠΞ΢τରԠ ɾ%ZOBNJD5ZQFରԠ

    ɹจࣈͷେ͖͞ΛϢʔβʔ͕ܾΊΒΕΔ ɾࠃࡍԽରԠ ɹӳޠͱΞϥϏΞޠͰจࣈͷํ޲ٯ
  8. 4UBDL7JFX

  9. w J04ಋೖ͞Εͨػೳ w ॎํ޲·ͨ͸ԣํ޲ʹ7JFXΛฒ΂ΒΕΔػೳ w 4UBDL7JFXͷαϒϏϡʔͱͯ͠ϏϡʔΛೖΕΕ͹ 4UBDL7JFXͷํͰࣗಈతʹϨΠΞ΢τͯ͘͠ΕΔ w ֤Ϗϡʔʹରͯ͠"VUP-BZPVUΛͦΕͧΕઃఆ͠ͳͯ͘ ΋ϨΠΞ΢τΛͯ͘͠ΕΔʂ

    4UBDL7JFX ͱͬͯ΋ָʂ
  10. 4UBDL7JFXͷ࢖͍ํ JNBHF7JFXΛ౳ִؒʹฒ΂Δ

  11. ϥΠϒϥϦʔ͔Β4UPSZCPBEʹ഑ஔ

  12. 4UBDL7JFXͷ"VUP-BZPVUΛઃఆ τοϓʹ ࠨ̌ ӈ̌

  13. ࠓճ͸4UBDL7JFXͷߴ͞Λ਌Ϗϡʔͷͷߴ͞ʹ͢Δ

  14. JNBHF7JFXΛͭஔ͘

  15. 4UBDL7JFXΛબ୒ͯ͠ "UUSJCVUFJOTQFDUPSͰ 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$FOUFSJO$POUBJOFSͰ ਨ௚ํ޲த৺ʹஔ͘ɻʢZ࣠Λܾఆʣ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH

  22. TQBDJOH7JFXͷԣ෯Λશͯಉ੍͡໿Λ͚ͭΔ TQBDJOH WJFX WJFX TQBDJOH TQBDJOH TQBDJOHΛબ୒ͯ͠ DUM TQBDJOH΁υϥο άˠʮ&RVBM8JUIETʯ

    TQBDJOHΛબ୒ͯ͠ DUM TQBDJOH΁υϥο άˠʮ&RVBM8JUIETʯ
  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