FluentLayout for Xamarin.iOS - sample uses MvvmCross
C# F# Shell
Latest commit 7924986 Mar 26, 2017 @gshackles gshackles committed on GitHub Merge pull request #39 from flyingxu/mvvmcross4.4
Mvvmcross4.4

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.