If you prefer coded user interfaces rather than designers (Xcode Interface Builder or Xamarin designers) you will surely like this API (available from iOS9+). It´s very readable, easy to maintain and feels more natural compared to the old one.
Every UIView has now several NSLayoutAnchor properties
that can be used to create constraints (NSLayoutCostraint):
Creating a constraint does not mean it will be active by default and you´ve got do it explicitly:
var c = origin.CenterXAnchor.ConstraintEqualTo(target.CenterXAnchor);
c.Active = true;
origin.CenterXAnchor
.ConstraintEqualTo(target.CenterXAnchor)
.Active = true;
NSLayoutConstraint.ActivateConstraints(new[]{
origin.CenterXAnchor.ConstraintEqualTo(target.CenterXAnchor),
origin.CenterYAnchor.ConstraintEqualTo(target.CenterYAnchor)
});
It´s really easy to create UIView method extensions. For instance, to center a view in its parent (following the above sample):
public static NSLayoutConstraint[] CenterIn(this UIView origin,
UIView target, bool activate = true)
{
origin.TranslatesAutoresizingMaskIntoConstraints = false;
var contraints = new[]
{
origin.CenterXAnchor.ConstraintEqualTo(target.CenterXAnchor),
origin.CenterYAnchor.ConstraintEqualTo(target.CenterYAnchor)
};
if (activate)
NSLayoutConstraint.ActivateConstraints(contraints);
return contraints;
}
view.CenterIn(parentView);
Now let´s adjust a view to its parent bounds:
public static NSLayoutConstraint[] FullSizeOf(this UIView origin,
UIView target, UIEdgeInsets edges, bool activate = true)
{
origin.TranslatesAutoresizingMaskIntoConstraints = false;
var contraints = new[]
{
origin.LeadingAnchor.ConstraintEqualTo(target.LeadingAnchor, edges.Left),
origin.TrailingAnchor.ConstraintEqualTo(target.TrailingAnchor, -edges.Right),
origin.TopAnchor.ConstraintEqualTo(target.TopAnchor, edges.Top),
origin.BottomAnchor.ConstraintEqualTo(target.BottomAnchor, -edges.Bottom)
};
if(activate)
NSLayoutConstraint.ActivateConstraints(contraints);
return contraints;
}
public static NSLayoutConstraint[] FullSizeOf(this UIView origin,
UIView target, float margin = 0, bool activate = true)
=> origin.FullSizeOf(target, new UIEdgeInsets(margin, margin, margin, margin), activate);
view.FullSizeOf(parentView);
view.FullSizeOf(parentView, 10);
view.FullSizeOf(parentView, new UIEdgeInsets(5, 10, 5, 10));
And now let´s make a shortcut to set the width and height:
public static NSLayoutConstraint[] ConstraintSize(this UIView origin,
float width, float height, bool activate = true)
{
origin.TranslatesAutoresizingMaskIntoConstraints = false;
var contraints = new[]
{
origin.WidthAnchor.ConstraintEqualTo(width),
origin.HeightAnchor.ConstraintEqualTo(height)
};
if (activate)
NSLayoutConstraint.ActivateConstraints(contraints);
return contraints;
}
view.ConstraintSize(100, 100);
Consider playing around with all anchors and Constraint...To() methods. You can make anything.
Those method extensions above return an array of constraints so we can deactivate/activate them later. Consider a set of constraints like a visual state we can store in a variable:
var small = view.ConstraintSize(100, 80);
var big = view.ConstraintSize(200, 200, false);
States can get even more complex by chaining the constraints from multiple objects:
var small = view1.ConstraintSize(100, 100)
.Concat(view2.ConstraintSize(50, 50))
.Concat(view3.ConstraintSize(30, 30))
.ToArray();
var big = view1.ConstraintSize(200, 200, false)
.Concat(view2.ConstraintSize(100, 100, false))
.Concat(view3.ConstraintSize(60, 60, false))
.ToArray();
State changes
Simply deactivate the old constraints and activate the new ones:
NSLayoutConstraint.DeactivateConstraints(small);
NSLayoutConstraint.ActivateConstraints(big);
With the basic blocks in place, let´s create a new extension to get fancy with state changes:
public static void ChangeState(this UIView parentView,
NSLayoutConstraint[] before,
NSLayoutConstraint[] after,
double duration = 0)
{
parentView.LayoutIfNeeded();
NSLayoutConstraint.DeactivateConstraints(before);
NSLayoutConstraint.ActivateConstraints(after);
if (duration > 0)
{
UIView.Animate(duration, parentView.LayoutIfNeeded);
}
}
View.ChangeState(small, big);
View.ChangeState(big, small, duration:0.3);
Here´s a working example:
