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
720
Beyond REST: Web Services Designed for Mobile
skirchmeier
2
140
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
520
iOS Training Part 2
skirchmeier
1
210
Custom iOS Controls
skirchmeier
3
190
Other Decks in Programming
See All in Programming
AkarengaLT vol.38
hashimoto_kei
1
110
Devoxx BE - Local Development in the AI Era
kdubois
0
130
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
300
Software Architecture
hschwentner
6
2.3k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
Leading Effective Engineering Teams in the AI Era
addyosmani
7
570
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
250
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
410
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
330
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.8k
Featured
See All Featured
Done Done
chrislema
185
16k
The Cult of Friendly URLs
andyhume
79
6.6k
BBQ
matthewcrist
89
9.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Designing for humans not robots
tammielis
254
26k
For a Future-Friendly Web
brad_frost
180
10k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
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