Fancy Swift implementation of the Visual Format Language (experimental and doesn't work with the recent version of Swift)

Related tags

Layout VFLToolbox
Overview

VFLToolbox

Autolayout is awesome! VFL a.k.a Visual Format Language is even more awesome because it allows you to shorten constraints setting code. The only problem of VFL is that you need to specify constraints as a parametrized string which is painful in maintenance.

VFLToolbox brings that to the whole new level. So, from now on, no more runtime exceptions once you rename the view, no more nasty strings at all. You'll get notified in a compile time if something went wrong.

As they say, one example worth thousand words:

let view1 = UIView(), view2 = UIView(), superview = UIView()
let margin = 15
superview.addSubview(view1)
superview.addSubview(view2)

superview.addConstraints(V:|-margin-[view1]-margin-[view2]-margin-|)

Yes, this is it!

Of course, you could use ==, <=, and >= to specify layout relations:

// This is probably the most common example of such a usage
superview.addConstraints(V:|-(==margin)-[view1]-(==margin)-[view2]-(>=margin)-|)

You can now use your favorite IDE to refactor the code:

Code suggestions work pretty smooth as well:

Just compare it to the code which you need to write without VFLToolbox:

let metrics = [
    "margin" : margin,
]
let views = [
    "view1" : view1,
    "view2" : view2,
]
superview.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|-(==margin)-[view1]-(==margin)-[view2]-(>=margin)-|", 
        options: nil, 
        metrics: metrics, 
        views: views
    )
)

You can find more examples of VFLToolbox usage in the tests target of the project (for example, CommonCaseTests.swift)

Formula

VFLToolbox does not fully implement Apple's VFL. For example, you can't specify view's width with it, i.e. H:[view1(==100)] wouldn't work. It, may be, will be added in future, but, until then, you have another way to describe such (and many-many other) constraints. This example might be rewritten with VFLToolbox as:

view1.width == 100

And, if you want to add it as a constraint – you can do it just like that:

superview.addConstraint(view1.width == 100)

Of course, you could use more complex equations:

struct StyleGuide {
    struct Margin {
        static var Top: CGFloat = 10
        static var Bottom: CGFloat = 10
    }
}

superview.addConstraint(view2.top == view1.bottom + StyleGuide.Margin.Top + StyleGuide.Margin.Bottom)
superview.addConstraint(view2.width == view1.width / 3 + 15) // why not?

As the result of the equations above is NSLayoutConstraint, you can assign it to the variable and do whatever you want with it (change the priority, animate the constant, etc.):

let constraint = view2.left == view2.right
constraint.constant += 15

You can find more examples in the tests target of the project

Performance

Surprisingly, VFLToolbox's performance is quite good, it is comparable with UIKit implementation for NSLayoutConstraint.constraintsWithVisualFormat. For more details, see the Measurements.swift (add it to the tests target to enable measurements).

Roadmap

  • Layout guides usage as an item in formula (e.g. view.top == topLayoutGuide + 15)
  • View width and height constraints (e.g. [view2(==view1)]])
  • Standard constants support (e.g. V:|-[view1]-[view2]-|)
  • Multiple predicates support (e.g. V:|-(>=5,<=8)-[view]|)
  • OS X support
  • Constraint priority support (e.g. V:|-(>=5@250,<=8@500)-[view]|)

Known issues

  • Due to Swift implementation details, it's not possible to use long expressions (yet?).

For example, the following assignment would make cooler spinning like a crazy and, at the end, it wouldn't compile:

let t = 1 + 1 + 1 + 1 + 1 + 1 + 1.0 // You may split this equation to two to workaround the problem

Thus, long VFL expressions should be split to the smaller ones

License

The code is released under MIT license (see LICENSE file for details)

Contact

Pull requests as well as bugreports are welcome here, on Github. For other questions, drop me a line on Twitter: @0xc010d

You might also like...
ios-queryable is an implementation of IQueryable/IEnumerable for Core Data

#ios-queryable is an Objective-C category that provides IQueryable and IEnumerable-like functionality to Core Data. Tired of writing boilerplate Core

✂ Easy to use and flexible library for manually laying out views and layers for iOS and tvOS. Supports AsyncDisplayKit.

