style vs. content and clean theming in ios
DESCRIPTION
From Groupon Mobile Tech Talks on 2/27/2014 - a web developers approach to CSS-like separation between style and content in native iOS apps.TRANSCRIPT
![Page 1: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/1.jpg)
CSS in iOS? - Keith Norman
![Page 2: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/2.jpg)
Quick about me…
![Page 3: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/3.jpg)
![Page 4: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/4.jpg)
![Page 5: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/5.jpg)
![Page 6: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/6.jpg)
![Page 7: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/7.jpg)
![Page 8: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/8.jpg)
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?
![Page 9: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/9.jpg)
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>
=
![Page 10: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/10.jpg)
Bad practice #2: using Interface Builder
![Page 11: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/11.jpg)
Demo
![Page 12: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/12.jpg)
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!
![Page 13: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/13.jpg)
UINavigationBar barTintColorUISearchBar barTintColor
![Page 14: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/14.jpg)
UINavigationBar tintColorNote: Not “officially” supported by UIAppearance
[[UINavigationBar appearance] setTintColor:[UIColor redColor]];
![Page 15: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/15.jpg)
window tintColor trickles down to all subviews
- (void)tintColorDidChange { self.backgroundColor = self.tintColor; }
![Page 16: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/16.jpg)
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:
![Page 17: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/17.jpg)
// 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
![Page 18: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/18.jpg)
Theme + “styleClass”
Bold
Not Bold
<p class="strong">Lost At Sea</p> <p>The Squirrel Nut Zippers</p>
![Page 19: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/19.jpg)
- (void)awakeFromNib { self.albumName.styleClass = @"strongLabel"; }
[some magic happens]
and the text is bold
![Page 20: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/20.jpg)
// 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
![Page 21: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/21.jpg)
@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
![Page 22: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/22.jpg)
menuItem.styleClass = @"myCollectionMenuItem";
menuItem.styleClass = @"recentlyPlayedMenuItem";
![Page 23: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/23.jpg)
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];
![Page 24: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/24.jpg)
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
![Page 25: Style vs. Content and Clean Theming in iOS](https://reader034.vdocument.in/reader034/viewer/2022042623/54bb81d04a79598e0b8b457d/html5/thumbnails/25.jpg)