Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Auto Layout in iOS
Search
Sam Kirchmeier
September 12, 2013
Programming
3
150
Auto Layout in iOS
Introduction to Auto Layout in iOS
Sam Kirchmeier
September 12, 2013
Tweet
Share
More Decks by Sam Kirchmeier
See All by Sam Kirchmeier
Exploring Stateless UIs in Swift
skirchmeier
2
670
Beyond REST: Web Services Designed for Mobile
skirchmeier
2
130
Physics-Based Interfaces with UIKit Dynamics
skirchmeier
0
110
Bluetooth LE, Core Bluetooth, and a Glimpse Into Your Near Future
skirchmeier
0
260
Building HTML5 Tablet Apps
skirchmeier
2
510
iOS Training Part 2
skirchmeier
1
210
Custom iOS Controls
skirchmeier
3
190
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
480
Jakarta EE Meets AI
ivargrimstad
0
200
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
Hack Claude Code with Claude Code
choplin
8
2.7k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
110
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
210
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
670
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
680
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
1
110
コーディングエージェント概観(2025/07)
itsuki_t88
0
120
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.8k
Bash Introduction
62gerente
613
210k
Six Lessons from altMBA
skipperchong
28
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
How to Ace a Technical Interview
jacobian
278
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Scaling GitHub
holman
461
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
Auto Layout Sam Kirchmeier @skirchmeier Adam May @yammada Friday, September
27, 13
Friday, September 27, 13
Lineup Auto Layout crash course Ways to use it Demos
& discussion Friday, September 27, 13
Auto Layout Friday, September 27, 13
Friday, September 27, 13
Alternative to Springs & Struts Friday, September 27, 13
Alternative to Springs & Struts Relationships instead of frames Friday,
September 27, 13
Alternative to Springs & Struts Relationships instead of frames Layout
is resolved automatically Friday, September 27, 13
Alternative to Springs & Struts Relationships instead of frames Layout
is resolved automatically Magic Friday, September 27, 13
Who’s used it? Friday, September 27, 13
Why? Friday, September 27, 13
Friday, September 27, 13
Easy Friday, September 27, 13
Easy Versatile Friday, September 27, 13
Easy Versatile Descriptive Friday, September 27, 13
Easy Versatile Descriptive Localizable Friday, September 27, 13
Springs & Struts Auto Layout Friday, September 27, 13
Springs & Struts Auto Layout Hard-coded Friday, September 27, 13
Springs & Struts Auto Layout Hard-coded Content-driven Friday, September 27,
13
Springs & Struts Auto Layout Hard-coded Isolated Views Content-driven Friday,
September 27, 13
Springs & Struts Auto Layout Hard-coded Isolated Views Content-driven Related
Views Friday, September 27, 13
Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Content-driven
Related Views Friday, September 27, 13
Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Content-driven
Related Views Constraints Friday, September 27, 13
Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Familiar
Content-driven Related Views Constraints Friday, September 27, 13
Springs & Struts Auto Layout Hard-coded Isolated Views autoResizingMask Familiar
Content-driven Related Views Constraints Scary Friday, September 27, 13
Constraints Friday, September 27, 13
Scary Friday, September 27, 13
Scary Friday, September 27, 13
Scary Friday, September 27, 13
Scary attribute attribute == x multiplier + constant Friday, September
27, 13
Scary attribute attribute == x multiplier + constant Friday, September
27, 13
Scary attribute == x multiplier + constant top Friday, September
27, 13
Scary attribute == x multiplier + constant top Friday, September
27, 13
Scary attribute == x multiplier + constant top Friday, September
27, 13
Scary == x multiplier + constant top top Friday, September
27, 13
Scary == x multiplier + constant top top Friday, September
27, 13
Scary == x + constant top top 1.0 Friday, September
27, 13
Scary == + constant top top Friday, September 27, 13
Scary == + top top standard Friday, September 27, 13
Scary == + top top standard Friday, September 27, 13
Scary == + top top standard le! le! == +
standard Friday, September 27, 13
Scary == + top top standard le! le! == +
standard Same behavior as Springs & Struts No frame necessary Friday, September 27, 13
Le! Top Baseline Width Center X Right Bottom None Height
Center Y Friday, September 27, 13
Le! Top Baseline Width Center X Right Bottom None Height
Center Y Leading Trailing Friday, September 27, 13
Scary Friday, September 27, 13
!"#$ Friday, September 27, 13
Unsatisfiability Friday, September 27, 13
Ambiguity Friday, September 27, 13
Content Hugging Compression Resistance Intrinsic Content Size Friday, September 27,
13
Priorities Friday, September 27, 13
Ways to use it Interface Builder NSLayoutConstraint Visual Format Language
Friday, September 27, 13
Interface Builder Friday, September 27, 13
NSLayoutConstraint Friday, September 27, 13
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
[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
[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
[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
[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
[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
[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
Visual Format Language Friday, September 27, 13
[label]-[textField] Friday, September 27, 13
|-[label]-| Friday, September 27, 13
V:|-(40)-[logo] Friday, September 27, 13
|-(40)-[logo]-[label]-[textField(>=20)]-| Friday, September 27, 13
[NSLayoutConstraint constraintsWithVisualFormat:@"|-[label]" options:0 metrics:nil views:views]; [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[label]" options:0 metrics:nil views:views];
Friday, September 27, 13
Demo Localization Friday, September 27, 13
Demo Free Form Editor Friday, September 27, 13
UITextView UIScrollView UIMapView Friday, September 27, 13
UITextView UIScrollView UIMapView Friday, September 27, 13
UIImageView UIView Friday, September 27, 13
Z UIScrollView UIImageView UIScrollView contentSize Friday, September 27, 13
Demo Free Form Editor Friday, September 27, 13
Constraint Stacking Friday, September 27, 13
UITextView UIScrollView UIMapView Image Views Friday, September 27, 13
UIImageView UIImageView UIImageView Friday, September 27, 13
UIImageView UIImageView ? ? Friday, September 27, 13
UIImageView UIImageView UIImageView Friday, September 27, 13
UIImageView UIImageView UIImageView ≥20 ≥20 ≥20 Friday, September 27, 13
UIImageView UIImageView ≥20 ≥20 Friday, September 27, 13
Demo Constraint Stacking Friday, September 27, 13
Interface Builder Quirks Friday, September 27, 13
Friday, September 27, 13
Easy to accidentally delete outlets Friday, September 27, 13
Easy to accidentally delete outlets Does not allow ambiguity Friday,
September 27, 13
Easy to accidentally delete outlets Does not allow ambiguity Adds
minimum best constraints Friday, September 27, 13
Easy to accidentally delete outlets Does not allow ambiguity Adds
minimum best constraints Automatically promotes constraints Friday, September 27, 13
Easy to accidentally delete outlets Does not allow ambiguity Adds
minimum best constraints Automatically promotes constraints Automatically deletes constraints Friday, September 27, 13
Interface Builder Tips Friday, September 27, 13
Friday, September 27, 13
Friday, September 27, 13
Change to portrait/landscape/freeform Friday, September 27, 13
Change to portrait/landscape/freeform Promote constraints to User Constraints Friday, September
27, 13
Change to portrait/landscape/freeform Promote constraints to User Constraints Learn to
expect what IB will do Friday, September 27, 13
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
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
Recap Introduced Auto Layout Ways to use it Demos Friday,
September 27, 13
Discussion https://github.com/livefront/autolayout Sam Kirchmeier @skirchmeier Adam May @yammada Friday, September
27, 13