The document provides an overview and instructions for using SkinKit, an iOS framework for customizing the appearance of apps. It discusses installation, usage, and different approaches for skin creation including implementing a data source protocol, subclassing SKSkin or SKDefaultSkin, and creating a skin bundle. Subclassing SKDefaultSkin allows customizing colors and images with default assumptions for simplified skin creation.

1. SkinKit
Dominique d’Argent
Tuesday, December 11, 12

2. Agenda
• Overview
• Installation
• Usage
• Skin creation
• Outlook
Tuesday, December 11, 12

3. Overview
Tuesday, December 11, 12

4. Overview
Description
“SkinKit is an iOS framework that allows to easily
customize the appearance of your app.”
Tuesday, December 11, 12

5. Overview
Features
• Simple API for loading skins.
• Loading skins from bundles.
• Customization of regular views.
• Simple skin creation.
• Switch skin at runtime.
Tuesday, December 11, 12

6. Overview
Features
• Simple API for loading skins.
• Loading skins from bundles.
• Customization of regular views.
• Simple skin creation.
• Switch skin at runtime.
Demo App can!
Tuesday, December 11, 12

7. Installation
Tuesday, December 11, 12

8. Installation
Requirements
• iOS 6.0 or newer.
• Xcode 4.5 or newer.
Tuesday, December 11, 12

9. Installation
Workspace
1. Get a copy from github.com/nubbel/SkinKit
2. Create a workspace in Xcode.
3. Copy your main project to the workspace or create a new
one.
4. Add the SkinKit project (not the demo!) as a sibling to the
workspace
5. Drag the libSkinKit.a to your project's "Link Binary with
Library" build phase.
6. Set header search path to: "$(BUILT_PRODUCTS_DIR)",
check “recursive”.
7. Add to "Other linker flags": "-ObjC".
Tuesday, December 11, 12

10. Installation
CocoaPods
1. Add dependency to your Podfile
platform :ios
pod 'SkinKit'
2. Run
$ pod install
3. Done!
Tuesday, December 11, 12

11. Usage
Tuesday, December 11, 12

12. Usage
AppDelegate
// import framework headers
#import <SkinKit/SkinKit.h>
// in application:didFinishLaunchingWithOptions:
SKSkinManager *manager = [SKSkinManager sharedSkinManager];
manager.skin = [[MyFancySkin alloc] init];
[manager applySkin];
Tuesday, December 11, 12

13. Usage
Customize regular views
// in your UIViewController subclass
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[[SKSkinManager sharedSkinManager] applySkinToView:self.view];
[[SKSkinManager sharedSkinManager] applySkinToScrollView:self.scrollView];
[[SKSkinManager sharedSkinManager] applySkinToTableView:self.tableView];
[[SKSkinManager sharedSkinManager] applySkinToCollectionView:self.collectionView];
// if you don't know
[[SKSkinManager sharedSkinManager] applySkinToGenericView:self.view];
}
Tuesday, December 11, 12

14. Usage
Automatically skin views
[SKSkinManager sharedSkinManager].automaticallyApplySkinForViews = YES;
A category on UIViewController takes
care of the rest!
Tuesday, December 11, 12

15. Skin creation
Tuesday, December 11, 12

16. Skin creation
3 approaches
1. Implement SKSkinDataSource protocol
2. Subclass SKSkin
3. Create Bundle
Tuesday, December 11, 12

17. Skin creation
3 approaches
1. Implement SKSkinDataSource protocol
2. Subclass SKSkin
3. Create Bundle
Tuesday, December 11, 12

18. Skin creation
SKSkinDataSource
@protocol SKSkinDataSource <NSObject>
@required
#pragma mark - Base colors
- (UIColor *)backgroundColor;
#pragma mark - Tint colors
- (UIColor *)baseTintColor;
- (UIColor *)accentTintColor;
#pragma mark - Navigation bar
- (UIColor *)navigationBarTintColor;
- (UIImage *)navigationBarBackgroundImage
ForBarMetrics:(UIBarMetrics)barMetrics;
#pragma mark - Controls
- (UIColor *)controlBaseTintColor;
- (UIColor *)controlAccentTintColor;
- (UIColor *)controlThumbTintColor;
// ...
@end
Tuesday, December 11, 12

19. Skin creation
SKSkinDataSource
@protocol SKSkinDataSource <NSObject>
@required
#pragma mark - Base colors
- (UIColor *)backgroundColor;
#pragma mark - Tint colors
- (UIColor *)baseTintColor;
- (UIColor *)accentTintColor;
#pragma mark - Navigation bar
- (UIColor *)navigationBarTintColor;
- (UIImage *)navigationBarBackgroundImage
ForBarMetrics:(UIBarMetrics)barMetrics;
#pragma mark - Controls
- (UIColor *)controlBaseTintColor;
- (UIColor *)controlAccentTintColor;
- (UIColor *)controlThumbTintColor;
// ...
@end
Tuesday, December 11, 12

