SkinKit                           Dominique d’ArgentTuesday, December 11, 12
Agenda                   • Overview                   • Installation                   • Usage                   • Skin cr...
OverviewTuesday, December 11, 12
Overview                Description             “SkinKit is an iOS framework that allows to easily                  custom...
Overview                Features                   • Simple API for loading skins.                   • Loading skins from ...
Overview                Features                   • Simple API for loading skins.                   • Loading skins from ...
InstallationTuesday, December 11, 12
Installation                Requirements                   • iOS 6.0 or newer.                   • Xcode 4.5 or newer.Tues...
Installation                Workspace                   1. Get a copy from github.com/nubbel/SkinKit                   2. ...
Installation                CocoaPods               1. Add dependency to your Podfile                           platform :i...
UsageTuesday, December 11, 12
Usage                AppDelegate                // import framework headers                #import <SkinKit/SkinKit.h>    ...
Usage                Customize regular views     // in your UIViewController subclass     - (void)viewWillAppear:(BOOL)ani...
Usage                Automatically skin views               [SKSkinManager sharedSkinManager].automaticallyApplySkinForVie...
Skin creationTuesday, December 11, 12
Skin creation                3 approaches                   1. Implement SKSkinDataSource protocol                   2. Su...
Skin creation                3 approaches                   1. Implement SKSkinDataSource protocol                   2. Su...
Skin creation                SKSkinDataSource               @protocol SKSkinDataSource <NSObject>               @required ...
Skin creation                SKSkinDataSource               @protocol SKSkinDataSource <NSObject>               @required ...
Skin creation                Implement SKSkinDataSource               @interface MySkin : NSObject <SKSkinDataSource>     ...
Skin creation                Implement SKSkinDataSource    @interface MySkin : NSObject <SKSkinDataSource>    @end    @imp...
Skin creation                Implement SKSkinDataSource    @interface MySkin : NSObject <SKSkinDataSource>    @end    @imp...
Skin creation                3 approaches                   1. Implement SKSkinDataSource protocol                   2. Su...
Skin creation                SKSkin                @interface SKSkin : NSObject <SKSkinDataSource>                // ...  ...
Skin creation                Subclass SKSkin               @interface MySkin : SKSkin               @end               @im...
Skin creation                Subclass SKSkin               @interface MySkin : SKSkin               @end               @im...
Skin creation                Subclass SKSkin               @interface MySkin : SKSkin               @end               @im...
Skin creation                Subclass SKSkin               @interface MySkin : SKSkin               @end               @im...
Skin creation                Subclass SKSkin               @interface MySkin : SKSkin               @end               @im...
Skin creation                SKDefaultSkin - a magic SKSkin subclass                @interface SKDefaultSkin : SKSkin     ...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin               @interface MyMagicSkin : SKDefaultSkin               @en...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkin        @interface MyMagicSkin : SKDefaultSkin        @end        @impl...
Skin creation                Subclass SKDefaultSkinTuesday, December 11, 12
Skin creation                Subclass SKDefaultSkinTuesday, December 11, 12
Skin creation                3 approaches                   1. Implement SKSkinDataSource protocol                   2. Su...
Skin creation                Bundle                   • A Bundle is a special kind of folder that has                     ...
Skin creation                Bundle structure               Contents/                 Info.plist                 Resources...
Skin creation                Bundle name                   • When used in addtition to a skin class the                   ...
Skin creation                Info.plist               <key>CFBundleName</key>               <string>BundledSkin</string>  ...
Skin creation                Info.plist               <key>CFBundleName</key>               <string>BundledSkin</string>  ...
Skin creation                Info.plist               <key>CFBundleName</key>               <string>BundledSkin</string>  ...
OutlookTuesday, December 11, 12
Outlook                Planned features and improvements                   •       Shared skins.                   •      ...
Upcoming SlideShare
Loading in …5
×

SkinKit

793 views
743 views

Published on

SkinKit is an iOS-Framework for customizing your app's appearance using skins.

