Added support for iPhone X Safe Area.

Cirrious.FluentLayout/AdvancedFluentLayoutExtensions.cs

@@ -15,21 +15,41 @@ namespace Cirrious.FluentLayouts.Touch
 {
     public static class AdvancedFluentLayoutExtensions
     {
-		const float DefaultMargin = 0;
-		const float DefaultScale = 1;
+        const float DefaultMargin = 0;
+        const float DefaultScale = 1;
 
         public static FluentLayout AtTopOf(this UIView view, UIView parentView, nfloat? margin = null) =>
-			view.Top().EqualTo().TopOf(parentView).Plus(margin.GetValueOrDefault(DefaultMargin));
+            view.Top().EqualTo().TopOf(parentView).Plus(margin.GetValueOrDefault(DefaultMargin));
+
+        public static FluentLayout AtTopOfWithSafeArea(this UIView view, UIView parentView, nfloat? margin = null) =>
+            UIDevice.CurrentDevice.CheckSystemVersion(11, 0)
+                    ? view.Top().EqualTo().TopOf(parentView.SafeAreaLayoutGuide).Plus(margin.GetValueOrDefault(DefaultMargin))
+                    : view.AtTopOf(parentView, margin);        
 
         public static FluentLayout AtLeftOf(this UIView view, UIView parentView, nfloat? margin = null) =>
 			view.Left().EqualTo().LeftOf(parentView).Plus(margin.GetValueOrDefault(DefaultMargin));
 
+        public static FluentLayout AtLeftOfWithSafeArea(this UIView view, UIView parentView, nfloat? margin = null) =>
+            UIDevice.CurrentDevice.CheckSystemVersion(11, 0)
+                    ? view.Left().EqualTo().LeftOf(parentView.SafeAreaLayoutGuide).Plus(margin.GetValueOrDefault(DefaultMargin))
+                    : view.AtLeftOf(parentView, margin);
+
         public static FluentLayout AtRightOf(this UIView view, UIView parentView, nfloat? margin = null) =>
 			view.Right().EqualTo().RightOf(parentView).Minus(margin.GetValueOrDefault(DefaultMargin));
 
+        public static FluentLayout AtRightOfWithSafeArea(this UIView view, UIView parentView, nfloat? margin = null) =>
+            UIDevice.CurrentDevice.CheckSystemVersion(11, 0)
+                    ? view.Right().EqualTo().RightOf(parentView.SafeAreaLayoutGuide).Minus(margin.GetValueOrDefault(DefaultMargin))
+                    : view.AtRightOf(parentView, margin);
+
         public static FluentLayout AtBottomOf(this UIView view, UIView parentView, nfloat? margin = null) =>
 			view.Bottom().EqualTo().BottomOf(parentView).Minus(margin.GetValueOrDefault(DefaultMargin));
 
+        public static FluentLayout AtBottomOfWithSafeArea(this UIView view, UIView parentView, nfloat? margin = null) =>
+            UIDevice.CurrentDevice.CheckSystemVersion(11, 0)
+                    ? view.Bottom().EqualTo().BottomOf(parentView.SafeAreaLayoutGuide).Minus(margin.GetValueOrDefault(DefaultMargin))
+                    : view.AtBottomOf(parentView, margin);
+
         public static FluentLayout AtLeadingOf(this UIView view, UIView parentView, nfloat? margin = null) =>
         view.Leading().EqualTo().LeadingOf(parentView).Plus(margin.GetValueOrDefault(DefaultMargin));
 

QuickLayout.Core/QuickLayout.Core.csproj

@@ -49,6 +49,7 @@
     <Compile Include="ViewModels\AdvancedVerticalStackViewModel.cs" />
     <Compile Include="ViewModels\DirectionFormViewModel.cs" />
     <Compile Include="ViewModels\RightToLeftViewModel.cs" />
+    <Compile Include="ViewModels\ViewWithSafeAreaViewModel.cs" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Portable\$(TargetFrameworkVersion)\Microsoft.Portable.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 

QuickLayout.Core/ViewModels/FirstViewModel.cs

@@ -24,5 +24,7 @@ public class FirstViewModel
 	    public void GoDirectionForm() => ShowViewModel<DirectionFormViewModel>();
 
         public void GoRightToLeft() => ShowViewModel<RightToLeftViewModel>();
+
+        public void GoViewWithSafeArea() => ShowViewModel<ViewWithSafeAreaViewModel>();
     }
 }

QuickLayout.Core/ViewModels/ViewWithSafeAreaViewModel.cs