ManualLayout Table of Contents Installation Usage API Cheat Sheet Installation Carthage Add the following line to your Cartfile. github "isair/ManualL

MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax, in addition, can be used in both Swift and Objective-C. Support Safe Area and Size Class.
MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax, in addition, can be used in both Swift and Objective-C. Support Safe Area and Size Class.

MisterFusion MisterFusion makes more easier to use AutoLayout in Swift & Objective-C code. Features Simple And Concise Syntax Use in Swift and Objecti

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

CompositionalLayoutDSL, library to simplify the creation of UICollectionViewCompositionalLayout. It wraps the UIKit API and makes the code shorter and easier to read.
CompositionalLayoutDSL, library to simplify the creation of UICollectionViewCompositionalLayout. It wraps the UIKit API and makes the code shorter and easier to read.

CompositionalLayoutDSL CompositionalLayoutDSL is a Swift library. It makes easier to create compositional layout for collection view. Requirements Doc

Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax. Supports iOS and OSX Auto Layout

Masonry Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're

Breezz: an application with which it is easy and simple to practice breathing exercises and meditation
Breezz: an application with which it is easy and simple to practice breathing exercises and meditation

breezz will help you relax Breezz is an application with which it is easy and si

Allows users to pull in new song releases from their favorite artists and provides users with important metrics like their top tracks, top artists, and recently played tracks, queryable by time range.

Spotify Radar Spotify Radar is an iOS application that allows users to pull in new song releases from their favorite artists and provides users with i

Reusable GridView with excellent performance and customization that can be time table, spreadsheet,  paging and more.
Reusable GridView with excellent performance and customization that can be time table, spreadsheet, paging and more.

GridView GridView can tile the view while reusing it. It has an API like UIKit that works fast. Even when device rotates it smoothly relayout. Appetiz

Owner
0xc010d
0xc010d
A collection of session summaries in markdown format, from WWDC 20, 19 & 17

WWDC-Recap Summaries for the sessions of WWDC 20, 19 & 17 in a markdown format. These notes are not intended to replace the full experience. They are

Eren Kabakçı 125 Apr 12, 2021
An extension that simplifies the work with Swift AutoLayout by writing cleaner, more natural and easy-reading code.

Installation For now you're able to clone repo in your project or download ZIP folder manually. git clone https://github.com/votehserxam/AutoLayout.gi

Max 3 Nov 8, 2022
A simpler way to work with NSLayoutAnchor

SugarAnchor is syntactic sugar on NSLayoutAnchor to help us write more compact, readable and easy layout code. It wraps up all of NSLayoutXAxisAnchor,

Ashik Uddin Ahmad 21 Nov 18, 2021
An easy way to create and layout UI components for iOS (Swift version).

Introduction Cupcake is a framework that allow you to easily create and layout UI components for iOS 8.0+. It use chaining syntax and provides some fr

nerdycat 288 Oct 9, 2022
A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UICollectionViewCompositionalLayout.

WWCompositionalLayout A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UI

William-Weng 1 Jul 4, 2022
Semi-automatic installation of mods for the iOS version of KOTOR 1

KOTOR 1 Mod Manager Welcome to KOTOR 1 Mod Manager (K1MM for short), a tool designed to allow easy and simple installation of mods for the iOS version

Lilly 3 Jul 11, 2022
SwiftLanguageWeather-master - Swift Language Weather is an iOS weather app developed in Swift 4

Swift Language Weather SwiftWeather has renamed to Swift Language Weather. Becau

Kushal Shingote 1 Feb 5, 2022
VerticalFlowLayout - This implementation is built using a UICollectionView and a custom flowLayout.

VerticalFlowLayout This implementation is built using a UICollectionView and a custom flowLayout. Table of contents Requirements Installation CocoaPod

Alexander Sibirtsev 2 Apr 19, 2022
FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.

FlexLayout adds a nice Swift interface to the highly optimized Yoga flexbox implementation. Concise, intuitive & chainable syntax. Flexbox is an incre

layoutBox 1.7k Dec 30, 2022
sample project for `UICollectionViewLayout` implementation

collection-view-layout-pattern-sample UICollectionViewLayout implementation pattern. About This project is introduced in iOSDC Japan 2021. sample code

Toshiki Takezawa 13 Nov 3, 2021