Auto Layout? Oh boy! - Speaker Deck

Slide 1

Slide 1 text

Auto Layout? Oh boy! Rocchi Cesare _funkyboy funkyboy

Slide 2

Slide 2 text

Outline History Frames Spring&Struts Auto layout

Slide 3

Slide 3 text

Who am I?

Slide 4

Slide 4 text

UX designer and developer

Slide 5

Slide 5 text

Who are you?

Slide 6

Slide 6 text

Giveaway

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Lyrics

Slide 9

Slide 9 text

“Ring! Ring! It's 7:00 A.M.! Move y'self to go again”

Slide 10

Slide 10 text

“Ring! Ring! It's 7:00 A.M.! Move y'self to go again” The Magniﬁcent Seven - The Clash

Slide 11

Slide 11 text

A bit of history

Slide 12

Slide 12 text

480x800 1280x720 960x640 960x540 854x480 640x480 2560x1600

Slide 13

Slide 13 text

320x480 480x800 1280x720 1280x800 824x1200 768x1024 960x640 960x540 854x480 640x480 2560x1600 1136x768

Slide 14

Slide 14 text

320x480 480x800 640x360 1280x720 1280x800 824x1200 768x1024 960x640 960x540 1280x768 854x480 640x480 2560x1600 1136x768

Slide 15

Slide 15 text

240x320 320x480 480x800 640x360 1280x720 1280x800 1080x1920 824x1200 768x1024 600x800 960x640 960x540 1280x768 854x480 640x480 2560x1600 1136x768

Slide 16

Slide 16 text

A bit of history

Slide 17

Slide 17 text

A bit of history

Slide 18

Slide 18 text

A bit of history

Slide 19

Slide 19 text

A bit of history

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

What is layout?

Slide 23

Slide 23 text

It’s a process

Slide 24

Slide 24 text

It’s a process Position Size

Slide 25

Slide 25 text

Web people have CSS

Slide 26

Slide 26 text

Web people have CSS div div div

Slide 27

Slide 27 text

http://mediaqueri.es

Slide 28

Slide 28 text

http://joshemerson.co.uk/rsd/

Slide 29

Slide 29 text

In the beginning ...

Slide 30

Slide 30 text

Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100, 100)]; [self.view addSubview:newView];

Slide 31

Slide 31 text

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;

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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;

Slide 34

Slide 34 text

Spring & Struts

Slide 35

Slide 35 text

Spring & Struts Autosizing mask

Slide 36

Slide 36 text

Spring & Struts Autosizing mask How do I change when superview changes?

Slide 37

Slide 37 text

Let’s see

Slide 38

Slide 38 text

Auto Layout

Slide 39

Slide 39 text

Migrate to Auto Layout

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Mental shift

Slide 42

Slide 42 text

Impacts your life

Slide 43

Slide 43 text

Wife: “Honey are you still working with that auto layout thing?”

Slide 44

Slide 44 text

Wife: “Honey are you still working with that auto layout thing?” Me: “Yeah, how do you know?”

Slide 45

Slide 45 text

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”.

Slide 46

Slide 46 text

You DON’T setFrame: anymore

Slide 47

Slide 47 text

You DON’T setFrame: anymore You DECLARE a layout

Slide 48

Slide 48 text

You express relations between elements

Slide 49

Slide 49 text

constraint3 constraint4 constraint1 constraint2

Slide 50

Slide 50 text

constraint3 constraint4 constraint1 constraint2

Slide 51

Slide 51 text

constraint3 constraint4 constraint1 constraint2

Slide 52

Slide 52 text

Slide 53

Slide 53 text

1L 20cl 20cl 20cl

Slide 54

Slide 54 text

Linear equations

Slide 55

Slide 55 text

ax + by = c Linear equations

Slide 56

Slide 56 text

ax + by = c Linear equations

Slide 57

Slide 57 text

ax + by = c 2x + 2y = 4 Linear equations

Slide 58

Slide 58 text

ax + by = c 2x + 2y = 4 => [x = 1, y = 1] Linear equations

Slide 59

Slide 59 text

ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) Linear equations

Slide 60

Slide 60 text

ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) => [x = 9] Linear equations

Slide 61

Slide 61 text

0x + 1 = 2

Slide 62

Slide 62 text

Linear equations One solution No solution Inﬁnite solutions

Slide 63