20. Skin creation
Implement SKSkinDataSource
@interface MySkin : NSObject <SKSkinDataSource>
@end
@implementation MySkin
- (UIColor *)backgroundColor { return [UIColor lightGrayColor]; }
- (UIColor *)baseTintColor { return [UIColor darkGrayColor]; }
- (UIColor *)accentTintColor { return [UIColor purpleColor]; }
- (UIColor *)navigationBarTintColor { return [self baseTintColor]; }
- (UIColor *)controlBaseTintColor { return [self baseTintColor]; }
- (UIColor *)controlAccentTintColor { return [self accentTintColor]; }
- (UIColor *)controlThumbTintColor { return [UIColor yellowColor]; }
// ...
@end
Tuesday, December 11, 12

21. Skin creation
Implement SKSkinDataSource
@interface MySkin : NSObject <SKSkinDataSource>
@end
@implementation MySkin
- (UIColor *)backgroundColor { return [UIColor lightGrayColor]; }
- (UIColor *)baseTintColor { return [UIColor darkGrayColor]; }
- (UIColor *)accentTintColor { return [UIColor purpleColor]; }
- (UIColor *)navigationBarTintColor { return [self baseTintColor]; }
- (UIColor *)controlBaseTintColor { return [self baseTintColor]; }
- (UIColor *)controlAccentTintColor { return [self accentTintColor]; }
- (UIColor *)controlThumbTintColor { return [UIColor yellowColor]; }
// ...
@end
Tuesday, December 11, 12

22. Skin creation
Implement SKSkinDataSource
@interface MySkin : NSObject <SKSkinDataSource>
@end
@implementation MySkin
- (UIColor *)backgroundColor { return [UIColor lightGrayColor]; }
- (UIColor *)baseTintColor { return [UIColor darkGrayColor]; }
- (UIColor *)accentTintColor { return [UIColor purpleColor]; }
- (UIColor *)navigationBarTintColor { return [self baseTintColor]; }
- (UIColor *)controlBaseTintColor { return [self baseTintColor]; }
- (UIColor *)controlAccentTintColor { return [self accentTintColor]; }
- (UIColor *)controlThumbTintColor { return [UIColor yellowColor]; }
// ...
@end
Tuesday, December 11, 12

23. Skin creation
3 approaches
1. Implement SKSkinDataSource protocol
2. Subclass SKSkin
3. Create Bundle
Tuesday, December 11, 12

24. Skin creation
SKSkin
@interface SKSkin : NSObject <SKSkinDataSource>
// ...
@end
@implementation SKSkin
- (UIColor *)backgroundColor { return nil; }
- (UIColor *)baseTintColor { return nil; }
- (UIColor *)accentTintColor { return nil; }
- (UIColor *)navigationBarTintColor { return nil; }
// ...
@end
Returns nil for all methods defined in
SKSkinDataSource!
Tuesday, December 11, 12

25. Skin creation
Subclass SKSkin
@interface MySkin : SKSkin
@end
@implementation MySkin
- (UIColor *)navigationBarTintColor {
return [UIColor redColor];
}
- (UIColor *)backgroundColor {
return [[self navigationBarTintColor]
lighterColor];
}
@end
Tuesday, December 11, 12

26. Skin creation
Subclass SKSkin
@interface MySkin : SKSkin
@end
@implementation MySkin
- (UIColor *)navigationBarTintColor {
return [UIColor redColor];
}
- (UIColor *)backgroundColor {
return [[self navigationBarTintColor]
lighterColor];
}
@end
Tuesday, December 11, 12

27. Skin creation
Subclass SKSkin
@interface MySkin : SKSkin
@end
@implementation MySkin
- (UIColor *)navigationBarTintColor {
return [UIColor greenColor ];
}
- (UIColor *)backgroundColor {
return [[self navigationBarTintColor]
lighterColor];
}
@end
Tuesday, December 11, 12

28. Skin creation
Subclass SKSkin
@interface MySkin : SKSkin
@end
@implementation MySkin
- (UIColor *)navigationBarTintColor {
return [UIColor greenColor ];
}
- (UIColor *)backgroundColor {
return [[self navigationBarTintColor]
lighterColor];
}
@end
Tuesday, December 11, 12

29. Skin creation
Subclass SKSkin
@interface MySkin : SKSkin
@end
@implementation MySkin
- (UIColor *)navigationBarTintColor {
return [UIColor greenColor ];
}
- (UIColor *)backgroundColor {
return [[self navigationBarTintColor]
lighterColor];
}
@end
Tuesday, December 11, 12

30. Skin creation
SKDefaultSkin - a magic SKSkin subclass
@interface SKDefaultSkin : SKSkin
// ...
@end
@implementation SKDefaultSkin
// magic’s going on here!
@end
Makes useful assumptions that make skin
creation a lot more intuitive and faster!
Tuesday, December 11, 12

31. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor magentaColor];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
@end
Tuesday, December 11, 12

32. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor magentaColor];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
@end
Tuesday, December 11, 12

33. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor darkGrayColor ];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
@end
Tuesday, December 11, 12

34. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor darkGrayColor ];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
@end
Tuesday, December 11, 12

35. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor darkGrayColor ];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
@end
Tuesday, December 11, 12

36. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor darkGrayColor];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
- (UIColor *)backgroundColor {
return [UIColor underPageBackgroundColor];
}
@end
Tuesday, December 11, 12

37. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor darkGrayColor];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
- (UIColor *)backgroundColor {
return [UIColor underPageBackgroundColor];
}
@end
Tuesday, December 11, 12

38. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)baseTintColor {
return [UIColor darkGrayColor];
}
- (UIColor *)accentTintColor {
return [UIColor yellowColor];
}
- (UIColor *)backgroundColor {
return [UIColor underPageBackgroundColor];
}
@end
Tuesday, December 11, 12

39. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
- (UIImage *)navigationBarBackgroundImage
ForBarMetrics:(UIBarMetrics)metrics {
return [self imageNamed:@"navigationBarBackground"];
}
@end
Tuesday, December 11, 12

40. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
- (UIImage *)navigationBarBackgroundImage
ForBarMetrics:(UIBarMetrics)metrics {
return [self imageNamed:@"navigationBarBackground"];
}
@end
Tuesday, December 11, 12

41. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
- (UIImage *)navigationBarBackgroundImage
ForBarMetrics:(UIBarMetrics)metrics {
return [self imageNamed:@"navigationBarBackground"];
}
@end
Loads image from Bundle:
MyMagicSkin.bundle/Contents/Resources/navigationBarBackground.png
Tuesday, December 11, 12

42. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
- (NSString *)navigationBarBackgroundImageName {
return @"navigationBarBackground";
}
@end
Tuesday, December 11, 12

43. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
- (NSString *)navigationBarBackgroundImageName {
return @"navigationBarBackground";
}
@end
Tuesday, December 11, 12

44. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
@end
Tuesday, December 11, 12

45. Skin creation
Subclass SKDefaultSkin
@interface MyMagicSkin : SKDefaultSkin
@end
@implementation MyMagicSkin
- (UIColor *)accentTintColor {
return [UIColor blueColor];
}
@end
“navigationBarBackground” is the default
image name.
Tuesday, December 11, 12

46. Skin creation
Subclass SKDefaultSkin
Tuesday, December 11, 12

47. Skin creation
Subclass SKDefaultSkin
Tuesday, December 11, 12

48. Skin creation
3 approaches
1. Implement SKSkinDataSource protocol
2. Subclass SKSkin
3. Create Bundle
Tuesday, December 11, 12

49. Skin creation
Bundle
• A Bundle is a special kind of folder that has
the extension “.bundle”.
• Required when using custom images.
• Info.plist can contain style information.
• Can be used in addition or as alternative to
creating a skin class.
Tuesday, December 11, 12

50. Skin creation
Bundle structure
Contents/
Info.plist
Resources/
navigationBarBackground.png
navigationBarBackground@2x.png
...
Tuesday, December 11, 12

51. Skin creation
Bundle name
• When used in addtition to a skin class the
bundle name must match the class name.
• Otherwise the bundle name must be
specified when creating the skin instance:
[[SKSkin alloc] initWithBundleName:@"BundledSkin"];
[[SKDefaultSkin alloc] initWithBundleName:@"BundledSkin"];
Tuesday, December 11, 12

52. Skin creation
Info.plist
<key>CFBundleName</key>
<string>BundledSkin</string>
<key> SKSkinDataSource </key>
<dict>
! <key>baseTintColor</key>
! <dict>
! ! <key>hex</key>
<string>#553a26</string>
! </dict>
! <key>accentTintColor</key>
! <dict>
! ! <key>rgb</key>
! ! <string>0.8 0.6 0.2</string>
! </dict>
! <key>backgroundColor</key>
! <dict>
! ! <key>name</key>
! ! <string>underPageBackground</string>
! </dict>
</dict>
Tuesday, December 11, 12

53. Skin creation
Info.plist
<key>CFBundleName</key>
<string>BundledSkin</string>
<key> SKSkinDataSource </key>
<dict>
! <key>baseTintColor</key>
! <dict>
! ! <key>hex</key>
<string>#553a26</string>
! </dict>
! <key>accentTintColor</key>
! <dict>
! ! <key>rgb</key>
! ! <string>0.8 0.6 0.2</string>
! </dict>
! <key>backgroundColor</key>
! <dict>
! ! <key>name</key>
! ! <string>underPageBackground</string>
! </dict>
</dict>
Tuesday, December 11, 12

54. Skin creation
Info.plist
<key>CFBundleName</key>
<string>BundledSkin</string>
<key> SKSkinDataSource </key>
<dict>
! <key>baseTintColor</key>
! <dict>
! ! <key>hex</key>
<string>#553a26</string>
! </dict>
! <key>accentTintColor</key>
! <dict>
! ! <key>rgb</key>
! ! <string>0.8 0.6 0.2</string>
! </dict>
! <key>backgroundColor</key>
! <dict>
! ! <key>name</key>
! ! <string>underPageBackground</string>
! </dict>
</dict>
Tuesday, December 11, 12

55. Outlook
Tuesday, December 11, 12

56. Outlook
Planned features and improvements
• Shared skins.
• Custom layout.
• UICollectionView customization.
• Skin generator app (OS X or iOS).
• CSS files.
Tuesday, December 11, 12