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
April 06, 2013
Technology
0
140
Auto Layout? Oh boy!
Cocoaconf Dallas 2013
Cesare Rocchi
April 06, 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
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
1
240
Other Decks in Technology
See All in Technology
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
1
650
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
1.1k
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7k
20250807_Kiroと私の反省会
riz3f7
0
250
GISエンジニアよ 現場に行け!
sudataka
1
130
Amazon Qで2Dゲームを作成してみた
siromi
0
160
UDDのススメ - 拡張版 -
maguroalternative
1
600
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
0
290
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
100
ファッションコーディネートアプリ「WEAR」における、Vertex AI Vector Searchを利用したレコメンド機能の開発・運用で得られたノウハウの紹介
zozotech
PRO
0
550
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
7
2.7k
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
140
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Typedesign – Prime Four
hannesfritz
42
2.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Language of Interfaces
destraynor
158
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
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
480x800 1280x720 960x640 960x540 854x480 640x480 2560x1600
320x480 480x800 1280x720 1280x800 824x1200 768x1024 960x640 960x540 854x480 640x480
2560x1600 1136x768
320x480 480x800 640x360 1280x720 1280x800 824x1200 768x1024 960x640 960x540 1280x768
854x480 640x480 2560x1600 1136x768
240x320 320x480 480x800 640x360 1280x720 1280x800 1080x1920 824x1200 768x1024 600x800
960x640 960x540 1280x768 854x480 640x480 2560x1600 1136x768
A bit of history
A bit of history
A bit of history
A bit of history
None
None
What is layout?
It’s a process
It’s a process Position Size
Web people have CSS
Web people have CSS div div div
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;
Frames #define PADDING 20 CGRect supFrame = newView.superview.frame; CGRect frame
= newView.frame; frame.size.height = supFrame.size.height - PADDING; frame.size.width = supFrame.size.width - PADDING; frame.origin.x = PADDING; frame.origin.y = PADDING; newView.frame = frame;
Spring & Struts
Spring & Struts Autosizing mask
Spring & Struts Autosizing mask How do I change when
superview changes?
Let’s see
Auto Layout
Migrate to Auto Layout
None
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
?
1L 20cl 20cl 20cl
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
Linear programming
Linear programming Solves equations with variables Looks for an objective
function
Auto Layout is a big objective function
Auto Layout is a big objective function
Likes one solution scenarios Multiple solutions => ambiguous layout No
solution => conflicting constraints
No order in grinding ...
No order in grinding ... view1.top = view2.bottom + 10
No order in grinding ... view1.top = view2.bottom + 10
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