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

Auto Layout in iOS

Avatar for Sam Kirchmeier Sam Kirchmeier
September 12, 2013
Programming
160
3

Auto Layout in iOS

Introduction to Auto Layout in iOS

Avatar for Sam Kirchmeier

Sam Kirchmeier

September 12, 2013

More Decks by Sam Kirchmeier

See All by Sam Kirchmeier
Exploring Stateless UIs in Swift
Avatar for Sam Kirchmeier skirchmeier
2
970
Beyond REST: Web Services Designed for Mobile
Avatar for Sam Kirchmeier skirchmeier
2
150
Physics-Based Interfaces with UIKit Dynamics
Avatar for Sam Kirchmeier skirchmeier
0
130
Bluetooth LE, Core Bluetooth, and a Glimpse Into Your Near Future
Avatar for Sam Kirchmeier skirchmeier
0
270
Building HTML5 Tablet Apps
Avatar for Sam Kirchmeier skirchmeier
2
530
iOS Training Part 2
Avatar for Sam Kirchmeier skirchmeier
1
230
Custom iOS Controls
Avatar for Sam Kirchmeier skirchmeier
3
200

Other Decks in Programming

See All in Programming
GitHub Copilot CLIのいいところ
Avatar for tkym htkym
2
1.2k
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
390
New "Type" system on PicoRuby
Avatar for pocke pocke
1
320
プラグインで拡張される Context をtype-safe にする難しさと設計判断
Avatar for kazupon kazupon
2
440
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.3k
iOS26時代の新規アプリ開発
Avatar for 野瀬田　裕樹 yuukiw00w
0
210
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
760
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
450
Transactional Change Stream Processing With Debezium and Apache Flink
Avatar for Gunnar Morling gunnarmorling
1
140
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.2k
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
1.8k
初めてのRubyKaigiはこう見えた
Avatar for asano jellyfish700
0
300

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.5k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
HDC tutorial
Avatar for Michiel Stock michielstock
2
680
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
380
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
140
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k

