$30 off During Our Annual Pro Sale. View Details »

Auto Layout in iOS

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

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
720
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
120
Bluetooth LE, Core Bluetooth, and a Glimpse Into Your Near Future
Avatar for Sam Kirchmeier skirchmeier
0
260
Building HTML5 Tablet Apps
Avatar for Sam Kirchmeier skirchmeier
2
520
iOS Training Part 2
Avatar for Sam Kirchmeier skirchmeier
1
220
Custom iOS Controls
Avatar for Sam Kirchmeier skirchmeier
3
190

Other Decks in Programming

See All in Programming
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
220
20251127_ぼっちのための懇親会対策会議
Avatar for kokamoto01 kokamoto01_metaps
2
430
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
130
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
3k
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
380
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
1.3k
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
1
360
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
1
300
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
400
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
Avatar for Shogo Fukami shogo4131
8
2.3k
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
130
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
26
22k

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
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