Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Zhi — Live Reload Auto Layout Constraints

Zhi — Live Reload Auto Layout Constraints

Zhi is a Swift library that lets you tweak Auto Layout constraints and watch your app update immediately without a rebuild + run cycle.

Hwee-Boon Yar

January 25, 2018
Tweet

More Decks by Hwee-Boon Yar

Other Decks in Programming

Transcript

  1. iOS ▸ Injection for Xcode ▸ React Native Others ▸

    Web applications, generally ▸ Android Studio's Instant Run ▸ Smalltalk
  2. View hierarchy in Swift: let mainView = UIView() let v1

    = UIView() let v2 = UIView() let label = UILabel() let button = UIButton(type: .system) let imageView = UIImageView() Styles: H:|[v1][v2]-m1-| celf.left = v1.left
  3. STYLE FILES ▸ Loads style files from project directory and

    fallback to app bundle ▸ Line-based ▸ 1 instruction per line
  4. # UILabel l.text = Image: l.color = rgb(0, 138, 0)

    l.backgroundColor = rgb(100, 204, 0) # UIImageView i.backgroundColor = gray i.contentMode = scaleAspectFill i.clipsToBounds = true i.image = color.jpeg #i.image = dark.jpeg # Button b.color = rgb(255, 0, 0) b.title = Tap Me b.enabled = true b.textStyle = largeTitle
  5. SET IT UP class MyViewController: UIViewController { createViews() styler.views =

    ["celf": mainView, "v1": v1, "v2": v2] styler.liveReload(view: view) }
  6. ▸ (NS)Scanner + simple string parsing ▸ Parser reads each

    line and treat them as individual instructions ▸ Watching the style files for changes and parsing + reapplying
  7. LINKS ▸ Smalltalk (Pharo) https://pharo.org ▸ Injection for Xcode https://github.com/johnno1962/

    injectionforxcode ▸ Reveal https://revealapp.com ▸ React Native https://facebook.github.io/react-native/
  8. LIMITATIONS ▸ Constraint priority ▸ Animation by changing constant ▸

    “Partial updating” of constraints set ▸ Need to rebuild when we change view hierarchy ▸ Better integrated with view controllers, and not views