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.
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
.stylesfiles, without a rebuild + run cycle
- Apple's Visual Format Language:
- 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
- Image filenames
- Button title and label text
- Font name, size
- Dynamic type style names, e.g.
- 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
Visual Format Language:
v1.width = v2.width*2
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.
- GitHub: Zhi on GitHub
- Email: email@example.com
- Web: http://hboon.com/
- Twitter: https://twitter.com/hboon
Like this post? Follow me @hboon on Twitter.