PLC/vPLC>> S.swift>> 返回
项目作者： alexdrone

项目描述 ：
Get strong typed, autocompleted resources, color swatches and font styles in Swift projects from a simple YAML stylesheet.
高级语言： Swift
项目地址: git://github.com/alexdrone/S.swift.git
创建时间： 2016-02-26T13:44:50Z
项目社区：https://github.com/alexdrone/S.swift
开源协议：BSD 3-Clause "New" or "Revised" License
下载


S.swift

Bin
Platform
Build

Get strong typed, autocompleted resources, color swatches and font styles in Swift projects (iOS or OSX) from a simple, human readable Yaml stylesheet

S is inspired from (and complementary to) R and it is just a command line tool — you don’t have to import any framework in your project!

Overview

This:

  2. Color:
  3.   blue: "#00ff00" #values can be colors, font, images, numbers or bool
  4.   red: #properties can also have different values (when different conditions match)
  5.     "horizontal = compact and idiom = phone": "#aa0000" 
  6.     "default": "#ff0000"
  8. Typography:
  9.   small: Font(Helvetica, 12) #font (use System(-Weight*) or SystemBold as font names to use the system font)
  10.   medium: Font(System-Semibold, 14)
  12. FooView:
  13.   background: $Color.red #properties can also redirect to other style's properties
  14.   font: $Typography.small
  15.   defaultMargin: 10
  16.   textAlignment: Enum(NSTextAlignment.center)
  17.   image: Image(myImage)
  18.   aPoint: Point(10,10)
  19.   aSize: Size(100,100)
  20.   aRect: Rect(10,10,100,100)
  21.   aEdgeInsets: Insets(10,10,100,100)

Check out Style.yaml in the Demo project to see more examples of property definitions. Many more constructs such as inheritance and extensions are available.

is transformed into a strongly typed, stylesheet in swift (for brevity’s sake only the interface of the generated code is shown below)

  2. ///Entry point for the app stylesheet
  3. struct S {
  5.     public static struct let Color: ColorAppearanceProxy
  6.     public struct ColorAppearanceProxy {
  7.         public var blue: UIColor { ... }
  8.         public func redProperty(traitCollection: UITraitCollection? = default) -> UIColor
  9.         public var red: UIColor { ... }
  10.     }
  12.     public static struct let Typography: TypographyAppearanceProxy
  13.     public struct TypographyAppearanceProxy {
  14.         public var small: UIFont { ... }
  15.     }
  17.     public static struct let FooView: FooViewAppearanceProxy
  18.     public struct FooViewAppearanceProxy {
  19.         public var margin: Float { ... }
  20.         public var font: UIFont { ... }
  21.         public var opaque: Bool { ... }
  22.         public var textAlignment: NSTextAlignment { ... }
  23.         public var image: NSImage { ... }
  24.         public var aPoint: CGPoint { ... }
  25.         public var aSize: CGSize { ... }
  26.         public var aRect: CGRect { ... }
  27.         public var aEdgeInsets: UIEdgeInsets { ... }
  28.     }
  29. }

S supports appearance proxy inheritance, properties override and extensions generation for your views. These are all different code-generation options that can be passed as argument to the generator. Check out Style.generated.swift in the Demo project.

You can access to a stylesheet property (in this example Color.red) by simply referring to as S.Color.red in your code.

The stylesheet supports colors, fonts, images, metrics and bools.

Like in the example shown above, S supports conditions for the value that take the screen size, the size class and the user interaction idiom into account.
(in this case S.Color.red is a different value given a different screen size/size class/idiom). See the stylesheet section for more info about it.

Installation

One liner. Copy and paste this in your terminal.

  1. curl "https://raw.githubusercontent.com/alexdrone/S.swift/master/sgen" > sgen && mv sgen /usr/local/bin/sgen && chmod +x /usr/local/bin/sgen

The usage of the generator is as simple as 

  1. sgen $SRCROOT

