とっさのAutoLayout - Rewind autolayout

札幌iPhoneアプリ開発懇談会2024年2月勉強会資料

iOSアプリ開発でUIレイアウトを調整するためにAppleが提供しているのがAutoLayoutです。SwiftUIの登場で注目度は低くなり、かつUIのレイアウトを扱う頻度で言うと多くはなく、いざAutoLayoutの使用を迫られた時に忘れがちな使用パターンを説明します。

Transcript

1. ͱͬ͞ͷ"VUP-BZPVU 3FXJOE
   BVUPMBZPVU ೳొ
   ཁ !OPUPSPJE
   
   J1IPOFΞϓϦ։ൃऀ
   ೥݄೔
2. ࿩͢಺༰ w "VUP-BZPVU֓આ
   w "VUP-BZPVUͷΞοϓσʔτ
3. ࿩͞ͳ͍಺༰ w "VUPMBZPVU
   QSJPSJUZ
   w ϓϩάϥϛϯά͚ͩͰͷϨΠΞ΢τهड़ํ๏
4. ͓୊໨ w "VUPMBZPVU֓આ
   w 88%$ͰͷΞοϓσʔτ
   w "VUPMBZPVU
   TIPXDBTF
5. ࣗݾ঺հ w J1IPOFΞϓϦ։ൃऀ
   9
   !OPUPSPJE
   w ΞϓϦ։ൃऀྺ ʙ
   w ΞϓϦ࡞࢛ͬͯ൒ੈل ೥౸ୡ
   w झຯ͸ήʔϜ ൓ࣹਆܦ͕ਰ͑ͱ໨ͷർΕ͕ൈ͚ͳ͍
