About

Being able to live reload UI changes during development is a boom for productivity. We have seen it in other environments such as Smalltalk, Self. We also have it on iOS in the form of Injection Plugin for Xcode and React Native.

Zhi is another attempt at this.

It lets you tweak Auto Layout constraints and watch your app update immediately without a rebuild + run cycle.

Usage

This library allows you to specify your auto layout constraints in separate .styles files. It supports:

  • Live reloading of Auto Layout constraints as you save the .styles files, without a rebuild + run cycle
  • Apple’s Visual Format Language: H:[p(==v2)]|
  • Support an equations-based syntax: v1.width = v2.width + 10

In addition, the .styles files also support:

  • Metrics can be specified
  • Colors — rgb(), rgba() or named colors in UIColor, e.g. red
  • Image filenames
  • Button title and label text
  • Font name, size
  • Dynamic type style names, e.g. callout or caption1
  • and more

This means that you can tweak these properties without rebuilding your app during development.

There is an example app included in the repository.

Styles Files Syntax

You write a style file for each view controller that you want to use Zhi with.

Styles files are line-based. Empty lines are ignored

Comments start with a single #

# This is a comment

Metrics start with ##

##m1=80

Visual Format Language:

H:|[v1][v2]-m1-|

Equation-based syntax:

v1.width = v2.width*2

Properties:

v1.backgroundColor = rgb(90, 200, 250)

i.backgroundColor = gray
i.contentMode = scaleAspectFill
i.clipsToBounds = true
i.image = color.jpeg

b.title = Tap Me
b.textStyle = largeTitle

l.fontName = Thonburi
l.fontSize = 30
l.numberOfLines = 0

WARNING: Setting of properties like colors are best used in style files only during development. Ship style files that only contains instructions for Auto Layout.

Installation

Refer to the README for installation and usage instructions.

License

BSD 2-clause

Questions