Merge pull request #85 from mirego/add_safeAreaInsets

Examples now support iOS 11 and iPhone X landscape mode

Author: Luc Dion

.travis.yml

@@ -1,11 +1,12 @@
 language: objective-c
-osx_image: xcode8.3
+osx_image: xcode9
 
 env:
   matrix:
+    - SCHEME=PinLayout       SDK=iphonesimulator11.0
     - SCHEME=PinLayout       SDK=iphonesimulator10.3
-    - SCHEME=PinLayoutSample SDK=iphonesimulator10.3
-    - SCHEME=PinLayoutTVOS   SDK=appletvsimulator10.2 
+    - SCHEME=PinLayoutSample SDK=iphonesimulator11.0
+    - SCHEME=PinLayoutTVOS   SDK=appletvsimulator11.0 
 
 before_install:
 #  - brew outdated xctool || brew upgrade xctool;

Example/PinLayoutSample.xcodeproj/project.pbxproj

@@ -22,6 +22,7 @@
 		246813001F8D013500462E53 /* TodayViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 246812FF1F8D013500462E53 /* TodayViewController.swift */; };
 		246813031F8D013500462E53 /* MainInterface.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 246813011F8D013500462E53 /* MainInterface.storyboard */; };
 		246813071F8D013500462E53 /* PinLayoutTodayExtension.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 246812FB1F8D013500462E53 /* PinLayoutTodayExtension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
+		247157941F87BD680003424F /* UIEdgeInsets+PinLayout.swift in Sources */ = {isa = PBXBuildFile; fileRef = 247157931F87BD680003424F /* UIEdgeInsets+PinLayout.swift */; };
 		249326891EEEEE3D00BCB814 /* Stylesheet.swift in Sources */ = {isa = PBXBuildFile; fileRef = 249326881EEEEE3D00BCB814 /* Stylesheet.swift */; };
 		2493268C1EEEEFF100BCB814 /* BaseViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2493268B1EEEEFF100BCB814 /* BaseViewController.swift */; };
 		2493268E1EEEF02700BCB814 /* BaseView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2493268D1EEEF02700BCB814 /* BaseView.swift */; };
@@ -128,6 +129,7 @@
 		246812FF1F8D013500462E53 /* TodayViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TodayViewController.swift; sourceTree = "<group>"; };
 		246813021F8D013500462E53 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/MainInterface.storyboard; sourceTree = "<group>"; };
 		246813041F8D013500462E53 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		247157931F87BD680003424F /* UIEdgeInsets+PinLayout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIEdgeInsets+PinLayout.swift"; sourceTree = "<group>"; };
 		249326881EEEEE3D00BCB814 /* Stylesheet.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Stylesheet.swift; sourceTree = "<group>"; };
 		2493268B1EEEEFF100BCB814 /* BaseViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BaseViewController.swift; sourceTree = "<group>"; };
 		2493268D1EEEF02700BCB814 /* BaseView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BaseView.swift; sourceTree = "<group>"; };
@@ -244,6 +246,7 @@
 				2493268B1EEEEFF100BCB814 /* BaseViewController.swift */,
 				2439CC381E665C6B003326FB /* BasicView.swift */,
 				249326881EEEEE3D00BCB814 /* Stylesheet.swift */,
+				247157931F87BD680003424F /* UIEdgeInsets+PinLayout.swift */,
 			);
 			path = Common;
 			sourceTree = "<group>";
@@ -628,6 +631,7 @@
 				241637741F8E4BC200EE703A /* IntroObjectiveCViewController.m in Sources */,
 				2439CC541E665C6B003326FB /* RelativeView.swift in Sources */,
 				2439CC551E665C6B003326FB /* RelativeViewController.swift in Sources */,
+				247157941F87BD680003424F /* UIEdgeInsets+PinLayout.swift in Sources */,
 				24D18D1E1F3DED0D008129EF /* IntroRTLViewController.swift in Sources */,
 				24A9C2031EF16A3E00F2CF64 /* AutoAdjustingSizeView.swift in Sources */,
 				24D18D1D1F3DED0D008129EF /* IntroRTLView.swift in Sources */,

Example/PinLayoutSample/UI/Common/BaseFormView.swift

@@ -46,12 +46,12 @@ class BaseFormView: BaseView {
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        formScrollView.pin.topLeft().bottomRight()
+        formScrollView.pin.top().left().bottom().right().margin(safeArea)
     }
 
