VL – a F# DSL for the Layout of IOS Controls

Starting with IOS 6 Apple added Auto Layout – a language for specifying constraints on the layout of IOS controls. With Auto Layout one can express the height, width, sequence, spacing, margins, anchoring / docking, etc. of controls, as constraints.

Auto Layout constraints can be expressed in an untyped way as strings or one can use the underlying API. While feasible for Objective-C code, these approaches become awkward for other languages such as F#.

The VL DSL is meant to easily create IOS layouts in code in a strongly typed manner. The DSL makes use of F# Algebraic Data Types (Discriminated Unions), pattern matching and operator overloading. (Note that at the time of writing this post Xamarin has announced Xamarin.Forms which may make VL redundant).

Auto Layout :       H:| -10-[ctrl1]-[ctrl2]-10-|
VL                :       H [ !- 10. ; @! ctrl1 ; sp ; @! ctrl2;  !- 10. ]

The two constraints are equivalent; they layout two controls horizontally with 10 point margins at the left and right edges and a standard space in between.

Continue reading