Repository files navigation

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

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

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));

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 theVerticalStackPanelConstraints 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'sAccessibilityIdentifier if one is set, andVerticalStackPanel if not
• viewId will be the subview'sAccessibilityIdentifier if one is set, and the subview's index in the array if not
• constraintDescription will be based on the constraint itself, such asBottom,Top,Width, etc.