-    override func didChangeLayoutGuides() {
-        super.didChangeLayoutGuides()
-        formScrollView.contentOffset = CGPoint(x: 0, y: topLayoutGuide)
+    override func safeAreaDidChange() {
+        super.safeAreaDidChange()
+        formScrollView.contentOffset = CGPoint(x: 0, y: safeArea.top)
     }
 
     @objc

Example/PinLayoutSample/UI/Common/BaseView.swift

@@ -20,8 +20,18 @@
 import UIKit
 
 class BaseView: UIView {
-    fileprivate (set) var topLayoutGuide: CGFloat = 0
-    fileprivate (set) var bottomLayoutGuide: CGFloat = 0
+    private var legacySafeArea: UIEdgeInsets = .zero
+    
+    // safeArea returns UIView.safeAreaInsets for iOS 11+ or
+    // an UIEdgeInsets initialized with the UIViewController's topLayoutGuide and
+    // bottomLayoutGuide for other iOS versions.
+    var safeArea: UIEdgeInsets {
+        if #available(iOS 11.0, *) {
+            return safeAreaInsets
+        } else {
+            return legacySafeArea
+        }
+    }
 
     init() {
         super.init(frame: .zero)
@@ -32,25 +42,17 @@ class BaseView: UIView {
         fatalError("init(coder:) has not been implemented")
     }
 
-    func setLayoutGuides(top: CGFloat, bottom: CGFloat) {
-        var didChange = false
-        
-        if top != topLayoutGuide {
-            topLayoutGuide = top
-            didChange = true
-        }
-        
-        if bottom != bottomLayoutGuide {
-            bottomLayoutGuide = bottom
-            didChange = true
-        }
-        
-        if didChange {
-            didChangeLayoutGuides()
-        }
+    func setSafeArea(_ safeArea: UIEdgeInsets) {
+        guard safeArea != self.safeArea else { return }
+        legacySafeArea = safeArea
+        safeAreaDidChange()
     }
 
-    func didChangeLayoutGuides() {
+    func safeAreaDidChange() {
         setNeedsLayout()
     }
+    
+    override func safeAreaInsetsDidChange() {
+        safeAreaDidChange()
+    }
 }

Example/PinLayoutSample/UI/Common/BaseViewController.swift

@@ -20,12 +20,12 @@
 import UIKit
 
 class BaseViewController: UIViewController {
-    
     override func viewWillLayoutSubviews() {
         super.viewWillLayoutSubviews()
 
-        if let view = view as? BaseView {
-            view.setLayoutGuides(top: topLayoutGuide.length, bottom: bottomLayoutGuide.length)
+        if #available(iOS 11.0, *) {
+        } else if let view = view as? BaseView {
+            view.setSafeArea(UIEdgeInsets(top: topLayoutGuide.length, left: 0, bottom: bottomLayoutGuide.length, right: 0))
         }
     }
 }

Example/PinLayoutSample/UI/Common/BasicView.swift

@@ -43,7 +43,7 @@ class BasicView: UIView {
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        label.pin.topLeft().right().margin(4).fitSize()
+        label.pin.top().left().right().margin(4).fitSize()
     }
 
     var sizeThatFitsExpectedArea: CGFloat = 40 * 40

Example/PinLayoutSample/UI/Common/UIEdgeInsets+PinLayout.swift

@@ -0,0 +1,33 @@
+//
+//  UIEdgeInsets+PinLayout.swift
+//  PinLayoutSample
+//
+//  Created by DION, Luc (MTL) on 2017-10-06.
+//  Copyright © 2017 Mirego. All rights reserved.
+//
+
+import UIKit
+
+extension UIEdgeInsets {
+    func insetBy(dx: CGFloat, dy: CGFloat) -> UIEdgeInsets {
+        return UIEdgeInsets(top: self.top + dy, left: self.left + dx, bottom: self.bottom + dy, right: self.right + dx)
+    }
+    
+    func minInsets(_ insets: UIEdgeInsets) -> UIEdgeInsets {
+        return UIEdgeInsets(top: minValue(self.top, minValue: insets.top),
+                            left: minValue(self.left, minValue: insets.left),
+                            bottom: minValue(self.bottom, minValue: insets.bottom),
+                            right: minValue(self.right, minValue: insets.right))
+    }
+    
+    func minInsets(dx: CGFloat, dy: CGFloat) -> UIEdgeInsets {
+        return UIEdgeInsets(top: minValue(self.top, minValue: dy),
+                            left: minValue(self.left, minValue: dx),
+                            bottom: minValue(self.bottom, minValue: dy),
+                            right: minValue(self.right, minValue: dx))
+    }
+    
+    fileprivate func minValue(_ value: CGFloat, minValue: CGFloat) -> CGFloat {
+        return value >= minValue ? value : minValue
+    }
+}

Example/PinLayoutSample/UI/Examples/AdjustToContainer/AdjustToContainerView.swift

@@ -21,17 +21,19 @@ import UIKit
 import PinLayout
 
 class AdjustToContainerView: BaseView {
-
+    fileprivate let contentView = UIView()
     fileprivate let languageSelectorView = ChoiceSelectorView(text: "What is your favorite language?", choices: ["Swift", "Objective-C", "C++"])
     fileprivate let swiftOpinionSelectorView = ChoiceSelectorView(text: "Overall, are you satisfied with the Swift performance in your projects?", choices: ["Yes", "No"])
     fileprivate let swiftUsageSelectorView = ChoiceSelectorView(text: "How often do you typically use Swift?", choices: ["Daily", "Weekly", "Montly", "Do not use"])
 
     override init() {
         super.init()
 
-        addSubview(languageSelectorView)
-        addSubview(swiftOpinionSelectorView)
-        addSubview(swiftUsageSelectorView)
+        addSubview(contentView)
+
+        contentView.addSubview(languageSelectorView)
+        contentView.addSubview(swiftOpinionSelectorView)
+        contentView.addSubview(swiftUsageSelectorView)
     }
 
     required init?(coder aDecoder: NSCoder) {
@@ -41,7 +43,10 @@ class AdjustToContainerView: BaseView {
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        languageSelectorView.pin.top(topLayoutGuide).left().right().fitSize()
+        // Layout the contentView using the view's safeArea.
+        contentView.pin.top().bottom().left().right().margin(safeArea)
+        
+        languageSelectorView.pin.top().left().right().fitSize()
         swiftOpinionSelectorView.pin.below(of: languageSelectorView, aligned: .left).right().marginTop(10).fitSize()
         swiftUsageSelectorView.pin.below(of: swiftOpinionSelectorView, aligned: .left).right().marginTop(10).fitSize()
     }

Example/PinLayoutSample/UI/Examples/AdjustToContainer/Subviews/ChoiceSelectorView.swift

@@ -46,27 +46,30 @@ class ChoiceSelectorView: UIView {
 
     override func layoutSubviews() {
         super.layoutSubviews()
-        _ = layout(size: frame.size)
+        _ = layout()
     }
 
     override func sizeThatFits(_ size: CGSize) -> CGSize {
-        return layout(size: size)
+        // 1) Set the width to the specified width
+        self.pin.width(size.width)
+        
+        // 2) Layout the contentView's controls
+        return layout()
     }
 
-    fileprivate func layout(size: CGSize) -> CGSize {
-        let width = size.width
+    fileprivate func layout() -> CGSize {
         let margin: CGFloat = 12
 
         if frame.width > 500 {
             // The UISegmentedControl is at the top-right corner and the label takes the remaining horizontal space.
-            segmentedControl.pin.topRight().margin(margin)
+            segmentedControl.pin.top().right().margin(margin)
             textLabel.pin.top().left().left(of: segmentedControl).margin(margin).fitSize()
         } else {
             // The UISegmentedControl is placed below the label.
             textLabel.pin.top().left().right().margin(margin).fitSize()
             segmentedControl.pin.below(of: textLabel).right().margin(margin)
         }
 
-        return CGSize(width: width, height: max(textLabel.frame.maxY, segmentedControl.frame.maxY) + margin)
+        return CGSize(width: frame.width, height: max(textLabel.frame.maxY, segmentedControl.frame.maxY) + margin)
     }
 }

Example/PinLayoutSample/UI/Examples/AutoAdjustingSizeView/AutoAdjustingSizeView.swift

@@ -74,26 +74,27 @@ class AutoAdjustingSizeView: BaseView {
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        contentScrollView.pin.topLeft().bottomRight()
+        // Layout the contentScrollView using the view's safeArea.
+        contentScrollView.pin.top().bottom().left().right().margin(safeArea)
 
         row1.pin.top().left().right().height(40)
         row1Item1.pin.top().left().bottom().width(50).margin(2)
         row1Item2.pin.right(of: row1Item1, aligned: .top).bottomRight().margin(0, 2, 2, 2)
 
         row2.pin.below(of: row1, aligned: .left).size(of: row1).marginTop(10)
         row2Item1.pin.top().right().bottom().width(150).width(25%).margin(2)
-        row2Item2.pin.left(of: row2Item1, aligned: .top).bottomLeft().margin(0, 2, 2, 2)
+        row2Item2.pin.left(of: row2Item1, aligned: .top).left().bottom().margin(0, 2, 2, 2)
 
         row3.pin.below(of: row2, aligned: .left).size(of: row1).marginTop(10)
         row3Item1.pin.topCenter().width(50).bottom().margin(2)
-        row3Item2.pin.left(of: row3Item1, aligned: .top).bottomLeft().margin(0, 2, 2, 2)
-        row3Item3.pin.right(of: row3Item1, aligned: .top).bottomRight().margin(0, 2, 2, 2)
+        row3Item2.pin.left(of: row3Item1, aligned: .top).left().bottom().margin(0, 2, 2, 2)
+        row3Item3.pin.right(of: row3Item1, aligned: .top).right().bottom().margin(0, 2, 2, 2)
 
         row4.pin.below(of: row3, aligned: .left).size(of: row1).marginTop(10)
         row4Item1.pin.top().left().width(25%).bottom().margin(2)
         row4Item2.pin.right(of: row4Item1, aligned: .top).width(50%).bottom().margin(0, 2, 2, 2)
-        row4Item3.pin.right(of: row4Item2, aligned: .top).bottomRight().margin(0, 2, 2, 2)
+        row4Item3.pin.right(of: row4Item2, aligned: .top).right().bottom().margin(0, 2, 2, 2)
 
-        contentScrollView.contentSize = CGSize(width: frame.width, height: row4.frame.maxY)
+        contentScrollView.contentSize = CGSize(width: contentScrollView.frame.width, height: row4.frame.maxY)
     }
 }