FluentLayout

FluentLayout provides an easy, fluent API for creating constraint-based layouts in Xamarin.iOS.

How To Use

The best way to see FluentLayout in action is to check out the QuickLayout.Touch sample project, which contains many examples of creating a variety of layouts.

Basic Usage

The basic syntax of FluentLayout looks something like this:

View.AddConstraints(
  fNameLabel.AtTopOf(View, vMargin),
  fNameLabel.AtLeftOf(View, hMargin),
  fNameLabel.ToLeftOf(sNameLabel, hMargin),

  sNameLabel.WithSameTop(fNameLabel),
  sNameLabel.AtRightOf(View, hMargin),
  sNameLabel.WithSameWidth(fNameLabel),

  fNameField.WithSameWidth(fNameLabel),
  fNameField.WithSameLeft(fNameLabel),
  fNameField.Below(fNameLabel, vMargin),

  sNameField.WithSameLeft(sNameLabel),
  sNameField.WithSameWidth(sNameLabel),
  sNameField.WithSameTop(fNameField));

Advanced Usage

FluentLayout also offers some advanced layout helpers as well, such as the ability to easily lay out views as a vertical stack:

View.AddConstraints(
  View.VerticalStackPanelConstraints(
    new Margins(20, 10, 20, 10, 5, 5),                                              
    View.Subviews));

When using the VerticalStackPanelConstraints helper each constraint added will be assigned a predictable identifier, allowing you to find relevant constraints later on if you need to. These identifiers are in the form of {containerId}-{viewId}-{constraintDescription}:

• containerId will be the container's AccessibilityIdentifier if one is set, and VerticalStackPanel if not
• viewId will be the subview's AccessibilityIdentifier if one is set, and the subview's index in the array if not
• constraintDescription will be based on the constraint itself, such as Bottom, Top, Width, etc.