Transcript

  1. Auto Layout Sam Kirchmeier @skirchmeier Adam May @yammada Friday, September

    27, 13

  2. Friday, September 27, 13

  3. Lineup Auto Layout crash course Ways to use it Demos

    & discussion Friday, September 27, 13

  4. Auto Layout Friday, September 27, 13

  5. Friday, September 27, 13

  6. Alternative to Springs & Struts Friday, September 27, 13

  7. Alternative to Springs & Struts Relationships instead of frames Friday,

    September 27, 13

  8. Alternative to Springs & Struts Relationships instead of frames Layout

    is resolved automatically Friday, September 27, 13

  9. Alternative to Springs & Struts Relationships instead of frames Layout

    is resolved automatically Magic Friday, September 27, 13

  10. Who’s used it? Friday, September 27, 13

  11. Why? Friday, September 27, 13

  12. Friday, September 27, 13

  13. Easy Friday, September 27, 13

  14. Easy Versatile Friday, September 27, 13

  15. Easy Versatile Descriptive Friday, September 27, 13

  16. Easy Versatile Descriptive Localizable Friday, September 27, 13

  17. Springs & Struts Auto Layout Friday, September 27, 13

  18. Springs & Struts Auto Layout Hard-coded Friday, September 27, 13

  19. Springs & Struts Auto Layout Hard-coded Content-driven Friday, September 27,

    13

  20. Springs & Struts Auto Layout Hard-coded Isolated Views Content-driven Friday,

    September 27, 13

  21. Springs & Struts Auto Layout Hard-coded Isolated Views Content-driven Related

    Views Friday, September 27, 13

  22. Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Content-driven

    Related Views Friday, September 27, 13

  23. Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Content-driven

    Related Views Constraints Friday, September 27, 13

  24. Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Familiar

    Content-driven Related Views Constraints Friday, September 27, 13

  25. Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Familiar

    Content-driven Related Views Constraints Scary Friday, September 27, 13

  26. Constraints Friday, September 27, 13

  27. Scary Friday, September 27, 13

  28. Scary Friday, September 27, 13

  29. Scary Friday, September 27, 13

  30. Scary attribute attribute == x multiplier + constant Friday, September

    27, 13

  31. Scary attribute attribute == x multiplier + constant Friday, September

    27, 13

  32. Scary attribute == x multiplier + constant top Friday, September

    27, 13

  33. Scary attribute == x multiplier + constant top Friday, September

    27, 13

  34. Scary attribute == x multiplier + constant top Friday, September

    27, 13

  35. Scary == x multiplier + constant top top Friday, September

    27, 13

  36. Scary == x multiplier + constant top top Friday, September

    27, 13

  37. Scary == x + constant top top 1.0 Friday, September

    27, 13

  38. Scary == + constant top top Friday, September 27, 13

  39. Scary == + top top standard Friday, September 27, 13

  40. Scary == + top top standard Friday, September 27, 13

  41. Scary == + top top standard le! le! == +

    standard Friday, September 27, 13

  42. Scary == + top top standard le! le! == +

    standard Same behavior as Springs & Struts No frame necessary Friday, September 27, 13

  43. Le! Top Baseline Width Center X Right Bottom None Height

    Center Y Friday, September 27, 13

  44. Le! Top Baseline Width Center X Right Bottom None Height

    Center Y Leading Trailing Friday, September 27, 13

  45. Scary Friday, September 27, 13

  46. !"#$ Friday, September 27, 13

  47. Unsatisfiability Friday, September 27, 13

  48. Ambiguity Friday, September 27, 13

  49. Content Hugging Compression Resistance Intrinsic Content Size Friday, September 27,

    13

  50. Priorities Friday, September 27, 13

  51. Ways to use it Interface Builder NSLayoutConstraint Visual Format Language

    Friday, September 27, 13

  52. Interface Builder Friday, September 27, 13

  53. NSLayoutConstraint Friday, September 27, 13

  54. NSLayoutConstraint + (id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)constant; Friday,

    September 27, 13

  55. [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]; == x

    1.0 + 20.0 top top Friday, September 27, 13

  56. [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]; == x

    1.0 + 20.0 top top Friday, September 27, 13

  57. [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]; == x

    1.0 + 20.0 top top Friday, September 27, 13

  58. [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]; == x

    1.0 + 20.0 top top Friday, September 27, 13

  59. [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]; == x

    1.0 + 20.0 top top Friday, September 27, 13

  60. [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]; == x

    1.0 + 20.0 top top Friday, September 27, 13

  61. Visual Format Language Friday, September 27, 13

  62. [label]-[textField] Friday, September 27, 13

  63. |-[label]-| Friday, September 27, 13

  64. V:|-(40)-[logo] Friday, September 27, 13

  65. |-(40)-[logo]-[label]-[textField(>=20)]-| Friday, September 27, 13

  66. [NSLayoutConstraint constraintsWithVisualFormat:@"|-[label]" options:0 metrics:nil views:views]; [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[label]" options:0 metrics:nil views:views];

    Friday, September 27, 13

  67. Demo Localization Friday, September 27, 13

  68. Demo Free Form Editor Friday, September 27, 13

  69. UITextView UIScrollView UIMapView Friday, September 27, 13

  70. UITextView UIScrollView UIMapView Friday, September 27, 13

  71. UIImageView UIView Friday, September 27, 13

  72. Z UIScrollView UIImageView UIScrollView contentSize Friday, September 27, 13

  73. Demo Free Form Editor Friday, September 27, 13

  74. Constraint Stacking Friday, September 27, 13

  75. UITextView UIScrollView UIMapView Image Views Friday, September 27, 13

  76. UIImageView UIImageView UIImageView Friday, September 27, 13

  77. UIImageView UIImageView ? ? Friday, September 27, 13

  78. UIImageView UIImageView UIImageView Friday, September 27, 13

  79. UIImageView UIImageView UIImageView ≥20 ≥20 ≥20 Friday, September 27, 13

  80. UIImageView UIImageView ≥20 ≥20 Friday, September 27, 13

  81. Demo Constraint Stacking Friday, September 27, 13

  82. Interface Builder Quirks Friday, September 27, 13

  83. Friday, September 27, 13

  84. Easy to accidentally delete outlets Friday, September 27, 13

  85. Easy to accidentally delete outlets Does not allow ambiguity Friday,

    September 27, 13

  86. Easy to accidentally delete outlets Does not allow ambiguity Adds

    minimum best constraints Friday, September 27, 13

  87. Easy to accidentally delete outlets Does not allow ambiguity Adds

    minimum best constraints Automatically promotes constraints Friday, September 27, 13

  88. Easy to accidentally delete outlets Does not allow ambiguity Adds

    minimum best constraints Automatically promotes constraints Automatically deletes constraints Friday, September 27, 13

  89. Interface Builder Tips Friday, September 27, 13

  90. Friday, September 27, 13

  91. Friday, September 27, 13

  92. Change to portrait/landscape/freeform Friday, September 27, 13

  93. Change to portrait/landscape/freeform Promote constraints to User Constraints Friday, September

    27, 13

  94. Change to portrait/landscape/freeform Promote constraints to User Constraints Learn to

    expect what IB will do Friday, September 27, 13

  95. Change to portrait/landscape/freeform Promote constraints to User Constraints Learn to

    expect what IB will do Size to fit content Friday, September 27, 13

  96. Change to portrait/landscape/freeform Promote constraints to User Constraints Learn to

    expect what IB will do Size to fit content Wait for Xcode 5 Friday, September 27, 13

  97. Recap Introduced Auto Layout Ways to use it Demos Friday,

    September 27, 13

  98. Discussion https://github.com/livefront/autolayout Sam Kirchmeier @skirchmeier Adam May @yammada Friday, September

    27, 13