FluentLayout for Xamarin.iOS - sample uses MvvmCross
C# F# Shell
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

FluentLayout

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

Build Status

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.