Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Auto Layout in iOS

Avatar for Sam Kirchmeier Sam Kirchmeier
September 12, 2013
Programming
180
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
1k
Beyond REST: Web Services Designed for Mobile
Avatar for Sam Kirchmeier skirchmeier
2
160
Physics-Based Interfaces with UIKit Dynamics
Avatar for Sam Kirchmeier skirchmeier
0
140
Bluetooth LE, Core Bluetooth, and a Glimpse Into Your Near Future
Avatar for Sam Kirchmeier skirchmeier
0
290
Building HTML5 Tablet Apps
Avatar for Sam Kirchmeier skirchmeier
2
540
iOS Training Part 2
Avatar for Sam Kirchmeier skirchmeier
1
240
Custom iOS Controls
Avatar for Sam Kirchmeier skirchmeier
3
200

Other Decks in Programming

See All in Programming
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
380
一人だけ、Kiroが静止する日
Avatar for Hideyuki Nagata hideg
0
120
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
150
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
150
Jetpack Compose メカニズム
Avatar for Jaewoong skydoves
0
450
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
550
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
4
2.8k
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.4k
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
560
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
170
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
820
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
440

Featured

See All Featured
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
57k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
280
Designing for Performance
Avatar for Lara Hogan lara
611
70k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k

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