Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: FluentLayout/Cirrious.FluentLayout
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: main
Choose a base ref
...
head repository: munkii/Cirrious.FluentLayout
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 3 commits
  • 3 files changed
  • 1 contributor

Commits on Apr 20, 2016

  1. Copy the full SHA
    11d7827 View commit details
  2. Minor updates to the sample view that demonstrates the new dynamic co…

    …nstraints functionality
    munkii committed Apr 20, 2016
    Copy the full SHA
    8729a65 View commit details

Commits on May 20, 2016

  1. Copy the full SHA
    682c851 View commit details
Showing with 141 additions and 30 deletions.
  1. +2 −1 .gitignore
  2. +115 −9 Cirrious.FluentLayout/AdvancedFluentLayoutExtensions.cs
  3. +24 −20 QuickLayout.Touch/Views/UpdateConstraintsView.cs
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -31,4 +31,5 @@ packages/
*.userprefs
*.nupkg
.fake/
dist/
dist/
/QuickLayout.sln.GhostDoc.xml
124 changes: 115 additions & 9 deletions Cirrious.FluentLayout/AdvancedFluentLayoutExtensions.cs
Original file line number Diff line number Diff line change
@@ -17,36 +17,130 @@ public static class AdvancedFluentLayoutExtensions
const float DefaultMargin = 0;
const float DefaultScale = 1;

/// <summary>
/// Used to create a constraint that offsets the View's top most edge from the top most edge of the parent view a.k.a. as the secondItem or relatedItem.
/// Implies a Container and child layout relationship
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="parentView">The related\parent view</param>
/// <param name="margin">Any vertical space to increase the offset by</param>
/// <remarks>Uses NSLayoutAttribute.Top</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout AtTopOf(this UIView view, UIView parentView, nfloat? margin = null) =>
view.Top().EqualTo().TopOf(parentView).Plus(margin.GetValueOrDefault(DefaultMargin));

/// <summary>
/// Used to create a constraint that offsets the View's left most edge from the left most edge of the parent view a.k.a. as the secondItem or relatedItem.
/// Implies a Container and child layout relationship
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="parentView">The related\parent view</param>
/// <param name="margin">Any horizontal space to increase the offset by</param>
/// <remarks>Uses NSLayoutAttribute.Left</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout AtLeftOf(this UIView view, UIView parentView, nfloat? margin = null) =>
view.Left().EqualTo().LeftOf(parentView).Plus(margin.GetValueOrDefault(DefaultMargin));

/// <summary>
/// Used to create a constraint that offsets the View's right most edge from the rightmost edge of the parent view a.k.a. as the secondItem or relatedItem.
/// Implies a Container and child layout relationship
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="parentView">The related\parent view</param>
/// <param name="margin">Any horizontal space to increase the offset by</param>
/// <remarks>Uses NSLayoutAttribute.Right</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout AtRightOf(this UIView view, UIView parentView, nfloat? margin = null) =>
view.Right().EqualTo().RightOf(parentView).Minus(margin.GetValueOrDefault(DefaultMargin));

/// <summary>
/// Used to create a constraint that offsets the View's bottom most edge from the bottom most edge of the parent view a.k.a. as the secondItem or relatedItem.
/// Implies a Container and child layout relationship
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="parentView">The related\parent view</param>
/// <param name="margin">Any vertical space to increase the offset by</param>
/// <remarks>Uses NSLayoutAttribute.Bottom</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout AtBottomOf(this UIView view, UIView parentView, nfloat? margin = null) =>
view.Bottom().EqualTo().BottomOf(parentView).Minus(margin.GetValueOrDefault(DefaultMargin));

/// <summary>
/// Used to create a constraint that offsets the View's top most edge from the
/// bottom edge of <paramref name="previous"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="previous">The related view</param>
/// <param name="margin">Any vertical space to increase the offset by</param>
/// <remarks>Uses NSLayoutAttribute.Top, Implies a sibling, vertically stacked layout relationship</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout Below(this UIView view, UIView previous, nfloat? margin = null) =>
view.Top().EqualTo().BottomOf(previous).Plus(margin.GetValueOrDefault(DefaultMargin));