Advanced usage

  1. sgen PROJECT_PATH (--platform ios|osx) (--extensions internal|public) (--objc)
  • --platform [osx,ios] use the platform argument to target the desired platform. The default one is iOS.
  • --objc Generates Swift code that is interoperable with Objective C (@objc modifier, NSObject subclasses)
  • --appearance_proxy [internal,public] Creates extensions for the views that have a style defined in the stylesheet. public and internal define what the extensions’ visibility modifier should be.

Adding S as a build script

You can integrate S in your build phases by adding it as a build script.

  • Click on your TARGET abd go the Build Phases tab.
  • Click on the + and select New Run Script Phase

GitHub Logo

  • Expand the Run script section
  • Add sgen $SRCROOT in the script

GitHub Logo

  • Now you can create your .yml stylesheet. Make sure it is placed inside your project source root ($SRCROOT)

GitHub Logo

  • The first time you build your target (with cmd + B) drag the generated file inside the project. The generated swift file sits next to your stylesheet so, simply right click on your yaml stylesheet, select Show in Finder and drag the *.generated.swift file inside your project

GitHub Logo

  • Et voilà! Every time you will build your target the generated file will be updated as well.

Stylesheet

The following is the grammar for the YAML stylesheet.
Is supports simple values (bool, metrics, fonts, colors, images and enums), conditional values and redirects (by simply using $ + Section.key)

  2. SECTION_1:
  3.   KEY: VALUE     #simple value
  4.   KEY:             #conditional value
  5.       "CONDITION": VALUE
  6.       "CONDITION": VALUE
  7.       ...
  8.       "default": VALUE    #every conditional value should have a 'default' condition
  9.   KEY: VALUE
  11. SECTION_2:
  12.   KEY: VALUE
  13.   KEY: $SECTION_1.KEY #redirect
  15. SECTION_3 < SECTION_2: #this style inherits from another one
  16.   KEY: VALUE
  17.   KEY: $SECTION.KEY #redirect

The value part can be formed in the following ways:

  1.     VALUE := COLOR | FONT | NUMBER | BOOL | IMAGE | ENUM | POINT | SIZE | RECT | EDGE_INSETS | REDIRECT
  2.     COLOR := "#HEX" // e.g. "#aabbcc"
  3.     FONT := Font(FONT_NAME(-WEIGHT)?, NUMBER) // e.g. Font(Arial, 12) or Font(System-Black, 14)
  4.     WEIGHT := UltraLight | Thin | Light | Regular | Medium | Semibold | Bold | Heavy | Black
  5.     IMAGE := Image(IMAGE_NAME) // e.g. Image(cursor)
  6.     NUMBER := (0-9)+ //e.g. 42, a number
  7.     BOOL := true|false
  8.     ENUM := Enum(Type.Value)
  9.     POINT := Point(NUMBER, NUMBER)
  10.     SIZE := Size(NUMBER, NUMBER)
  11.     RECT := Rect(NUMBER, NUMBER, NUMBER, NUMBER)
  12.     EDGE_INSETS := Insets(NUMBER, NUMBER, NUMBER, NUMBER)
  13.     REDIRECT := $SECTION.KEY //e.g. $Typography.small

A condition has instead the following form

  1.     CONDITION := 'EXPR and EXPR and ...' //e.g. 'width < 200 and vertical = compact and idiom = phone'
  2.     EXPR := SIZE_CLASS_EXPR | SIZE_EXPR | IDIOM_EXPR | CONTENT_SIZE_CATEGORY_EXPR
  3.     SIZE_CLASS_EXPR := (horizontal|vertical)(=|!=)(regular|compact) // e.g. horizontal = regular
  4.     SIZE_EXPR := (width|height)(<|<=|=|!=|>|>=)(SIZE_PX) //e.g. width > 320
  5.     CONTENT_SIZE_CATEGORY_EXPR := category (=|!=) (xs|s|m|l|xl|xxl|xxxl|am|al|axl|axxl|axxxl) //e.g category = m
  6.     SIZE_PX := (0-9)+ //e.g. 42, a number
  7.     IDIOM_EXPR := (idiom)(=|!=)(pad|phone) //e.g. idiom = pad

Credits

S uses YamlSwift from behrang as Yaml parser