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

Auto Layout in iOS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Sam Kirchmeier Sam Kirchmeier
September 12, 2013
Programming
3
160

Auto Layout in iOS

Introduction to Auto Layout in iOS

Avatar for Sam Kirchmeier

Sam Kirchmeier

September 12, 2013
Tweet

More Decks by Sam Kirchmeier

See All by Sam Kirchmeier
Exploring Stateless UIs in Swift
Avatar for Sam Kirchmeier skirchmeier
2
960
Beyond REST: Web Services Designed for Mobile
Avatar for Sam Kirchmeier skirchmeier
2
140
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
520
iOS Training Part 2
Avatar for Sam Kirchmeier skirchmeier
1
230
Custom iOS Controls
Avatar for Sam Kirchmeier skirchmeier
3
190

Other Decks in Programming

See All in Programming
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
0
210
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
6
570
JPUG勉強会 OSSデータベースの内部構造を理解しよう
Avatar for Atsushi Ogawa oga5
2
230
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1.1k
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
510
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
290
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
2
410
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
Avatar for yoko / Naoki Yokomachi yokomachi
1
280
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
180
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
290
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.1k

Featured

See All Featured
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
270
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
170
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
380
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
190
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
130
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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