Style vs. Content and Clean Theming in iOS

CSS in iOS? - Keith Norman

Quick about me…

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?

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>

=

Bad practice #2: using Interface Builder

Demo

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!

UINavigationBar barTintColorUISearchBar barTintColor

UINavigationBar tintColorNote: Not “officially” supported by UIAppearance

[[UINavigationBar appearance] setTintColor:[UIColor redColor]];

window tintColor trickles down to all subviews

- (void)tintColorDidChange { self.backgroundColor = self.tintColor; }

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:

// 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

Theme + “styleClass”

Bold

Not Bold

<p class="strong">Lost At Sea</p> <p>The Squirrel Nut Zippers</p>

- (void)awakeFromNib { self.albumName.styleClass = @"strongLabel"; }

[some magic happens]

and the text is bold

// 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

@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

menuItem.styleClass = @"myCollectionMenuItem";

menuItem.styleClass = @"recentlyPlayedMenuItem";

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];

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