Your SlideShare is downloading. ×
SkinKit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

SkinKit

355
views

Published on

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

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
355
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SkinKit Dominique d’ArgentTuesday, December 11, 12
  • 2. Agenda • Overview • Installation • Usage • Skin creation • OutlookTuesday, December 11, 12
  • 3. OverviewTuesday, 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. InstallationTuesday, 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 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. Installation CocoaPods 1. Add dependency to your Podfile platform :ios pod SkinKit 2. Run $ pod install 3. Done!Tuesday, December 11, 12
  • 11. UsageTuesday, 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 dont 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 creationTuesday, December 11, 12
  • 16. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, December 11, 12
  • 17. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, 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; // ... @endTuesday, 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; // ... @endTuesday, 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]; } // ... @endTuesday, 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]; } // ... @endTuesday, 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]; } // ... @endTuesday, December 11, 12
  • 23. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, 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]; } @endTuesday, 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]; } @endTuesday, 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]; } @endTuesday, 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]; } @endTuesday, 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]; } @endTuesday, 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]; } @endTuesday, December 11, 12
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)accentTintColor { return [UIColor blueColor]; } - (NSString *)navigationBarBackgroundImageName { return @"navigationBarBackground"; } @endTuesday, December 11, 12
  • 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. Skin creation Subclass SKDefaultSkin @interface MyMagicSkin : SKDefaultSkin @end @implementation MyMagicSkin - (UIColor *)accentTintColor { return [UIColor blueColor]; } @endTuesday, 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 SKDefaultSkinTuesday, December 11, 12
  • 47. Skin creation Subclass SKDefaultSkinTuesday, December 11, 12
  • 48. Skin creation 3 approaches 1. Implement SKSkinDataSource protocol 2. Subclass SKSkin 3. Create BundleTuesday, 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. OutlookTuesday, 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