Question - Working with iPhone X and iOS 11

[benhysell]

Is there a way to use the new View.SafeAreaLayoutGuide with FluentLayout?

I poked around last night trying to make View.SafeAreaLayoutGuide fit into FluentLayout, but didn't have much luck. Everything else works great in iOS 11 and the iPhone X, except if I do something like:

scrollView.AtLeftOf(View),
scrollView.Width().EqualTo().WidthOf(View),

When I rotate the phone the notch will eat my scrollView.

[Cheesebaron]

Afaik FluentLayout doesn't support Anchoring to LayoutGuides

[gshackles]

Yeah, this isn't something I've looked into myself really, but would love to be able to support it in FluentLayout. Not sure when I'll have a chance to dig, but would happily accept a PR if someone was able to make it work well 😄

[benhysell]

For now I'm using a mix of FluentLayout and Anchors, throwing all of my controls into a ScrollView

View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
var safeGuide = View.SafeAreaLayoutGuide;
scrollView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
scrollView.LeftAnchor.ConstraintEqualTo(safeGuide.LeftAnchor).Active = true;
scrollView.RightAnchor.ConstraintEqualTo(safeGuide.RightAnchor).Active = true;
scrollView.BottomAnchor.ConstraintEqualTo(safeGuide.BottomAnchor).Active = true;
scrollView.WidthAnchor.ConstraintEqualTo(safeGuide.WidthAnchor).Active = true;
scrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

And then using FluentLayout to constrain against the ScrollView. It works, but is clunky switching back and forth.

Upgrading FluentLayout feels "do'able", but having another look around this afternoon I'm not seeing how to pull anything useful out of a SafeAreaLayoutGuide to feed into FluentLayout.

[benhysell]

https://github.com/SnapKit/SnapKit/issues/448 is the closest I've found of to a something of what FluentLayout is doing under the hood. Leaving this more as a note of, look here how they accomplished this.

[benhysell]

I have a hack working that keeps the API the same and modifies the guts of FluentLayout. I upgraded the test project to use the latest MvvmCross and added a Launch.storyboard so the test app will be full screen on the iPhone X.

The change can be seen here: https://github.com/benhysell/Cirrious.FluentLayout/blob/master/Cirrious.FluentLayout/FluentLayout.cs#L112

Basically using SafeAreaLayoutGuide for the View and SecondItem when building the constraint.

This works for the simple views, like 'Form' and 'Full Size Animated', but fails on 'FormGrid', and 'Search'. These are using the more exotic methods to build constraints.

Again, this is a hack, and I'm not sure it is really the way forward. i.e. using SafeAreaLayoutGuide would limit the library to only iOS 11+.

I'm looking for feedback/thoughts from those who are more knowledgable.

[yaliashkevich]

@benhysell,

If you want to work with "anchors" from UILayoutGuide you can use following snippet:

childView.Top().EqualTo().TopOf(View.SafeAreaLayoutGuide)

it produces same constraint as native ConstraintEqualTo (you can check First/SecondItem properties in debugger):

childView.TopAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TopAnchor)

Shortcut 'AtTopOf(UIView view, ...)' is not supported, due to UIView parameter in signature, but you can use "long" version above or create own extension (to be able to pass UILayoutGuide/NSObject). Actually this extension can do a switch between View/View.SafeLayoutGuide based on runtime iOS version.

So we are still able to use "fluent" syntax.

[FabriBertani]

Check my PR above

[gshackles]

Closing since #50 added safe area support