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
210
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
120
The new WebKit is awesome
funkyboy
1
340
The new WebKit is AWESOME
funkyboy
0
490
Designing with Cognitive Science in Mind
funkyboy
0
130
The new WebKit is AWESOME
funkyboy
0
170
Choosing a back end for your mobile app:
funkyboy
0
630
Apps and Mental Models
funkyboy
0
200
Auto Layout? Oh boy!
funkyboy
0
130
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
君も受託系GISエンジニアにならないか
sudataka
1
370
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
26
5.1k
Statistics for Hackers
jakevdp
797
220k
Scaling GitHub
holman
459
140k
Producing Creativity
orderedlist
PRO
343
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
GraphQLとの向き合い方2022年版
quramy
44
13k
Facilitating Awesome Meetings
lara
51
6.2k
Faster Mobile Websites
deanohume
306
31k
Building Adaptive Systems
keathley
40
2.4k
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