Fashion

Conventional way

Define styles in a stylesheet

enum Style: String, StringConvertible {
  case customButton

  var string: String {
    return rawValue
  }
}

final class MainStylesheet: Stylesheet {
  func define() {
    share { (label: UILabel) in
      label.textColor = .blue
      label.numberOfLines = 2
      label.adjustsFontSizeToFitWidth = true
    }

    // register("custom-button") { (button: UIButton) in
    register(Style.customButton) { (button: UIButton) in
      button.backgroundColor = .red
      button.setTitleColor(.white, for: .normal)
    }
  }
}

Register a stylesheet

Fashion.register([MainStylesheet()])

Apply a style

let button = UIButton() // let button = UIButton(styles: "custom-button")
button.apply(styles: Style.customButton) // backgroundColor => .red

let label = UILabel()
addSubview(label) // textColor => .blue

Stylesheet

Stylesheet is a protocol that helps you to organize your styles by registering them in define method:

Register a style

// Registers stylization closure with the specified name.
register("card-view") { (view: UIView) in
  view.backgroundColor = .white
  view.layer.masksToBounds = false
  view.layer.shadowColor = UIColor.black.cgColor
  view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
  view.layer.shadowOpacity = 0.2
  view.layer.cornerRadius = 8
}

Unregister a style

// Unregisters stylization closure with the specified name.
unregister("card-view")

Share a style

The style will be shared across all objects of this type, considering inheritance.

// All views will have red background color.
share { (view: UIView) in
  view.backgroundColor = .red
}

// All table views will have white background color, it overrides the red
// background registered above.
share { (tableView: UITableView) in
  tableView.backgroundColor = .white
  tableView.tableFooterView = UIView(frame: CGRect.zero)
  tableView.separatorStyle = .none
  tableView.separatorInset = .zero
}

Unshare a style

// Unregisters shared stylization closure for the specified type.
unshare(UITableView.self)

UIAppearance

share is the recommended method to customize the appearance of class’s instances, but sometimes we still have to use UIAppearance because of default styles set on the class’s appearance proxy when a view enters a window.

shareAppearance { (barButtonItem: UIBarButtonItem) in
  barButtonItem.setTitleTextAttributes([
    NSFontAttributeName : UIFont(name: "HelveticaNeue-Light", size: 12)!,
    NSForegroundColorAttributeName : UIColor.red],
    for: .normal)
}

Stylist

When you register/share your styles in the Stylesheet all the actual work is done by Stylist under the hood, so if you want more freedom it’s possible to use Stylist class directly. You can create a new instance Stylist() or use the global variable Stylist.master which is used in stylesheets.

let stylist = Stylist()

stylist.register("card-view") { (view: UIView) in
  view.backgroundColor = .white
  view.layer.cornerRadius = 8
}

stylist.unregister("card-view")

stylist.share { (tableView: UITableView) in
  tableView.backgroundColor = .white
  tableView.tableFooterView = UIView(frame: .zero)
}

stylist.unshare(UITableView.self)

Style

Use generic Style struct if you want to have more control on when, where and how styles are applied in your app. Then you don’t need to deal with style keys, register or share closures.

let label = UILabel()
let style = Style<UILabel> { label in
  label.backgroundColor = UIColor.black
  label.textColor = UIColor.white
  label.numberOfLines = 10
}

// The same as style.apply(to: label)
label.apply(style: style)

It’s also possible to create a style by composing multiple ones:

let label = UILabel()
let style1 = Style<UILabel> { label in
  label.backgroundColor = UIColor.black
}
let style2 = Style<UILabel>{ label in
  label.textColor = UIColor.white
}

let composedStyle = Style.compose(style1, style2)

// The same as composedStyle.apply(to: label)
label.apply(style: composedStyle)

UIView extensions

It’s super easy to apply previously registered styles with UIView extensions.

With convenience initializer

// A single style
let button = UIButton(styles: "custom-button")

// Multiple styles should be separated by a space
let label = UILabel(styles: "content-view cool-label")

// The initialized also accepts StringConvertible, so something other
// than magic String could also be used

enum Style: String, StringConvertible {
  case customButton
  case contentView
  case coolLabel

  var string: String {
    return rawValue
  }
}

// A single style
let button = UIButton(styles: Style.customButton)

// Multiple styles
let label = UILabel(styles: [Style.contentView, Style.coolLabel])

With apply functions

let label = UILabel()

// StringConvertible
label.apply(styles: Style.contentView, Style.coolLabel)

// String
label.apply(styles: "content-view", "cool-label")

// Style structs
let style = Style<UILabel> { label in
  label.backgroundColor = UIColor.black
}
label.apply(style: style)

With @IBInspectable property styles

let button = UIButton()

// A single style
button.styles = "custom-button"

// Multiple styles
button.styles = "content-view custom-button"

Author

Vadym Markov, markov.vadym@gmail.com

Author

Vadym Markov, markov.vadym@gmail.com