/// <summary>
/// Used to create a constraint that offsets the View's bottom most edge from the
/// top edge of <paramref name="following"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="previous">The related view</param>
/// <param name="margin">Any vertical space to increase the offset by</param>
/// <remarks>Uses NSLayoutAttribute.Bottom. Implies a sibling, vertically stacked layout relationship</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout Above(this UIView view, UIView previous, nfloat? margin = null) =>
view.Bottom().EqualTo().TopOf(previous).Minus(margin.GetValueOrDefault(DefaultMargin));

public static FluentLayout WithSameLeft(this UIView view, UIView previous) => view.Left().EqualTo().LeftOf(previous);

public static FluentLayout WithSameTop(this UIView view, UIView previous) => view.Top().EqualTo().TopOf(previous);
/// <summary>
/// Used to create a constraint that makes the View's left most edge the
/// same as the left edge of <paramref name="related"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="related">The related view</param>
/// <remarks>Uses NSLayoutAttribute.Left. For examples of this see <a href="https://github.com/FluentLayout/Cirrious.FluentLayout/blob/master/QuickLayout.Touch/Views/FormView.cs">QuickLayout FormView</a></remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout WithSameLeft(this UIView view, UIView related) => view.Left().EqualTo().LeftOf(related);

/// <summary>
/// Used to create a constraint that makes the View's top most edge the
/// same as the top edge of <paramref name="related"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="related">The related view</param>
/// <remarks>Uses NSLayoutAttribute.Top.</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout WithSameTop(this UIView view, UIView related) => view.Top().EqualTo().TopOf(related);

public static FluentLayout WithSameCenterX(this UIView view, UIView previous) => view.CenterX().EqualTo().CenterXOf(previous);

public static FluentLayout WithSameCenterY(this UIView view, UIView previous) => view.CenterY().EqualTo().CenterYOf(previous);

public static FluentLayout WithSameRight(this UIView view, UIView previous) => view.Right().EqualTo().RightOf(previous);

public static FluentLayout WithSameWidth(this UIView view, UIView previous) => view.Width().EqualTo().WidthOf(previous);

/// <summary>
/// Used to create a constraint that makes the View's right most edge the
/// same as the left edge of <paramref name="related"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="related">The related view</param>
/// <remarks>Uses NSLayoutAttribute.Right. For examples of this see <a href="https://github.com/FluentLayout/Cirrious.FluentLayout/blob/master/QuickLayout.Touch/Views/FormView.cs">QuickLayout FormView</a></remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout WithSameRight(this UIView view, UIView related) => view.Right().EqualTo().RightOf(related);

/// <summary>
/// Used to create a constraint that makes the View's Width the
/// same as <paramref name="related"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="related">The related view</param>
/// <remarks>Uses NSLayoutAttribute.Width. For examples of this see <a href="https://github.com/FluentLayout/Cirrious.FluentLayout/blob/master/QuickLayout.Touch/Views/FormView.cs">QuickLayout FormView</a></remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout WithSameWidth(this UIView view, UIView related) => view.Width().EqualTo().WidthOf(related);

/// <summary>
/// Used to create a constraint that makes the View's bottom most edge the
/// same as the bottom edge of <paramref name="previous"/> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="previous">The related view</param>
/// <remarks>Uses NSLayoutAttribute.Bottom.</remarks>
/// <returns>A FluentLayout</returns>
public static FluentLayout WithSameBottom(this UIView view, UIView previous) => view.Bottom().EqualTo().BottomOf(previous);

