Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UISS

 UISS

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

Robert Wijas

November 14, 2013
Tweet

More Decks by Robert Wijas

Other Decks in Programming

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

  7. None
  8. None
  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
  13. None
  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)];
  15. None
  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

  27. None
  28. None
  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

  38. None
  39. None
  40. None
  41. None
  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
  47. None
  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

  54. None
  55. None
  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

  62. None
  63. Why bother?

  64. None
  65. None
  66. None
  67. None
  68. None
  69. http://github.com/robertwijas/UISS CocoaPods

  70. inspired by @worrydream

  71. None
  72. robertwijas