Slide 63 text

One solution

Slide 64

Slide 64 text

One solution “Hey lady, you got the love I need ...”

Slide 65

Slide 65 text

One solution “Hey lady, you got the love I need ...” Over the Hills and Far Away - Led Zeppelin

Slide 66

Slide 66 text

No solution

Slide 67

Slide 67 text

“Pleased to meet you hope you guess my name ...” No solution

Slide 68

Slide 68 text

“Pleased to meet you hope you guess my name ...” No solution Sympathy For The Devil - The Rolling Stones

Slide 69

Slide 69 text

Inﬁnite solutions

Slide 70

Slide 70 text

“It's gettin' dark, too dark to see ...” Inﬁnite solutions

Slide 71

Slide 71 text

“It's gettin' dark, too dark to see ...” Inﬁnite solutions Knockin' on Heaven's Door - Bob Dylan

Slide 72

Slide 72 text

Geometry helps

Slide 73

Slide 73 text

Geometry helps One solution x -2y = -1 4x + 3y = 7

Slide 74

Slide 74 text

Geometry helps No solution 3x + 2y = 12 3x + 2y = 6

Slide 75

Slide 75 text

Geometry helps Inﬁnite solutions y = 10x + 4 -30x - 12 = -3y

Slide 76

Slide 76 text

Linear programming

Slide 77

Slide 77 text

Linear programming Solves equations with variables Looks for an objective function

Slide 78

Slide 78 text

Auto Layout is a big objective function

Slide 79

Slide 79 text

Auto Layout is a big objective function

Slide 80

Slide 80 text

Likes one solution scenarios Multiple solutions => ambiguous layout No solution => conﬂicting constraints

Slide 81

Slide 81 text

No order in grinding ...

Slide 82

Slide 82 text

No order in grinding ... view1.top = view2.bottom + 10

Slide 83

Slide 83 text

No order in grinding ... view1.top = view2.bottom + 10 Priorities

Slide 84

Slide 84 text

“Left margin is always 20” “Top margin is always 20”

Slide 85

Slide 85 text

Let’s see

Slide 86

Slide 86 text

“Left edge is 20” “Top edge is 20” “Width is 100” “Height is 100”

Slide 87

Slide 87 text

Enough IB

Slide 88

Slide 88 text

NSLayoutConstraint

Slide 89

Slide 89 text

[NSLayoutConstraint constraintWithItem:newElement

Slide 90

Slide 90 text

[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft

Slide 91

Slide 91 text

[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual

Slide 92

Slide 92 text

[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview]

Slide 93

Slide 93 text

[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft

Slide 94

Slide 94 text

[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0

Slide 95

Slide 95 text

[NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];

Slide 96

Slide 96 text

More complex example

Slide 97

Slide 97 text

Zen

Slide 98

Slide 98 text

Zen NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newEl]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(newEl)];

Slide 99

Slide 99 text

Zen @"V:|[newElement]-100-|"

Slide 100

Slide 100 text

Zen @"V:[btn1]-[btn2]"

Slide 101

Slide 101 text

Zen @"V:[btn1]-100-[btn2]"

Slide 102

Slide 102 text

Zen @"[btn(>=100)]"

Slide 103

Slide 103 text

Zen @"[btn(>=100@500)]"

Slide 104

Slide 104 text

Zen @"[btn1(>=80, <=120)]"

Slide 105

Slide 105 text

Animation

Slide 106

Slide 106 text

Alternative

Slide 107

Slide 107 text

Alternative https://github.com/RolandasRazma/RRAutoLayout if(!NSClassFromString(@"NSLayoutConstraint")) { objc_registerClassPair( objc_allocateClassPair( [RRLayoutConstraint class], "NSLayoutConstraint", 0)); }

Slide 108

Slide 108 text

DON’T think in terms of frames

Slide 109

Slide 109 text

Should I use Auto Layout?

Slide 110

Slide 110 text

“The answer my friend is ...”

Slide 111

Slide 111 text

“The answer my friend is ...” Blowin' In The Wind - Bob Dylan

Slide 112

Slide 112 text

Summing up Did blocks substitute delegates?

Slide 113

Slide 113 text

Thank you!

Slide 114

Slide 114 text

Coordinates twitter.com/_funkyboy app.net/funkyboy [email protected] http://studiomagnolia.com