public static FluentLayout WithRelativeWidth(this UIView view, UIView previous, nfloat? scale = null) =>
@@ -57,8 +151,20 @@ public static FluentLayout WithRelativeWidth(this UIView view, UIView previous,
public static FluentLayout WithRelativeHeight(this UIView view, UIView previous, nfloat? scale = null) =>
view.Height().EqualTo().HeightOf(previous).WithMultiplier(scale.GetValueOrDefault(DefaultScale));

public static FluentLayout ToRightOf(this UIView view, UIView previous, nfloat? margin = null) =>
view.Left().EqualTo().RightOf(previous).Plus(margin.GetValueOrDefault(DefaultMargin));
/// <summary>
/// Used to create a constraint that makes the View's left most edge the
/// same as the right edge of <paramref name="related" /> a.k.a. the secondItem.
/// </summary>
/// <param name="view">The view to be laid out</param>
/// <param name="related">The related view</param>
/// <param name="margin">The margin.</param>
/// <returns>
/// A FluentLayout
/// </returns>
/// <remarks>
/// Uses NSLayoutAttribute.Right. For examples of this see <a href="https://github.com/slodge/Cirrious.FluentLayout/blob/master/QuickLayout.Touch/Views/FormView.cs">QuickLayout FormView</a></remarks>
public static FluentLayout ToRightOf(this UIView view, UIView related, nfloat? margin = null) =>
view.Left().EqualTo().RightOf(related).Plus(margin.GetValueOrDefault(DefaultMargin));

public static FluentLayout ToLeftOf(this UIView view, UIView previous, nfloat? margin = null) =>
view.Right().EqualTo().LeftOf(previous).Minus(margin.GetValueOrDefault(DefaultMargin));
44 changes: 24 additions & 20 deletions QuickLayout.Touch/Views/UpdateConstraintsView.cs
Original file line number Diff line number Diff line change
@@ -17,46 +17,50 @@ public override void ViewDidLoad()

View.BackgroundColor = UIColor.White;

if (RespondsToSelector(new Selector("edgesForExtendedLayout")))
EdgesForExtendedLayout = UIRectEdge.None;
if (RespondsToSelector(new Selector("edgesForExtendedLayout")))
{
EdgesForExtendedLayout = UIRectEdge.None;
}

var label = new UILabel
var label = new UILabel
{
Text = "Update this label's height constraint height constant and active settings",
Text = "This label has a Height constraint applied to it. \r\nThe toggle switch is bound to the Contraint's Active boolean and the slider to the Constraint's Constant value.",
BackgroundColor = UIColor.LightGray,
TextColor = UIColor.Black,
LineBreakMode = UILineBreakMode.WordWrap,
Lines = 0
};
var toggleHeight = new UISwitch();
var heightConstant = new UISlider { MinValue = 0, MaxValue = 400 };

View.AddSubviews(label, toggleHeight, heightConstant);
var heightToggle = new UISwitch();
var labelHeightSlider = new UISlider { MinValue = 0, MaxValue = 400 };

View.AddSubviews(label, heightToggle, labelHeightSlider);

View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

var heightLayout = label.Height().EqualTo(ViewModel.Constant).WithIdentifier("foo");
var heightLayoutConstraint = label.Height().EqualTo(ViewModel.Constant).WithIdentifier("labelHeight_Constraint_Id");

var margin = 10;

View.AddConstraints(
heightConstant.AtTopOf(View, margin),
heightConstant.AtLeftOf(View, margin),
heightConstant.AtRightOf(View, margin),
labelHeightSlider.AtTopOf(View, margin),
labelHeightSlider.AtLeftOf(View, margin),
labelHeightSlider.AtRightOf(View, margin),

toggleHeight.Below(heightConstant, margin),
toggleHeight.WithSameLeft(heightConstant),
heightToggle.Below(labelHeightSlider, margin),
heightToggle.WithSameLeft(labelHeightSlider),

label.AtLeftOf(View, margin),
label.Below(toggleHeight, margin),
label.Below(heightToggle, margin),
label.AtRightOf(View, margin),
heightLayout
);
heightLayoutConstraint
);

var set = this.CreateBindingSet<UpdateConstraintsView, UpdateConstraintsViewModel>();
set.Bind(heightLayout).For(layout => layout.Active).To(vm => vm.Active);
set.Bind(heightLayout).For(layout => layout.Constant).To(vm => vm.Constant);
set.Bind(toggleHeight).To(vm => vm.Active);
set.Bind(heightConstant).To(vm => vm.Constant);
set.Bind(heightLayoutConstraint).For(constraint => constraint.Active).To(vm => vm.Active);
set.Bind(heightLayoutConstraint).For(constraint => constraint.Constant).To(vm => vm.Constant);
set.Bind(heightToggle).To(vm => vm.Active);
set.Bind(labelHeightSlider).To(vm => vm.Constant);
set.Apply();
}
}