UISS

Talk about my UISS library presented at Mobile Warsaw and CocoaHeads Cracow.

Transcript

1. Attractive things work better… When you wash and wax a car, it drives better, doesn’t it? Or at least feels like it does. David A. Norman
2. Attractive things work better… When you wash and wax a car, it drives better, doesn’t it? Or at least feels like it does. David A. Norman
3. Robert Wijas
4. Robert Wijas
5. Robert Wijas
6. Robert Wijas
9. UIAppearance on Steroids UISS
10. Quick introduction UIAppearance
11. Protocols @protocol UIAppearance <NSObject> ! + (id)appearance; ! + (id)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION; ! @end ! ! @protocol UIAppearanceContainer <NSObject> @end
12. Properties - (void)setProperty:(PropertyType)property forAxis1:(IntegerType)axis1 axisN:(IntegerType)axisN; ! - (PropertyType)propertyForAxis1:(IntegerType)axis1 axisN:(IntegerType)axisN; #define UI_APPEARANCE_SELECTOR
14. [[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)];
16. UISS JSON Syntax
17. 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] } }
18. "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
19. "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
20. "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
21. "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
22. 14 [UIFont systemFontOfSize:14.0f] ! ["bold", 14] [UIFont boldSystemFontOfSize:14.0f] ! ["Georgia-Italic", 12] [UIFont fontWithName:@"Georgia-Italic" size:12.0f] Fonts
23. "imageName" [UIImage imageNamed:@"imageName"] ! ["imageName", 1, 2, 3, 4] [[UIImage imageNamed:@"imageName"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 2, 3, 4)] Images
24. "UINavigationBar":{ "Phone":{ "tintColor":"gray" }, "Pad":{ "tintColor":"lightGray" } } UI Idiom Branches
25. "Variables":{ "tint":"blue", “toolbar”:{ "tintColor": "$tint" } }, "UINavigationBar":{ "tintColor": "$tint" }, "UITabBar":{ "tintColor": "$tint" }, "UIToolbar":”$toolbar” Variables
26. "UISSDemoViewController":{ "-UIButton":{ "titleColor:normal":["white", 0.8], "titleColor:highlighted":"white" } } Comments
29. Simple Setup
30. one line of code Simple Setup
31. Simple Setup [UISS configureWithDefaultJSONFile]; uiss.json
32. How to make it really cool?
33. How to make it really cool? Live updates
34. Remote Style [UISS configureWithDefaultJSONFile]
35. Remote Style [UISS configureWithURL:[NSURL URLWithString:@"http://localhost/uiss.json"]]
36. How-to Remote uiss.json
37. curl get.pow.cx | sh http://pow.cx
42. UIAppearance - (NSMutableArray *)_appearanceInvocations;
43. Swizzling TaggingAppearanceGeneralSetterIMP ()
44. When the magic happens
45. [UIView(Hierarchy) addSubview:] When the magic happens
46. - (void)reloadAppearance { NSArray * windows = [UIApplication sharedApplication].windows; for (UIWindow *window in windows) { for (UIView *view in window.subviews) { [view removeFromSuperview]; [window addSubview:view]; } } } Reload appearance
48. UIAppearance weakness Selectors
49. subclassing UIAppearance weakness Selectors
50. subclassing UIAppearance weakness custom properties Selectors
51. Alternatives
52. Alternatives
53. Alternatives https://github.com/tombenner/nui
56. Layout
57. Layout Auto
58. attribute1 == multiplier × attribute2 + constant
59. attribute1 == multiplier × attribute2 + constant >= <= Left Right Top Bottom Leading Trailing Width Height CenterX CenterY Baseline Left Right Top Bottom Leading Trailing Width Height CenterX CenterY Baseline @500
60. ASCII Art
61. |-[find]-[findNext]-[findField(>=20)]-| ASCII Art
63. Why bother?
69. http://github.com/robertwijas/UISS CocoaPods
70. inspired by @worrydream
72. robertwijas