Presentation

CSS in iOSVjacheslav Volodko

vsInterface BuilderUI from code

,

Interface BuilderStrong sides:Rapid developmentWYSISYG - VisibilityEasy operate with Autolayout

Weak sides:Poor flexibilityNot all properties supported: UIKit, Core Animation properties

, 1986 ( 1988), 29 , , 1985.

UI from codeStrong sides:Good flexibilityFull power of UIKit and Core Animation

Weak sides:Slow development speedReally slow work with auto-layoutPoor visibility: No WYSIWYG

WYSIWYG:

Interface BuilderIn Interface Buidler UI is 2-component system: View hierarchy + Layout

In fact, UI is 3-component system: View hierarchy + Layout +Style

let label1 = UILabel()label1.textColor = UIColor.redColor()label1.font = UIFont.systemFontOfSize(15)label1.shadowColor = UIColor.grayColor()label1.shadowOffset = CGSize(width: -1, height: -1)label1.text = "Hello"

/// ...

let label2 = UILabel()label2.textColor = UIColor.redColor()label2.font = UIFont.systemFontOfSize(15)label2.shadowColor = UIColor.grayColor()label2.shadowOffset = CGSize(width: -1, height: -1)label2.text = "World"StylePalette: color palette, font palette, constant sets, etc.Style classes: reusable sets of propertiesextension UILabel { static func myLabel() -> UILabel { let label = UILabel() label.textColor = UIColor.redColor() label.font = UIFont.systemFontOfSize(15) label.shadowColor = UIColor.grayColor() label.shadowOffset = CGSize(width: -1, height: -1) return label } }

/// ...

let label1 = UILabel.myLabel()label1.text = "Hello"

/// ...

let label2 = UILabel.myLabel()label2.text = "World"

Prototype pattern

- :Prototype - style class

CSS for Style Not W3C CSS standard for Web. CSS-like styling library, one of Classy - http://classy.asInterfaCSS - https://github.com/tolo/InterfaCSSFreestyle from Pixate - http://www.freestyle.orgNativeCSS - http://nativecss.commany others

Apply CSS-like stylesheets to view hierarchies objc-runtime poweredOpen sourceWell documentedClassy

1. Create stylesheet resource files:Classystylesheet.cas@import "fonts.cas";@import "color-palette.cas";

/* Object class */ UINavigationBar { tintColor: $color-tint; titleTextAttributes: @{ font: $font-title-regular; foregroundColor: white; };}/* Regular fonts */$font-regular = "BloggerSans" 18.0;$font-regular-bold = "Blogger-Bold" 18.0;...fonts.cas$color-tint = #73A2B1;$color-user = #628A5C;$color-user-light = #A2BF8C;$color-background = white;$color-text = rgb(160, 180, 220);...color-palette.cas/* Style class */^UIView.background { backgroundColor: $color-background;}$color-tint;$font-title-regular$color-backgroundbackground

Object class - UIAppearance objectsStyle class - applied to views directly

Classy2. Object Class is applied via Appearance objects automatically3. Style Class is should be installed manually per-view:

in Interface Builder:or from code:

self.view.cas_styleClass = "background"

Classy4. (Optinal) Setup live updates: if TARGET_IPHONE_SIMULATOR == 1 { CASStyler.defaultStyler().watchFilePath = _CASAbsoluteFilePath(__FILE__, "Stylesheets/stylesheet.cas")}5. Launch!

1. Show the same workflow with date label on IB2. Show similar in code

Vjacheslav Volodjko (VV) - Show the same workflow with date label on IBShow similar in code // UIContentSizeCategoryDidChangeNotificationfunc contentSizeCategoryDidChange(notification: NSNotification) { if let newSizeCategory = notification.userInfo?[UIContentSizeCategoryNewValueKey] as? String { if let newFont = UIFont(name: "BloggerSans", size: self.sizeForSizeCategory(newSizeCategory)) { CASStyler.defaultStyler().setValue(newFont, forKey: "$font-regular") } }}Classy runtime variables UILabel.fullname { font: $font-regular;}

Set $font-regular value in runtimestylesheet.cas:For example:

Best practicesStylesheet design is work for designer

- . . CSS, - CSS. .

Best practicesSome CSS frameworks can layout (e.g. InterfaCSS):Dont do it. Really.

Layout in stylesheets ties styleclass to concrete view hierarchy, this is bad. UIEdgeInsets, LayoutMargins not count)

Poor UITraitCollection support (Classy only): no way to customize per iPhone/iPad, landscape/portrait within stylesheet.No animations supportNo PaintCode images supportNo AppKit supportWeak sides

ConclusionsDivide et empera:UI = View Hierarchy + Layout + StyleInterface Builder vs UI from code? No matter:Interface Builder + CSS UI from code + CSS

Interface Builder + CSSRapid developmentWYSISYG - VisibilityEasy operate with AutolayoutGood flexibilityAll UIKit and Core Animation properties supported

UI from code + CSS

Rapid developmentWYSISYG - VisibilityEasy operate with AutolayoutGood flexibilityAll UIKit and Core Animation properties supported

Thanks for attention

Vjacheslav Volodko

https://github.com/killobatt/CSSDemoDemo:skype: killobattvvolodko@lohika.comkillobatt@gmail.com

P.S. Performance No benchmark tests. Sorry:) Applying stylesheet = Parse CSS + Apply properties to UIViews:CSS is parsed once at launch time, takes