1
iOS Theming EngineRuotger Deecke, eBay
Who am IRuotger Deecke10 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
Our challengeWe build 10 classifieds apps for 9 countries from
one code base.
Our challengeThey all look different!
Our challengeRedesign for iOS 7
Redesign: Style guideHave your designer create a styleguide!
Why?Makes implementation a lot easierA good document to discuss
mattersHelps you and your designer focusA good exercise in
discipline
Creating the style guideColorsTypographyFunctional styles
Designing a theme
Old theming engineProblems:Complicated One-Size-Fits-All
solution for iOS 4Many dependencies all over the whole projectUses
plist files to store theming informationGeneral code quality ...
leaves room for improvement
New theming engine needed
New theming engineDesign goals:Reasonably simpleFlexible enough
to accomodate for changing needsAll theme information in
codeCapture as many patterns as possible
Make it as simple as possible but no simpler!- Albert
Einstein
New theming engineThree areas of responsibility: Encapsulating
the theme information.Applying the theme with UIAppearanceOdds and
ends that UIAppearance cannot do for us.
Encapsulating the informationSome things are the same in every
appSome things are the same in every Gumtree App or Kijiji AppSome
things are specific one single App.
Inheritance!
Encapsulating the information
Three Levels of Indirection
And iOS 6 ...?Theme Overlay:
UIAppearanceIntroduced by Apple with iOS 5Useful since iOS
6Still very useful on iOS 7
UIAppearanceGet a UIAppearanceProxy for a class:UIView
*appearanceProxy = UIView.appearance;
Apply theming information once to a UIAppearance
proxyappearanceProxy.backgroundColor = UIColor.redColor;
After that Cocoa will create new UI elements already themed
UIAppearanceThere are some things UIAppearance cant do.For
example: setting a text style to a button.But you can write your
own UI_APPEARANCE_SELECTOR
Read up on it:Apple Docshttp://nshipster.com/uiappearance
Lessons we learneddont underestimate the amount of theme
information that an app has.Your design will change many timesIn
design there are no hard rules but merely patternsWork closely with
your designer.Try to come up with the simplest solution that works
for you.
LinksWhat 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
?Ruotger Deecke, [email protected]
4x Gumtree branded (AU, UK, IE, ZA), 3x Kijiji (CAN, TW, IT), 1x
AlaMaula (AR), 2x eBay (US, IT).CA US AU IT - AR
CA - UK AU - IT - AR
Separate out the colors that you will use. Try to find a small
palette of colors!Separate out the typography you will use. Also
try to find a small set of fonts and sizes.I shouldnt say that.
Your designer should know that, right.
This is how the style guide looks for AU. Probably to small to
see.
Look at the clickable style. It Helv. Reg. 14pt and Color 2
Three major areas of responsibility we want to separateAU CAN -
UKNSHipster Mattt
