UISS Blitz Talk

Blitz Talk about UISS library from NSConference 2013.

Transcript

1. UIAppearance on Steroids UISS Robert Wijas
2. Quick introduction UIAppearance
3. @protocol UIAppearance <NSObject> ! + (id)appearance; ! + (id)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION; ! @end ! @protocol UIAppearanceContainer <NSObject> @end #define UI_APPEARANCE_SELECTOR ! - (void)setProperty:(PropertyType)property forAxis1:(IntegerType)axis1 axisN:(IntegerType)axisN; ! - (PropertyType)propertyForAxis1:(IntegerType)axis1 axisN:(IntegerType)axisN; Protocols Properties
4. [[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)];
5. UISS JSON Syntax
6. 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] } }
7. "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
8. "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
9. "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
10. "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
11. 14 [UIFont systemFontOfSize:14.0f] ! ["bold", 14] [UIFont boldSystemFontOfSize:14.0f] ! ["Georgia-Italic", 12] [UIFont fontWithName:@"Georgia-Italic" size:12.0f] Fonts
12. "imageName" [UIImage imageNamed:@"imageName"] ! ["imageName", 1, 2, 3, 4] [[UIImage imageNamed:@"imageName"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 2, 3, 4)] Images
13. "UINavigationBar":{ "Phone":{ "tintColor":"gray" }, "Pad":{ "tintColor":"lightGray" } } UI Idiom Branches
14. "Variables":{ "tint":"blue", “toolbar”:{ "tintColor": "$tint" } }, "UINavigationBar":{ "tintColor": "$tint" }, "UITabBar":{ "tintColor": "$tint" }, "UIToolbar":”$toolbar” Variables
15. "UISSDemoViewController":{ "-UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white" } } Comments
16. Simple Setup
17. one line of code Simple Setup
18. Simple Setup [UISS configureWithDefaultJSONFile]; uiss.json
19. Status Bar
20. Status Bar self.uiss = [UISS configureWithDefaultJSONFile]; self.uiss.statusWindowEnabled = YES;
23. Release configuration ?
24. Release configuration Generated Code
26. How to make it really cool?
27. How to make it really cool? Live updates
30. Remote Style [UISS configureWithDefaultJSONFile]
31. Remote Style [UISS configureWithURL:[NSURL URLWithString:@"http://localhost/uiss.json"]]
33. Custom Views UIAppearance
34. UISS Architecture Goals
35. lightweight UISS Architecture Goals
36. lightweight UISS Architecture Goals minimal dependency
37. lightweight UISS Architecture Goals powered by UIAppearance minimal dependency
38. http://github.com/robertwijas/UISS CocoaPods
40. robertwijas