Get the project from Github: https://github.com/nubbel/SkinKit
Get the beautiful (awesome effects inlcuded!) Keynote here: https://dl.dropbox.com/u/2523651/SkinKit.zip

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
793
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SkinKit

  1. 1. SkinKit Dominique d’ArgentTuesday, December 11, 12
  2. 2. Agenda • Overview • Installation • Usage • Skin creation • OutlookTuesday, December 11, 12
  3. 3. OverviewTuesday, December 11, 12
  4. 4. Overview Description “SkinKit is an iOS framework that allows to easily customize the appearance of your app.”Tuesday, December 11, 12
  5. 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. 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. 7. InstallationTuesday, December 11, 12
  8. 8. Installation Requirements • iOS 6.0 or newer. • Xcode 4.5 or newer.Tuesday, December 11, 12
  9. 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 projects "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. 10. Installation CocoaPods 1. Add dependency to your Podfile platform :ios pod SkinKit 2. Run $ pod install 3. Done!Tuesday, December 11, 12
  11. 11. UsageTuesday, December 11, 12
  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. 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 dont know [[SKSkinManager sharedSkinManager] applySkinToGenericView:self.view]; }Tuesday, December 11, 12
  14. 14. Usage Automatically skin views [SKSkinManager sharedSkinManager].automaticallyApplySkinForViews = YES; A category on UIViewController takes care of the rest!Tuesday, December 11, 12
  15. 15. Skin creationTuesday, December 11, 12
  16. 16. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, December 11, 12
  17. 17. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, December 11, 12
  18. 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; // ... @endTuesday, December 11, 12
  19. 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; // ... @endTuesday, December 11, 12
  20. 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]; } // ... @endTuesday, December 11, 12
  21. 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]; } // ... @endTuesday, December 11, 12
  22. 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]; } // ... @endTuesday, December 11, 12
  23. 23. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, December 11, 12
  24. 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. 25. Skin creation Subclass SKSkin @interface MySkin : SKSkin @end @implementation MySkin - (UIColor *)navigationBarTintColor { return [UIColor redColor]; } - (UIColor *)backgroundColor { return [[self navigationBarTintColor] lighterColor]; } @endTuesday, December 11, 12
  26. 26. Skin creation Subclass SKSkin @interface MySkin : SKSkin @end @implementation MySkin - (UIColor *)navigationBarTintColor { return [UIColor redColor]; } - (UIColor *)backgroundColor { return [[self navigationBarTintColor] lighterColor]; } @endTuesday, December 11, 12
  27. 27. Skin creation Subclass SKSkin @interface MySkin : SKSkin @end @implementation MySkin - (UIColor *)navigationBarTintColor { return [UIColor greenColor ]; } - (UIColor *)backgroundColor { return [[self navigationBarTintColor] lighterColor]; } @endTuesday, December 11, 12
  28. 28. Skin creation Subclass SKSkin @interface MySkin : SKSkin @end @implementation MySkin - (UIColor *)navigationBarTintColor { return [UIColor greenColor ]; } - (UIColor *)backgroundColor { return [[self navigationBarTintColor] lighterColor]; } @endTuesday, December 11, 12
  29. 29. Skin creation Subclass SKSkin @interface MySkin : SKSkin @end @implementation MySkin - (UIColor *)navigationBarTintColor { return [UIColor greenColor ]; } - (UIColor *)backgroundColor { return [[self navigationBarTintColor] lighterColor]; } @endTuesday, December 11, 12
  30. 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. 31. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)baseTintColor { return [UIColor magentaColor]; } - (UIColor *)accentTintColor { return [UIColor yellowColor]; } @endTuesday, December 11, 12
  32. 32. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)baseTintColor { return [UIColor magentaColor]; } - (UIColor *)accentTintColor { return [UIColor yellowColor]; } @endTuesday, December 11, 12
  33. 33. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)baseTintColor { return [UIColor darkGrayColor ]; } - (UIColor *)accentTintColor { return [UIColor yellowColor]; } @endTuesday, December 11, 12
  34. 34. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)baseTintColor { return [UIColor darkGrayColor ]; } - (UIColor *)accentTintColor { return [UIColor yellowColor]; } @endTuesday, December 11, 12
  35. 35. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)baseTintColor { return [UIColor darkGrayColor ]; } - (UIColor *)accentTintColor { return [UIColor yellowColor]; } @endTuesday, December 11, 12
  36. 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]; } @endTuesday, December 11, 12
  37. 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]; } @endTuesday, December 11, 12
  38. 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]; } @endTuesday, December 11, 12
  39. 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"]; } @endTuesday, December 11, 12
  40. 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"]; } @endTuesday, December 11, 12
  41. 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.pngTuesday, December 11, 12
  42. 42. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)accentTintColor { return [UIColor blueColor]; } - (NSString *)navigationBarBackgroundImageName { return @"navigationBarBackground"; } @endTuesday, December 11, 12
  43. 43. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)accentTintColor { return [UIColor blueColor]; } - (NSString *)navigationBarBackgroundImageName { return @"navigationBarBackground"; } @endTuesday, December 11, 12
  44. 44. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)accentTintColor { return [UIColor blueColor]; } @endTuesday, December 11, 12
  45. 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. 46. Skin creation Subclass SKDefaultSkinTuesday, December 11, 12
  47. 47. Skin creation Subclass SKDefaultSkinTuesday, December 11, 12
  48. 48. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, December 11, 12
  49. 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. 50. Skin creation Bundle structure Contents/ Info.plist Resources/ navigationBarBackground.png navigationBarBackground@2x.png ...Tuesday, December 11, 12
  51. 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. 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. 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. 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. 55. OutlookTuesday, December 11, 12
  56. 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

×