@@ -0,0 +1,10 @@
+using System;
+using MvvmCross.Core.ViewModels;
+
+namespace QuickLayout.Core.ViewModels
+{
+    public class ViewWithSafeAreaViewModel
+        : MvxViewModel
+    {
+    }
+}

QuickLayout.Touch/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1 @@
+{"images":[],"info":{"version":1,"author":"xcode"}}

QuickLayout.Touch/Assets.xcassets/LaunchImage.launchimage/Contents.json

@@ -0,0 +1,33 @@
+{
+  "images": [
+    {
+      "orientation": "portrait",
+      "idiom": "iphone",
+      "extent": "full-screen",
+      "filename": "Default.png",
+      "size": "320x480",
+      "scale": "1x"
+    },
+    {
+      "orientation": "portrait",
+      "idiom": "iphone",
+      "extent": "full-screen",
+      "filename": "[email protected]",
+      "size": "320x480",
+      "scale": "2x"
+    },
+    {
+      "orientation": "portrait",
+      "idiom": "iphone",
+      "extent": "full-screen",
+      "filename": "[email protected]",
+      "size": "320x568",
+      "subtype": "retina4",
+      "scale": "2x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}

QuickLayout.Touch/Info.plist

@@ -13,7 +13,7 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>MinimumOSVersion</key>
-	<string>7.0</string>
+	<string>8.0</string>
 	<key>CFBundleDisplayName</key>
 	<string>QuickLayout</string>
 	<key>CFBundleIdentifier</key>
@@ -24,5 +24,7 @@
 	<string></string>
 	<key>CFBundleName</key>
 	<string>QuickLayout</string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
 </dict>
 </plist>

QuickLayout.Touch/QuickLayout.Touch.csproj

@@ -105,11 +105,7 @@
     <None Include="packages.config" />
     <Compile Include="Bootstrap\MethodBindingPluginBootstrap.cs" />
     <Compile Include="Views\RightToLeftView.cs" />
-  </ItemGroup>
-  <ItemGroup>
-    <BundleResource Include="Resources\Default.png" />
-    <BundleResource Include="Resources\Default%402x.png" />
-    <BundleResource Include="Resources\Default-568h%402x.png" />
+    <Compile Include="Views\ViewWithSafeAreaView.cs" />
   </ItemGroup>
   <ItemGroup>
     <Reference Include="System" />
@@ -159,5 +155,15 @@
       <Name>QuickLayout.Core</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />
+  </ItemGroup>
+  <ItemGroup>
+    <ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Contents.json" />
+    <ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default.png" />
+    <ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default%402x.png" />
+    <ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default-568h%402x.png" />
+    <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
 </Project>

QuickLayout.Touch/Resources/LaunchScreen.storyboard

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina5_9" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Llm-lL-Icb"/>
+                        <viewControllerLayoutGuide type="bottom" id="xb3-aO-Qok"/>
+                    </layoutGuides>
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Default.png" translatesAutoresizingMaskIntoConstraints="NO" id="BnF-VO-cQR">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                            </imageView>
+                        </subviews>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="BnF-VO-cQR" secondAttribute="trailing" id="CGl-W1-199"/>
+                            <constraint firstAttribute="bottom" secondItem="BnF-VO-cQR" secondAttribute="bottom" id="Eac-lb-dLi"/>
+                            <constraint firstItem="BnF-VO-cQR" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="Her-nx-d4v"/>
+                            <constraint firstItem="BnF-VO-cQR" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="drm-BO-Nrx"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="Default.png" width="320" height="568"/>
+    </resources>
+</document>

QuickLayout.Touch/Views/FirstView.cs

@@ -11,7 +11,7 @@ namespace QuickLayout.Touch.Views
 	[Register("FirstView")]
     public class FirstView : MvxViewController
     {
-		private UIButton _viewForm, _viewFormGrid, _viewDetails, _viewSearch, _viewTip, _viewUpdateConstaints, _viewAdvancedVerticalStack, _fullSize, _directionFormView, _rightToLeft;
+		private UIButton _viewForm, _viewFormGrid, _viewDetails, _viewSearch, _viewTip, _viewUpdateConstaints, _viewAdvancedVerticalStack, _fullSize, _directionFormView, _rightToLeft, _viewSafeArea;
 
         public override void ViewDidLoad()
         {
@@ -62,6 +62,10 @@ public override void ViewDidLoad()
             _rightToLeft.SetTitle("Right-To-Left Support", UIControlState.Normal);
             Add(_rightToLeft);
 
+            _viewSafeArea = new UIButton(UIButtonType.RoundedRect);
+            _viewSafeArea.SetTitle("View with Safe Area", UIControlState.Normal);
+            Add(_viewSafeArea);
+
 			View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
 
             var set = this.CreateBindingSet<FirstView, FirstViewModel>();
@@ -75,6 +79,7 @@ public override void ViewDidLoad()
 	        set.Bind(_fullSize).To("GoFullSize");
 			set.Bind(_directionFormView).To("GoDirectionForm");
             set.Bind(_rightToLeft).To("GoRightToLeft");
+            set.Bind(_viewSafeArea).To("GoViewWithSafeArea");
             set.Apply();
 
             var constraints = View.VerticalStackPanelConstraints(

QuickLayout.Touch/Views/ViewWithSafeAreaView.cs

@@ -0,0 +1,56 @@
+using System;
+using Cirrious.FluentLayouts.Touch;
+using Foundation;
+using MvvmCross.iOS.Views;
+using UIKit;
+
+namespace QuickLayout.Touch.Views
+{
+    [Register("ViewWithSafeAreaView")]
+    public class ViewWithSafeAreaView : MvxViewController
+    {
+        public override void ViewDidLoad()
+        {
+            base.ViewDidLoad();
+
+            View.BackgroundColor = UIColor.FromRGB(248, 191, 120);
+
+            var viewContainer = new UIView { BackgroundColor = UIColor.Clear };
+
+            var sampleText = new UITextView
+            {
+                Editable = false,
+                Selectable = false,
+                Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet massa eu tempus semper. Nulla elementum mi quis erat blandit eleifend. Quisque dictum, sem eget volutpat scelerisque, quam orci lobortis enim, ut luctus enim massa in nisi. Mauris sed mi id leo lacinia lobortis. Integer elementum, erat gravida vestibulum rhoncus, enim velit consectetur est, dignissim condimentum urna turpis ac ex. Nulla arcu mauris, hendrerit nec tortor in, feugiat ullamcorper mauris. Aliquam eget tempus eros. Curabitur suscipit, arcu eu luctus mollis, nunc erat ornare erat, id viverra nisl ligula sit amet ex. Etiam in quam vitae est convallis eleifend. Fusce gravida arcu in orci lobortis pulvinar. Morbi tortor mi, elementum nec purus quis, eleifend imperdiet mi. Nunc commodo et sem vitae finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec erat eget orci malesuada vulputate. \n \nPhasellus vulputate dolor eu massa varius efficitur. Sed sed tortor eu elit ornare mollis id non sapien. Nam at turpis volutpat ligula aliquam aliquet placerat sed purus. Phasellus magna urna, maximus vitae erat et, malesuada tincidunt velit. Mauris efficitur velit fermentum imperdiet convallis. In eget erat nisi. Curabitur ut leo sodales, consectetur lorem ut, iaculis est. Nullam ornare, justo id condimentum pharetra, enim nisl posuere ex, a fermentum justo enim sit amet dolor. Sed suscipit sapien augue, nec dignissim nisl laoreet eu. Maecenas eros enim, aliquet vitae arcu id, fermentum dignissim lorem. Etiam sit amet commodo nunc. In vitae ullamcorper velit. Integer in mauris eget erat mattis feugiat at id neque.",
+                TextColor = UIColor.Black,
+                BackgroundColor = UIColor.Clear
+            };
+            sampleText.TextContainer.LineBreakMode = UILineBreakMode.WordWrap;
+            sampleText.Font = UIFont.BoldSystemFontOfSize(18f);
+
+            View.AddSubview(viewContainer);
+            viewContainer.AddSubview(sampleText);
+
+            View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
+            viewContainer.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
+
+            View.AddConstraints(
+                viewContainer.AtLeftOf(View),
+                viewContainer.AtTopOf(View),
+                viewContainer.AtRightOf(View),
+                viewContainer.AtBottomOf(View)
+            );
+
+            viewContainer.AddConstraints(
+                sampleText.AtTopOf(viewContainer),
+                // sampleText.AtTopOfWithSafeArea(viewContainer), -> use this when UINavigationBar not present to avoid content overlap under iPhone X notch
+                sampleText.AtLeftOfWithSafeArea(viewContainer),
+                //sampleText.AtLeftOf(viewContainer), -> if this is used, content overlaps under notch on landscape
+                sampleText.AtRightOfWithSafeArea(viewContainer),
+                //sampleText.AtRightOf(viewContainer), -> if this is used, content overlaps under notch on landscape
+                sampleText.AtBottomOfWithSafeArea(viewContainer)
+                //sampleText.AtBottomOf(viewContainer) -> if this is used, content overlaps under notch on landscape
+            );
+        }
+    }
+}