Documentation

This page provides documentation on the syntax available in RQVisual. For examples, see https://github.com/rqueue/RQVisual.

Visual Format Syntax

The syntax for RQVisual is very similar to Auto Layout's Visual Format Language, so if you're already familiar with that, you're well on your way to using RQVisual. One thing to note is that any functionality available in Auto Layout's Visual Format Language that is not mentioned here is not (yet) a functionality of RQVisual.

Spacing between views in a row

• [view1]-[view2]
  Uses the default horizontal padding between views in a row

• [view1][view2]
  Uses a horizontal padding of 0 between views in a row

• [view1]-5-[view2] or [view1]-(5)-[view2]
  Customize the horizontal padding between views in a row

• |-5-[view] or [view]-5-|
  Customize the horizontal padding between a view and its superview's left/right edge otherwise 0.0 will be used (the horizontal padding is ignored for default superview spacing).

Constraining widths

• [view]
  Flexible width where the view is pinned to the views on its left and right and resizes accordingly.

• [view(40)]
  Fixed width of 40. Note: Multiple width constrains and inequalities are not supported.

• [view1(==)][view2(==)]
  Constrain views to have equal widths. The scope of the == constraint is within the same row only. That is, views within separate rows cannot be constrained to have the same width.

Constraining heights

• [view1(40)][view2]
  Flexible height where view1 and view2 are pinned to the views above and below them and resize accordingly.

• [view1][view2](40)
  Fixed height of 40 for both view1 and view2. Views within the same row must have the same height constraints.

Horizontal positioning

• [view(40)<]
  Pins the view to the view on its left.

• [view(40)>]
  Pins the view to the view on its right.

• [view(40)<>]
  Centers the view within its row.

Special keywords

• [_spacer]
  Adds in a spacer view, which can have any of the modifiers other views can have except the spacer view will be transparent.

Row labels

• r1:[view1][view2(30)]
  Apply a label to a row (r1 here), which can later be referred to in your row visual spacing format.

Row visual spacing

• [r1][r2]
  Uses a vertical padding of 0 between rows.

• [r1]-5-[r2] or [r1]-(5)-[r2]
  Customize the horizontal padding between rows. Note that [r1]-[r2] is unnecessary if you want to use the default padding between rows because it will already be used even if a row visual spacing is not supplied.

• |-5-[r1] or [r1]-5-|
  Customize the vertical padding between a row and its superview's top/bottom edges otherwise 0.0 will be used (the vertical padding is ignored for default superview spacing).