style vs. content and clean theming in ios
Post on 18-Jan-2015
537 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related