Tweet
Tweet

Slide 1

Slide 1 text

UIAppearance on Steroids UISS Robert Wijas

Slide 2

Slide 2 text

Quick introduction UIAppearance

Slide 3

Slide 3 text

@protocol UIAppearance ! + (id)appearance; ! + (id)appearanceWhenContainedIn:(Class )ContainerClass, ... NS_REQUIRES_NIL_TERMINATION; ! @end ! @protocol UIAppearanceContainer @end #define UI_APPEARANCE_SELECTOR ! - (void)setProperty:(PropertyType)property forAxis1:(IntegerType)axis1 axisN:(IntegerType)axisN; ! - (PropertyType)propertyForAxis1:(IntegerType)axis1 axisN:(IntegerType)axisN; Protocols Properties

Slide 4

Slide 4 text

[[UIButton appearance] setTitleColor:[[UIColor whiteColor] colorWithAlphaComponent:0.800] forState:UIControlStateNormal]; [[UIButton appearance] setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted]; [[UIButton appearance] setBackgroundImage:[[UIImage imageNamed:@"button-background-normal"] resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0)] forState:UIControlStateNormal]; [[UIButton appearance] setBackgroundImage:[[UIImage imageNamed:@"button-background-highlighted"] resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0)] forState:UIControlStateHighlighted]; [[UILabel appearanceWhenContainedIn:[UIButton class], nil] setFont:[UIFont fontWithName:@"Copperplate-Bold" size:18.0]]; [[UIButton appearance] setTitleEdgeInsets:UIEdgeInsetsMake(1.0, 0.0, 0.0, 0.0)];

Slide 5

Slide 5 text

UISS JSON Syntax

Slide 6

Slide 6 text

UISS JSON Syntax "UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white", ! "backgroundImage:normal": ["button-background-normal", [0,10,0,10]], "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]], ! "titleEdgeInsets": [1,0,0,0], ! "UILabel":{ "font":["Copperplate-Bold", 18] } }

Slide 7

Slide 7 text

"UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white", ! "backgroundImage:normal": ["button-background-normal", [0,10,0,10]], "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]], ! "titleEdgeInsets": [1,0,0,0], ! "UILabel":{ "font":["Copperplate-Bold", 18] } } UIAppearance objects and containment

Slide 8

Slide 8 text

"UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white", ! "backgroundImage:normal": ["button-background-normal", [0,10,0,10]], "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]], ! "titleEdgeInsets": [1,0,0,0], ! "UILabel":{ "font":["Copperplate-Bold", 18] } } Properties

Slide 9

Slide 9 text

"UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white", ! "backgroundImage:normal": ["button-background-normal", [0,10,0,10]], "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]], ! "titleEdgeInsets": [1,0,0,0], ! "UILabel":{ "font":["Copperplate-Bold", 18] } } Axis parameters

Slide 10

Slide 10 text

"clear" [UIColor clearColor] ! ["#ffffff", 0.5] [UIColor colorWithRed:255.0f green:255.0f blue:255.0f alpha:0.5f] ! [0, 255, 255, 0.5] [UIColor colorWithRed:0.0f green:255.0f blue:255.0f alpha:0.5f] Colors

Slide 11

Slide 11 text

14 [UIFont systemFontOfSize:14.0f] ! ["bold", 14] [UIFont boldSystemFontOfSize:14.0f] ! ["Georgia-Italic", 12] [UIFont fontWithName:@"Georgia-Italic" size:12.0f] Fonts

Slide 12

Slide 12 text

"imageName" [UIImage imageNamed:@"imageName"] ! ["imageName", 1, 2, 3, 4] [[UIImage imageNamed:@"imageName"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 2, 3, 4)] Images

Slide 13

Slide 13 text

"UINavigationBar":{ "Phone":{ "tintColor":"gray" }, "Pad":{ "tintColor":"lightGray" } } UI Idiom Branches

Slide 14

Slide 14 text

"Variables":{ "tint":"blue", “toolbar”:{ "tintColor": "$tint" } }, "UINavigationBar":{ "tintColor": "$tint" }, "UITabBar":{ "tintColor": "$tint" }, "UIToolbar":”$toolbar” Variables

Slide 15

Slide 15 text

"UISSDemoViewController":{ "-UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white" } } Comments

Slide 16

Slide 16 text

Simple Setup

Slide 17

Slide 17 text

one line of code Simple Setup

Slide 18

Slide 18 text

Simple Setup [UISS configureWithDefaultJSONFile]; uiss.json

Slide 19

Slide 19 text

Status Bar

Slide 20

Slide 20 text

Status Bar self.uiss = [UISS configureWithDefaultJSONFile]; self.uiss.statusWindowEnabled = YES;

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Release configuration ?

Slide 24

Slide 24 text

Release configuration Generated Code

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

How to make it really cool?

Slide 27

Slide 27 text

How to make it really cool? Live updates

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Remote Style [UISS configureWithDefaultJSONFile]

Slide 31

Slide 31 text

Remote Style [UISS configureWithURL:[NSURL URLWithString:@"http://localhost/uiss.json"]]

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Custom Views UIAppearance

Slide 34

Slide 34 text

UISS Architecture Goals

Slide 35

Slide 35 text

lightweight UISS Architecture Goals

Slide 36

Slide 36 text

lightweight UISS Architecture Goals minimal dependency

Slide 37

Slide 37 text

lightweight UISS Architecture Goals powered by UIAppearance minimal dependency

Slide 38

Slide 38 text

http://github.com/robertwijas/UISS CocoaPods

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

robertwijas

Slide 41

Slide 41 text

No content