6. "VUP-BZPVU֓આ
7. "VUP-BZPVU֓આ "VUP4J[JOH ʙ w J1IPOF։ൃ౰ॳ  ͷը໘ϨΠΞ΢τ
   w 04ᶠ NBD04 ͔Β։ൃࢿ࢈ΛҾ͖ܧ͗ɺ(6*࡞੒πʔϧ *OUFSGBDF
   #VJMEFS Ͱ(6*ϨΠΞ΢τΛ࡞੒͢Δ͜ͱ͕Ͱ͖ͨɻ(6*Ϧιʔε͚ͩͰͳ ͘ϓϩάϥϛϯάίʔυͰϨΠΞ΢τΛࢦఆ͢Δ͜ͱ͕Ͱ͖ͨɻ
8. "VUP-BZPVU֓આ "VUP4J[JOH ʙ ᶃ਌7JFX΍લޙͷ7JFXͷؒ ִΛݻఆ͢Δ͔ ᶄ7JFXࣗମ͕৳௕͢Δ͔
9. "VUP-BZPVU֓આ "VUP4J[JOH ʙ ᶃ਌7JFX΍લޙͷ7JFXͷؒ ִΛݻఆ͢Δ͔ ᶄ7JFXࣗମ͕ਐḿ͢Δ͔ ΢Οϯυ΢֊૚ͱಉ֊૚ͷ΢Οϯυ΢ͷॱ൪͚ͩߟྀ͢Δ͚ͩͰྑ͍ɻ؆୯ʂ
10. "VUP-BZPVU֓આ "VUP4J[JOH͔Β ʙ "VUP4J[JOHʹ͸σϝϦοτ΋ʜ 04͕ϨΠΞ΢τͷมߋΛՃ͑ΒΕΔͷ͸ॎ ԣൺ཰ͷมߋΛ఻͑Δ͙Β͍͔͠Ͱ͖ͳ͍ɻ
    J1IPOFͷ্෦ηϯαʔ΍Լ෦ͷ)PNF
    *OEJDBUPS
    ͷྖҬ͸J1IPOFػछ͝ͱʹҟͳ Δ͕6*ϨΠΞ΢τ͸ͭʹ·ͱΊ͍ͨɻ
    "VUP4J[JOH͸جຊ਌7JFXͱ ಉ֊૚7JFXͱͷؔ܎ੑʹݶ ఆ͞ΕΔ ෳࡶͳ6*ϨΠΞ΢ τ͸ෳࡶͳ֊૚ߏ ଄Ͱදݱ͞Ε͕ͪ
11. "VUP-BZPVU֓આ "VUP-BZPVUͷొ৔ ʙ w ϨΠΞ΢τΛೋ࣍ํఔࣜͰࢦఆ͢Δ
    w 6*σβΠϯͰ΋ϓϩάϥϜͰ΋هड़Ͱ͖Δͷ͸ೋ࣍ํఔࣜ
    w σβΠϯஈ֊Ͱ੔߹ੑͷνΣοΫ͕ߦΘΕΔ
    w ϨΠΞ΢τ͸7JFXͷ֊૚ߏ଄ಉ֊૚ͷ7JFXҎ֎͔Β΋఻೻͞ΕΔ
    w ϨΠΞ΢τࢦఆ͸ݸผʹ0O0 ff Մೳ
    w ԾͷϨΠΞ΢τ΍ॎԣൺͷมԽͰͷ੾Γସ͑
12. "VUP-BZPVU֓આ "VUP-BZPVUͷొ৔ ʙ 4UPSZCPBSEɺ9JCͰ6*σβΠϯΛ ֬ೝͭͭ͠"VUP-BZPVUͰ੍ݶ $POTUSBJOU Λઃఆ͍ͯ͘͠ɻ
    "VUP4J[JOHͱҧͬͯ"VUP-BZPVU ͸༩͑Δύϥϝʔλʔ΍ཁૉ͕ଟ͍ ͷͰࢹೝ͠ͳ͕Β࡞ۀͰ͖Δɻ
13. "VUP-BZPVU֓આ "VUP-BZPVUͷొ৔ ʙ ΞΠςϜ ͭͳ͍ͭ͠ͷ ؔ܎ੑ ఆ਺ ৐ࢉ ༗ޮແޮ ԾͷϨΠΞ΢τࢦఆ
14. "VUP-BZPVU֓આ "ODIPSͷొ৔ ʙ w /4-BZPVU$POTUSBJOU
    Λϓϩάϥϛϯά ίʔυͰऔΓѻ͏ʹ͸ɺύϥϝʔλʔ͕ ଟ͘൥ࡶɺ6*σβΠϯͷΑ͏ʹࢼߦࡨޡ ճ਺͕ݶΒΕͯ͠·͏ɻ
    w /4-BZPVU$POTUSBJOU
    ͷ੍໿͸਺͕ଟ͘ ͳΔͷͰ൥ࡶͳίʔυΛෳ਺هड़͢Δ͜ ͱʹͳΔ
15. "VUP-BZPVU֓આ "ODIPSͷొ৔ ʙ ᶃ/4-BZPVU$POTUSBJOUΛఆٛ ᶄ੍໿Λ͚ͭΔΞΠςϜ ᶅର৅Λ͚ͭΔΞΠςϜͷଐੑ ᶆ੍໿Λ͚ͭΔΞΠςϜ ᶇ੍໿Λ͚ͭΔର৅ ᶈର৅Λ͚ͭΔΞΠςϜͷଐੑ ᶉ৐ࢉ ᶊఆ਺ ᶋ੍໿Λ7JFXʹઃఆ ͭͷ7JFXͷ෯ΛಉҰͱ͢Δྫ
16. "VUP-BZPVU֓આ "ODIPSͷొ৔ ʙ ᶃ/4-BZPVU$POTUSBJOUΛఆٛ ᶄ੍໿Λ͚ͭΔΞΠςϜ ᶅର৅Λ͚ͭΔΞΠςϜͷଐੑ ᶆΞΠςϜؒͷؔ࿈ੑ ᶇ੍໿Λ͚ͭΔΞΠςϜ ᶈର৅Λ͚ͭΔΞΠςϜͷଐੑ ᶉ৐ࢉ ᶊఆ਺ ᶋ੍໿Λ7JFXʹઃఆ ͭͷ7JFXͷ෯ΛಉҰͱ͢Δྫ
17. "VUP-BZPVU֓આ "ODIPSͷొ৔ ʙ /4-BZPVU$POTUSBJOU࢖༻ /4-BZPVU"ODIPS࢖༻ ͭͷ7JFXͷ෯ΛಉҰͱ͢Δྫ
18. "VUP-BZPVU֓આ "ODIPSͷొ৔ ʙ w /4-BZPVU"ODIPS
    ͸/4-BZPVU$POTUSBJOU
    Λ࢖͍΍͍͢Α͏ʹ͢ΔͨΊ ͷϢʔςΟϦςΟϦςΟѻ͍ɻ಺෦తʹ͸/4-BZPVU$POTUSBJOU͕ઃఆ͞Ε ͍ͯΔɻ
19. 88%$ͰͷΞοϓσʔτ
20. ΩʔϘʔυपΓͷߋ৽ w 6*,FZCPBSE-BZPVU(VJEF ΩʔϘʔυ ͷදࣔඇදࣔ޲͚ΨΠυ ʹϓϩύςΟ ௥Ճ
    w VTFT#PUUPN4BGF"SFB
    w ΩʔϘʔυԼ෦ϨΠΞ΢τҐஔͷઃ ఆ
    w LFZCPBSE%JTNJTT1BEEJOH
    w ΩʔϘʔυͷσΟεϛε։࢝Ґஔͷ ௐ੔ 88%$Ξοϓσʔτ
21. ΩʔϘʔυपΓͷߋ৽
    
    VTFT#PUUPN4BGF"SFB w VTFT#PUUPN4BGF"SFB
    w ΩʔϘʔυϨΠΞ΢τͷԼ෦ Λ4BGF"SFB
    ͷԼʹ഑ஔ͢Δ ͔
    w ΩʔϘʔυԼͷഎܠWJFXΛ 4BGF"SFB
    Լ·ͰΧόʔ͢Δͳ Ͳʹ࢖͑Δ 88%$Ξοϓσʔτ
22. "VUPMBZPVU
    TIPXDBTF
23. "VUPMBZPVU
    TIPXDBTF ࣮ࡍʹ"VUPMBZPVUΛهड़ͯ͠ΈΔ w 4DSPMM7JFXɺ7FSUJDBM
    4UBDL7JFXΛ࢖ͬͯεΫϩʔϧՄೳͳίϯςϯπΛ࡞ ੒͢Δ
    w 9JCϑΝΠϧΛಡΈࠐΜͰը໘্ʹύʔπΛ௥Ճ͢Δ
    w ΩʔϘʔυϨΠΞ΢τ 88%$
    w 6*5BCMF7JFXͷΧελϜϔομʔΛ࡞੒͢Δ
24. "VUPMBZPVU
    TIPXDBTF ϢʔςΟϦςΟίʔυͷ঺հᶃ import Foundation // Ϋϥε໊ͷαϙʔτ protocol WithClassName: NSObject { } extension WithClassName { static var className: String { NSStringFromClass(Self.self).components(separatedBy: ".").last ?? "" } } Ϋϥε໊Λࣝผ༻*%΍9JCϑΝΠϧ໊ʹ࢖͏ͨΊ
25. "VUPMBZPVU
    TIPXDBTF ϢʔςΟϦςΟίʔυͷ঺հᶄ import UIKit // XibϑΝΠϧ͔ΒViewΛΠϯελϯεԽ(generic࢖༻) extension UINib { func instantiate<T: UIView>() -> T { instantiate(withOwner: nil, options: nil)[0] as? T ?? T() } } 9JCϑΝΠϧ͔Β7JFXΛϩʔυ͢Δ
26. "VUPMBZPVU
    TIPXDBTF ϢʔςΟϦςΟίʔυͷ঺հᶅ import UIKit // [Ϋϥε໊].xib͔ΒcontentViewΛϩʔυ͢Δ protocol WithNibLoad: UIView, WithClassName { var contentView: UIView! { get } } extension WithNibLoad { func loadContentView(){ let nib = UINib(nibName: Self.className, bundle: nil) nib.instantiate(withOwner: self, options: nil) addSubview(contentView) contentView.translatesAutoresizingMaskIntoConstraints = false contentView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true contentView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true contentView.topAnchor.constraint(equalTo: topAnchor).isActive = true contentView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true } }
27. "VUPMBZPVU
    TIPXDBTF σϞ
    
    4UBDL7JFXΛ࢖ͬͨॎʹεΫϩʔϧͰ͖Δը໘Λ࡞੒ w 4DSPMM7JFXɺ7FSUJDBM
    4UBDL7JFXΛ࢖ͬͯεΫϩʔϧՄೳͳίϯςϯπΛ࡞ ੒͢Δ
    w 9JCϑΝΠϧΛಡΈࠐΜͰը໘্ʹύʔπΛ௥Ճ͢Δ
    w ΩʔϘʔυϨΠΞ΢τ 88%$
    w 6*5BCMF7JFXͷΧελϜϔομʔΛ࡞੒͢Δ
28. "VUPMBZPVU
    TIPXDBTF 6*5BCMF7JFXͷ)FBEFS7JFXʹ"VUPMBZPVU͸࢖͑Δ HJUIVCDPNOPUPSPJE5BCMF7JFX5FTUCFE w 5BCMF7JFXͷςετͷͨΊͷςετϕουΛ͝༻ҙ
29. "VUPMBZPVU
    TIPXDBTF 6*5BCMF7JFXͷ)FBEFS7JFXʹ"VUPMBZPVU͸࢖͑Δ w ࢖͑Δ
    w 6*5BCMF7JFXͷ)FBEFS7JFX͸UBCMF7*FXʹ૊Έࠐ·ΕΔલ·Ͱ"VUP-BZPVU Ͱ෯ߴ͞Λଞͷ7JFX͔ΒಘΔ͜ͱ͕Ͱ͖ͳ͍ ֊૚ΤϥʔͱͳΔ
    w )FBEFS7JFX
    ʹ͢Δ7JFXࣗମ͸"VUP4J[JOHΛ༗ޮԽ͢Δ
    w 6*7JFXTZTUFN-BZPVU4J[F'JUUJOH Λ࢖͏ͱ)FBEFS7JFXͷ"VUPMBZPVU৘ ใʹج͍ͮͯαΠζΛࢉग़Մೳ
    w 6*5BCMF7JFX)FBEFS'PPUFS7JFX
    Λ࢖͏ํ͕ਖ਼͍͠
30. "VUPMBZPVU
    TIPXDBTF 6*5BCMF7JFXͷ)FBEFS7JFXʹ"VUPMBZPVU͸࢖͑Δ func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { let patternBView = PatternBView() patternBView.label.text = """ ϔομʔʹ௕จͷλΠτϧΛ෇Ճ͠·͢ɻ վߦ΋ڐՄ͠·͢ɻ """ patternBView.translatesAutoresizingMaskIntoConstraints = true patternBView.autoresizingMask = [.flexibleWidth, .flexibleHeight] patternBView.frame.size = patternBView.systemLayoutSizeFitting( CGSize(width: tableView.frame.width, height: CGFloat.greatestFiniteMagnitude), withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel ) return patternBView }
31. ·ͱΊ w"VUPMBZPVU͕ొ৔ͨ͠ཧ༝ʹ͍ͭͯ࿩͠·ͨ͠
    w88%$Ͱͷ"VUP-BZPVUʹ఺΄ͲΞοϓσʔτ͕͋Γ·ͨ͠
    w࣮ࡍʹ"VUPMBZPVUΛهड़ͯ͠Έ·ͨ͠
32. ࢀߟ w 9*#͔Β7JFXΛੜ੒͢Δͭͷ࣮૷ύλʔϯ
    w IUUQTRJJUBDPNNBSUZTV[VLJJUFNT DFDEDCGDC
    w 6*5BCMF7JFXͰΧελϚΠζϔομʔΛ࢖͏
    
    ͘·T
    5FDIܥ#MPH
    w IUUQTLVNBTLVOIBUFOBCMPHDPN FOUSZ
    w J04ͰͷΩʔϘʔυ࢓༷มߋ৽ػೳ
    
    Ϣ χϑΝ։ൃऀϒϩά
    w IUUQTUFDIVOJGBFDPNFOUSZ JPT@LFZCPBSE
    w OPUPSPJE5BCMF7JFX5FTUCFE
    5BCMF7JFX5FTUCFE
    GPS
    J04
    BQQ
    w IUUQTHJUIVCDPNOPUPSPJE 5BCMF7JFX5FTUCFE
    w JQIPOF
    
    *T
    JU
    QPTTJCMF
    UP
    VTF
    "VUP-BZPVU
    XJUI
    6*5BCMF7JFXT
    UBCMF)FBEFS7JFX
    
    4UBDL
    0WFS fl PX
    w IUUQTTUBDLPWFS fl PXDPNRVFTUJPOT JTJUQPTTJCMFUPVTF BVUPMBZPVUXJUIVJUBCMFWJFXT UBCMFIFBEFSWJFX