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. ZHI LIVE RELOAD AUTO LAYOUT CONSTRAINTS - BOON

  2. REDUCE BUILD + NAVIGATE CYCLES

  3. EXISTING TOOLS

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

    Web applications, generally ▸ Android Studio's Instant Run ▸ Smalltalk
  5. DEMO

  6. HOW IT WORKS

  7. 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
  8. STYLE FILES ▸ Loads style files from project directory and

    fallback to app bundle ▸ Line-based ▸ 1 instruction per line
  9. VISUAL FORMAT LANGUAGE ##m1=80 H:|[v1][v2]-m1-| H:|[v3][v4]-m1-| V:|[v1]| V:|[v2]| + Margins

  10. EQUATION-LIKE SYNTAX celf.left = v1.left l.left = celf.leftMargin l.top =

    celf.topMargin
  11. COMMENTS #celf.left = v1.left vs celf.left = v1.left

  12. PROPERTIES v1.backgroundColor = rgb(90, 200, 250) v2.backgroundColor = gray v3.backgroundColor

    = rgba(100, 204, 0, 0.3)
  13. # 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
  14. SET IT UP class MyViewController: UIViewController { createViews() styler.views =

    ["celf": mainView, "v1": v1, "v2": v2] styler.liveReload(view: view) }
  15. IMPLEMENTATION

  16. ▸ (NS)Scanner + simple string parsing ▸ Parser reads each

    line and treat them as individual instructions ▸ Watching the style files for changes and parsing + reapplying
  17. 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/
  18. ▸ @hboon ▸ https://github.com/hboon/zhi ▸ http://hboon.com/iosdevnuggets/

  19. None
  20. 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