iOS Theming Engine
Ruotger Deecke,
eBay
Who am I
Ruotger Deecke
10 years experience developing for Cocoa on OS X and iOS.
Working in Berlin, Germany for eBay Clas...
Our challenge
We build 10
classifieds apps for 9
countries from one
code base.
Our challenge
They all look different!
Our challenge
- Redesign for iOS 7
Redesign: Style guide
Have your designer create a styleguide! Why?
- Makes implementation a lot easier
- A good document t...
Creating the style guide
- Colors
- Typography
- Functional styles
Designing a theme
Old theming engine
Problems:
-Complicated One-Size-Fits-All solution for iOS 4
-Many dependencies all over the whole proje...
New theming engine
Design goals:
- Reasonably simple
- Flexible enough to accomodate for changing needs
- All theme inform...
New theming engine
Three areas of responsibility:
- Encapsulating the theme information.
- Applying the theme with UIAppea...
Encapsulating the information
- Some things are the same in every app
- Some things are the same in every Gumtree App or K...
Encapsulating the information
Base
KijijiGumtree
TWCAAUUK
Three Levels of Indirection
And iOS 6 ...?
Base
KijijiGumtree
TWCAAUUK
Base6
Kijiji6Gumtree6
TW6CA6AU6UK6
Theme Overlay:
UIAppearance
- Introduced by Apple with iOS 5
- Useful since iOS 6
- Still very useful on iOS 7
UIAppearance
- Get a UIAppearanceProxy for a class:
UIView *appearanceProxy = UIView.appearance;
- Apply theming informati...
UIAppearance
- There are some things UIAppearance can‘t do.
- For example: setting a text style to a button.
- But you can...
Lessons we learned
- don‘t underestimate the amount of theme information that an
app has.
- Your design will change many t...
Links
What other people have done:
-NUI (https://github.com/tombenner/nui),
-NativeCss (http://nativecss.com/),
-Classy (h...
Вопросы?
Ruotger Deecke,
eBay
rdeecke@ebay.com
Upcoming SlideShare
Loading in …5
×

CodeFest 2014. Ruotger Deecke — iOS Theming Engine

7,960 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,960
On SlideShare
0
From Embeds
0
Number of Embeds
813
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CodeFest 2014. Ruotger Deecke — iOS Theming Engine

  1. 1. iOS Theming Engine Ruotger Deecke, eBay
  2. 2. Who am I Ruotger Deecke 10 years experience developing for Cocoa on OS X and iOS. Working in Berlin, Germany for eBay Classifieds. My team is based in Portland/OR, USA
  3. 3. Our challenge We build 10 classifieds apps for 9 countries from one code base.
  4. 4. Our challenge They all look different!
  5. 5. Our challenge - Redesign for iOS 7
  6. 6. Redesign: Style guide Have your designer create a styleguide! Why? - Makes implementation a lot easier - A good document to discuss matters - Helps you and your designer focus - A good exercise in discipline
  7. 7. Creating the style guide - Colors - Typography - Functional styles
  8. 8. Designing a theme
  9. 9. Old theming engine Problems: -Complicated One-Size-Fits-All solution for iOS 4 -Many dependencies all over the whole project -Uses plist files to store theming information -General code quality ... „leaves room for improvement“ New theming engine needed
  10. 10. New theming engine Design goals: - Reasonably simple - Flexible enough to accomodate for changing needs - All theme information in code - Capture as many patterns as possible „Make it as simple as possible but no simpler!“ - Albert Einstein
  11. 11. New theming engine Three areas of responsibility: - Encapsulating the theme information. - Applying the theme with UIAppearance - Odds and ends that UIAppearance cannot do for us.
  12. 12. Encapsulating the information - Some things are the same in every app - Some things are the same in every Gumtree App or Kijiji App - Some things are specific one single App. Inheritance!
  13. 13. Encapsulating the information Base KijijiGumtree TWCAAUUK
  14. 14. Three Levels of Indirection
  15. 15. And iOS 6 ...? Base KijijiGumtree TWCAAUUK Base6 Kijiji6Gumtree6 TW6CA6AU6UK6 Theme Overlay:
  16. 16. UIAppearance - Introduced by Apple with iOS 5 - Useful since iOS 6 - Still very useful on iOS 7
  17. 17. UIAppearance - Get a UIAppearanceProxy for a class: UIView *appearanceProxy = UIView.appearance; - Apply theming information once to a UIAppearance proxy appearanceProxy.backgroundColor = UIColor.redColor; - After that Cocoa will create new UI elements already themed
  18. 18. UIAppearance - There are some things UIAppearance can‘t do. - For example: setting a text style to a button. - But you can write your own UI_APPEARANCE_SELECTOR Read up on it: - Apple Docs - http://nshipster.com/uiappearance
  19. 19. Lessons we learned - don‘t underestimate the amount of theme information that an app has. - Your design will change many times - In design there are no hard rules but merely patterns - Work closely with your designer. - Try to come up with the simplest solution that works for you.
  20. 20. Links What other people have done: -NUI (https://github.com/tombenner/nui), -NativeCss (http://nativecss.com/), -Classy (http://classy.as/), -UISS (https://github.com/robertwijas/UISS), -Slash (https://github.com/chrisdevereux/Slash), NSHipster – UIAppearance: -http://nshipster.com/uiappearance
  21. 21. Вопросы? Ruotger Deecke, eBay rdeecke@ebay.com

×