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? Oh boy!
Search
Cesare Rocchi
May 02, 2013
Technology
1
240
Auto Layout? Oh boy!
Slides of my presentation "Auto Layout? Oh boy!" at UIKonf
Cesare Rocchi
May 02, 2013
Tweet
Share
More Decks by Cesare Rocchi
See All by Cesare Rocchi
In the customer's shoes
funkyboy
0
120
What the heck is JavaScriptCore?
funkyboy
0
140
The new WebKit is awesome
funkyboy
1
360
The new WebKit is AWESOME
funkyboy
0
500
Designing with Cognitive Science in Mind
funkyboy
0
150
The new WebKit is AWESOME
funkyboy
0
180
Choosing a back end for your mobile app:
funkyboy
0
640
Apps and Mental Models
funkyboy
0
210
Auto Layout? Oh boy!
funkyboy
0
140
Other Decks in Technology
See All in Technology
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
410
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
Claude Code に プロジェクト管理やらせたみた
unson
7
4.8k
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
270
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
230
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
AI エージェントと考え直すデータ基盤
na0
17
6.7k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
150
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Making Projects Easy
brettharned
116
6.3k
GraphQLとの向き合い方2022年版
quramy
49
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
A Modern Web Designer's Workflow
chriscoyier
695
190k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fireside Chat
paigeccino
37
3.5k
Producing Creativity
orderedlist
PRO
346
40k
RailsConf 2023
tenderlove
30
1.1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
Auto Layout? Oh boy! Rocchi Cesare _funkyboy funkyboy
Outline History Frames Spring&Struts Auto layout
Who am I?
UX designer and developer
Who are you?
Giveaway
None
Lyrics
“Ring! Ring! It's 7:00 A.M.! Move y'self to go again”
“Ring! Ring! It's 7:00 A.M.! Move y'self to go again”
The Magnificent Seven - The Clash
A bit of history
A bit of history
A bit of history
A bit of history
A bit of history
None
None
What is layout?
What is layout? Position Size
Web people have CSS
http://mediaqueri.es
http://joshemerson.co.uk/rsd/
In the beginning ...
Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100,
100)]; [self.view addSubview:newView];
Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100,
100)]; [self.view addSubview:newView]; CGRect frame = newView.frame; frame.size.height = 200; frame.size.width = 200; frame.origin.x = 20; frame.origin.y = 20; newView.frame = frame;
Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100,
100)]; [self.view addSubview:newView]; CGRect frame = newView.frame; frame.size.height = 200; frame.size.width = 200; frame.origin.x = 20; frame.origin.y = 20; newView.frame = frame; newView.center = newView.superview.center;
Spring & Struts
Spring & Struts Autosizing mask
Spring & Struts Autosizing mask How do I change when
superview changes?
Spring & Struts
Spring & Struts
Spring & Struts self.view.autoresizingMask =
Spring & Struts UIViewAutoresizingFlexibleWidth UIViewAutoresizingFlexibleHeight UIViewAutoresizingFlexibleLeftMargin UIViewAutoresizingFlexibleRightMargin UIViewAutoresizingFlexibleTopMargin UIViewAutoresizingFlexibleBottomMargin self.view.autoresizingMask
=
Auto Layout
Mental shift
Impacts your life
Wife: “Honey are you still working with that auto layout
thing?”
Wife: “Honey are you still working with that auto layout
thing?” Me: “Yeah, how do you know?”
Wife: “Honey are you still working with that auto layout
thing?” Me: “Yeah, how do you know?” Wife: “Because I am hearing more ‘f*ck’ and ‘sh!t’ than usual”.
You DON’T setFrame: anymore
You DON’T setFrame: anymore You DECLARE a layout
You express relations between elements
constraint3 constraint4 constraint1 constraint2
constraint3 constraint4 constraint1 constraint2
constraint3 constraint4 constraint1 constraint2
?
Linear equations
ax + by = c Linear equations
ax + by = c Linear equations
ax + by = c 2x + 2y = 4
Linear equations
ax + by = c 2x + 2y = 4
=> [x = 1, y = 1] Linear equations
ax + by = c 2x + 2y = 4
=> [x = 1, y = 1] 2(x+5)-7 = 3(x-2) Linear equations
ax + by = c 2x + 2y = 4
=> [x = 1, y = 1] 2(x+5)-7 = 3(x-2) => [x = 9] Linear equations
0x + 1 = 2
Linear equations One solution No solution Infinite solutions
One solution
One solution “Hey lady, you got the love I need
...”
One solution “Hey lady, you got the love I need
...” Over the Hills and Far Away - Led Zeppelin
No solution
“Pleased to meet you hope you guess my name ...”
No solution
“Pleased to meet you hope you guess my name ...”
No solution Sympathy For The Devil - The Rolling Stones
Infinite solutions
“It's gettin' dark, too dark to see ...” Infinite solutions
“It's gettin' dark, too dark to see ...” Infinite solutions
Knockin' on Heaven's Door - Bob Dylan
Geometry helps
Geometry helps One solution x -2y = -1 4x +
3y = 7
Geometry helps No solution 3x + 2y = 12 3x
+ 2y = 6
Geometry helps Infinite solutions y = 10x + 4 -30x
- 12 = -3y
Likes one solution scenarios Multiple solutions => ambiguous layout No
solution => conflicting constraints
No order in grinding ...
No order in grinding ... Priorities
“Left margin is always 20” “Top margin is always 20”
Let’s see
“Left edge is 20” “Top edge is 20” “Width is
100” “Height is 100”
Enough IB
NSLayoutConstraint
[NSLayoutConstraint constraintWithItem:newElement
[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft
[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview]
[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft
[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0
[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
More complex example
Zen
Zen NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newEl]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(newEl)];
Zen @"V:|[newElement]-100-|"
Zen @"V:[btn1]-[btn2]"
Zen @"V:[btn1]-100-[btn2]"
Zen @"[btn(>=100)]"
Zen @"[btn(>=100@500)]"
Zen @"[btn1(>=80, <=120)]"
Animation
Alternative
Alternative https://github.com/RolandasRazma/RRAutoLayout if(!NSClassFromString(@"NSLayoutConstraint")) { objc_registerClassPair( objc_allocateClassPair( [RRLayoutConstraint class], "NSLayoutConstraint", 0));
}
DON’T think in terms of frames
Should I use Auto Layout?
“The answer my friend is ...”
“The answer my friend is ...” Blowin' In The Wind
- Bob Dylan
Summing up Did blocks substitute delegates?
Thank you!
Coordinates twitter.com/_funkyboy app.net/funkyboy
[email protected]
http://studiomagnolia.com