Theming iOS Apps Using CSS Philosophies

A short presentation given at Groupon Mobile Tech Talks on 2/26/14. Covers an approach to styling native iOS apps usind the CSS style ideal of separation of content and presentation. Check out the demo project created for this talk here: https://github.com/keithnorm/RecordCollection

Transcript

1. CSS in iOS? - Keith Norman
2. Quick about me…
8. What’s good about CSS? • loose coupling between style and content • cleaner code • makes design changes simple • and redesigns feasible (iOS 7?) • Come on, does this slide really need to exist?
9. Bad practice #1: putting style code in view controllers textLabel.font = [UIFont fontWithName:kOpenSansFont size:17]; textLabel.textColor = RGBCOLOR(51, 51, 51); textLabel.backgroundColor = [UIColor clearColor]; <p style="font: 15px opensans; color: rgba(51, 51, 51, 1); background: none;"></p> =
10. Bad practice #2: using Interface Builder
11. Demo
12. UIAppearance [[UILabel appearance] setTextColor:[UIColor cyanColor]]; [[UILabel appearanceWhenContainedIn: [Subview class], nil] setTextColor:[UIColor redColor]]; [[UILabel appearanceWhenContainedIn: [SubSubview class], [Subview class], nil] setTextColor:[UIColor greenColor]]; Subview SubSubview You can set these up in AppDelegate!
13. UINavigationBar barTintColor UISearchBar barTintColor
14. UINavigationBar tintColor Note: Not “officially” supported by UIAppearance [[UINavigationBar appearance] setTintColor:[UIColor redColor]];
15. window tintColor trickles down to all subviews - (void)tintColorDidChange { self.backgroundColor = self.tintColor; }
16. A bit about font label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody]; https://gist.github.com/nuthatch/7594460 UIFontDescriptor *userFont = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleBody]; float userFontSize = [userFont pointSize]; UIFont *font = [UIFont fontWithName:@"OpenSans" size:userFontSize]; Custom font: UIFontDescriptor *descriptor = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleCaption1]; descriptor = [descriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold]; UIFont *font = [UIFont fontWithDescriptor:descriptor size:0]; [label setFont:font]; Bold font:
17. // PlayPauseButton.h ! @interface PlayPauseButton : UIControl ! @property (nonatomic, assign) PlayerState playState; ! @property (nonatomic, strong) UIColor *controlButtonColor UI_APPEARANCE_SELECTOR; ! @end // PlayPauseButton.m ! - (void)setControlButtonColor:(UIColor *)controlButtonColor { _controlButtonColor = controlButtonColor; [self setNeedsDisplay]; } - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(context, self.controlButtonColor.CGColor); // ... draw icon ... // } PaintCode App (for learning Core Graphics) http://www.paintcodeapp.com/ Core Graphics
18. Theme + “styleClass” Bold Not Bold <p class="strong">Lost At Sea</p> <p>The Squirrel Nut Zippers</p>
19. - (void)awakeFromNib { self.albumName.styleClass = @"strongLabel"; } [some magic happens] and the text is bold
20. // UIView+StyleClass.h ! @interface UIView (StyleClass) ! @property (nonatomic, strong) NSString *styleClass; ! @end // UIView+StyleClass.m ! @implementation UIView (StyleClass) ! @dynamic styleClass; ! - (void)setStyleClass:(NSString *)styleClass { NSString *selectorName = [@"style" stringByAppendingString:[NSString stringWithFormat:@“%@%@:", [[styleClass substringToIndex:1] uppercaseString], [styleClass substringFromIndex:1]]]; SEL sel = NSSelectorFromString(selectorName); if (class_getClassMethod([Theme class], sel) != NULL) { [Theme performSelector:sel withObject:self]; } } ! @end StyleClass Category
21. @implementation Theme ! + (void)styleStrongLabel:(UILabel *)label { UIFontDescriptor *descriptor = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleCaption1]; descriptor = [descriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold]; UIFont *font = [UIFont fontWithDescriptor:descriptor size:0]; [label setFont:font]; } ! @end Theme class
22. menuItem.styleClass = @"myCollectionMenuItem"; menuItem.styleClass = @"recentlyPlayedMenuItem";
23. UIView+CSS (highly experimental) @interface UIView (CSS) ! @property (nonatomic, strong) CSSBorder *border UI_APPEARANCE_SELECTOR; @property (nonatomic, strong) CSSBorder *borderTop UI_APPEARANCE_SELECTOR; @property (nonatomic, strong) CSSBorder *borderBottom UI_APPEARANCE_SELECTOR; @property (nonatomic, strong) CSSDropshadow *dropShadow UI_APPEARANCE_SELECTOR; @property (nonatomic, strong) CSSBorderRadius *borderRadius UI_APPEARANCE_SELECTOR; ! @end CSSBorderRadius *borderRadius = [[CSSBorderRadius alloc] init]; borderRadius.radius = 15.0f; [[AlbumCard appearance] setBorderRadius:borderRadius];
24. Further reading Classy - https://github.com/cloudkite/Classy UISS - https://github.com/robertwijas/UISS WWDC 2012 #216 and 2013 #214! https://developer.apple.com/wwdc/videos/ Record Collection! https://github.com/keithnorm/RecordCollection