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
130
What the heck is JavaScriptCore?
funkyboy
0
140
The new WebKit is awesome
funkyboy
1
370
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
220
Auto Layout? Oh boy!
funkyboy
0
140
Other Decks in Technology
See All in Technology
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
180
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
250
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
1k
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
190
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
Android Audio: Beyond Winning On It
atsushieno
0
4.8k
スタートアップこそ全員で Platform Engineering スピードと持続性を両立する文化の作り方
anizozina
1
330
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
sansan_randd
2
140
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Docker and Python
trallard
46
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Balancing Empowerment & Direction
lara
3
630
Speed Design
sergeychernyshev
32
1.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
4 Signs Your Business is Dying
shpigford
184
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for Performance
lara
610
69k
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