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

UISS Blitz Talk

UISS Blitz Talk

Blitz Talk about UISS library from NSConference 2013.

Robert Wijas

March 04, 2013
Tweet

More Decks by Robert Wijas

Other Decks in Programming

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;

  21. None
  22. None
  23. Release configuration ?

  24. Release configuration Generated Code

  25. None
  26. How to make it really cool?

  27. How to make it really cool? Live updates

  28. None
  29. None
  30. Remote Style [UISS configureWithDefaultJSONFile]

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

  32. None
  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

  39. None
  40. robertwijas

  41. None