Updates to StackViewSynthesis2 and LearnAboutAutoLayout

LearnAboutAutoLayout.playground/Pages/Ambiguous Layouts.xcplaygroundpage/Contents.swift

@@ -0,0 +1,31 @@
+import UIKit
+import PlaygroundSupport
+
+// This is our sample container view which allows us
+// to adjust the width and height of the container
+let liveView = EHAdjustableContainerView(frame: CGRect(x: 0.0, y: 0.0, width: 512.0, height: 512.0))
+
+let label = UILabel(frame: .zero)
+label.translatesAutoresizingMaskIntoConstraints = false
+label.backgroundColor = .purple
+label.text = "111"
+label.textColor = .white
+label.font = UIFont.systemFont(ofSize: 32.0)
+
+liveView.containerView.addSubview(label)
+
+// Let's center the label vertically.
+let centerY = NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
+liveView.containerView.addConstraint(centerY)
+
+// But we won't specify a horizontal position constraint.
+// Where does the view wind up?
+
+//let isLabelAmbiguous = label.hasAmbiguousLayout
+//let isContainerAmbiguous = liveView.containerView.hasAmbiguousLayout
+
+
+PlaygroundPage.current.needsIndefiniteExecution = true
+PlaygroundPage.current.liveView = liveView
+

LearnAboutAutoLayout.playground/Pages/Ambiguous Layouts.xcplaygroundpage/timeline.xctimeline

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Timeline
+   version = "3.0">
+   <TimelineItems>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=24&amp;CharacterRangeLoc=905&amp;EndingColumnNumber=25&amp;EndingLineNumber=24&amp;StartingColumnNumber=1&amp;StartingLineNumber=24&amp;Timestamp=523680276.124883"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=41&amp;CharacterRangeLoc=959&amp;EndingColumnNumber=42&amp;EndingLineNumber=25&amp;StartingColumnNumber=1&amp;StartingLineNumber=25&amp;Timestamp=523680276.125081"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+   </TimelineItems>
+</Timeline>

LearnAboutAutoLayout.playground/Pages/Constraint Inequalities.xcplaygroundpage/Contents.swift

@@ -0,0 +1,54 @@
+import UIKit
+import PlaygroundSupport
+
+// This is our sample container view which allows us
+// to adjust the width and height of the container
+let liveView = EHAdjustableContainerView(frame: CGRect(x: 0.0, y: 0.0, width: 512.0, height: 512.0))
+
+let image = UIImageView(image: UIImage(named: "steve-large.jpg"))
+image.translatesAutoresizingMaskIntoConstraints = false
+
+liveView.containerView.addSubview(image)
+
+// Center the image vertically
+let centerY = NSLayoutConstraint(item: image, attribute: .centerY, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
+centerY.priority = UILayoutPriorityRequired
+// Center the image horizontally
+let centerX = NSLayoutConstraint(item: image, attribute: .centerX, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .centerX, multiplier: 1.0, constant: 0.0)
+centerX.priority = UILayoutPriorityRequired
+
+// Make the height of the image equal to the width
+let aspect1 = NSLayoutConstraint(item: image, attribute: .height, relatedBy: .equal,
+                                 toItem: image, attribute: .width, multiplier: 1.0, constant: 0.0)
+aspect1.priority = UILayoutPriorityRequired
+
+// Make the image width half of the container width
+let imageHalf = NSLayoutConstraint(item: image, attribute: .width, relatedBy: .equal,
+                                   toItem: liveView.containerView, attribute: .width, multiplier: 0.5, constant: 0.0)
+imageHalf.priority = UILayoutPriorityRequired
+
+// Put a minimum width of 40
+let minWidth = NSLayoutConstraint(item: image, attribute: .width, relatedBy: .greaterThanOrEqual,
+                                 toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100.0)
+minWidth.priority = UILayoutPriorityRequired
+
+// Put a maximum width of 80
+let maxWidth = NSLayoutConstraint(item: image, attribute: .width, relatedBy: .lessThanOrEqual,
+                                  toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200.0)
+maxWidth.priority = UILayoutPriorityRequired
+
+// Then you need to add the constraints to the appropriate view.
+// You add it to the most immediate common ancestor of both views involved in the constraint.
+liveView.containerView.addConstraint(centerY)
+liveView.containerView.addConstraint(centerX)
+liveView.containerView.addConstraint(imageHalf)
+image.addConstraint(aspect1)
+image.addConstraint(minWidth)
+image.addConstraint(maxWidth)
+
+
+PlaygroundPage.current.needsIndefiniteExecution = true
+PlaygroundPage.current.liveView = liveView
+

LearnAboutAutoLayout.playground/Pages/Constraint Inequalities.xcplaygroundpage/timeline.xctimeline

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Timeline
+   version = "3.0">
+   <TimelineItems>
+   </TimelineItems>
+</Timeline>

LearnAboutAutoLayout.playground/Pages/Hugging and Compression.xcplaygroundpage/Contents.swift

@@ -0,0 +1,60 @@
+import UIKit
+import PlaygroundSupport
+
+// This is our sample container view which allows us
+// to adjust the width and height of the container
+let liveView = EHAdjustableContainerView(frame: CGRect(x: 0.0, y: 0.0, width: 512.0, height: 512.0))
+
+let label0 = UILabel(frame: .zero)
+label0.translatesAutoresizingMaskIntoConstraints = false
+label0.backgroundColor = .purple
+label0.text = "CH=750,CR=250"
+label0.textColor = .white
+label0.font = UIFont.systemFont(ofSize: 24.0)
+label0.setContentHuggingPriority(UILayoutPriorityDefaultHigh, for: .horizontal)
+label0.setContentCompressionResistancePriority(UILayoutPriorityDefaultLow, for: .horizontal)
+
+liveView.containerView.addSubview(label0)
+
+let label1 = UILabel(frame: .zero)
+label1.translatesAutoresizingMaskIntoConstraints = false
+label1.backgroundColor = .brown
+label1.text = "CH=250,CR=750"
+label1.textColor = .white
+label1.font = UIFont.systemFont(ofSize: 24.0)
+label1.setContentHuggingPriority(UILayoutPriorityDefaultLow, for: .horizontal)
+label1.setContentCompressionResistancePriority(UILayoutPriorityDefaultHigh, for: .horizontal)
+
+liveView.containerView.addSubview(label0)
+liveView.containerView.addSubview(label1)
+
+// Assign the vertical center of the label to the vertical center of the container
+let centerY0 = NSLayoutConstraint(item: label0, attribute: .centerY, relatedBy: .equal,
+                                  toItem: liveView.containerView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
+let centerY1 = NSLayoutConstraint(item: label1, attribute: .centerY, relatedBy: .equal,
+                                  toItem: liveView.containerView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
+
+// Position the label0 20 points to the right of the left edge of the container
+let label0leading = NSLayoutConstraint(item: label0, attribute: .leading, relatedBy: .equal,
+                                       toItem: liveView.containerView, attribute: .leading, multiplier: 1.0, constant: 20.0)
+
+// Position the label1 right edge 20 points from the right edge of the container
+let label1trailing = NSLayoutConstraint(item: liveView.containerView, attribute: .trailing, relatedBy: .equal,
+                                       toItem: label1, attribute: .trailing, multiplier: 1.0, constant: 20.0)
+
+// Put some space between the labels
+let label0label1gap = NSLayoutConstraint(item: label1, attribute: .leading, relatedBy: .equal,
+                                         toItem: label0, attribute: .trailing, multiplier: 1.0, constant: 20.0)
+
+// Then you need to add the constraints to the appropriate view.
+// You add it to the most immediate common ancestor of both views involved in the constraint.
+liveView.containerView.addConstraint(centerY0)
+liveView.containerView.addConstraint(centerY1)
+liveView.containerView.addConstraint(label0leading)
+liveView.containerView.addConstraint(label1trailing)
+liveView.containerView.addConstraint(label0label1gap)
+
+
+PlaygroundPage.current.needsIndefiniteExecution = true
+PlaygroundPage.current.liveView = liveView
+

LearnAboutAutoLayout.playground/Pages/Hugging and Compression.xcplaygroundpage/timeline.xctimeline

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Timeline
+   version = "3.0">
+   <TimelineItems>
+   </TimelineItems>
+</Timeline>

LearnAboutAutoLayout.playground/Pages/Introducing Constraints.xcplaygroundpage/Contents.swift

@@ -1,32 +1,37 @@
 import UIKit
 import PlaygroundSupport
 
+// This is our sample container view which allows us
+// to adjust the width and height of the container
 let liveView = EHAdjustableContainerView(frame: CGRect(x: 0.0, y: 0.0, width: 512.0, height: 512.0))
 
-let label0 = UILabel(frame: .zero)
-label0.translatesAutoresizingMaskIntoConstraints = false
-label0.backgroundColor = .green
-label0.text = "111"
-label0.textColor = .white
-label0.font = UIFont.systemFont(ofSize: 18.0)
-
-liveView.containerView.addSubview(label0)
-
-let label1 = UILabel(frame: .zero)
-label1.translatesAutoresizingMaskIntoConstraints = false
-label1.backgroundColor = .red
-label1.text = "22222"
-label1.textColor = .white
-label1.font = UIFont.systemFont(ofSize: 24.0)
-
-liveView.containerView.addSubview(label1)
-
-label0.centerYAnchor.constraint(equalTo: liveView.containerView.centerYAnchor).isActive = true
-label1.centerYAnchor.constraint(equalTo: liveView.containerView.centerYAnchor).isActive = true
-
-let horzConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-(20)-[label0]-(20)-[label1]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["label0": label0, "label1": label1])
-NSLayoutConstraint.activate(horzConstraints)
-
+let label = UILabel(frame: .zero)
+label.translatesAutoresizingMaskIntoConstraints = false
+label.backgroundColor = .purple
+label.text = "111"
+label.textColor = .white
+label.font = UIFont.systemFont(ofSize: 32.0)
+
+liveView.containerView.addSubview(label)
+
+// This is most manual way of writing constraints, and the
+// way that looks the most like an equation.
+//
+// label.centerY = liveView.containerView.centerY * 1.0 + 0.0
+let centerY = NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
+// label.leading = liveView.containerView.leading * 1.0 + 20.0
+let leading = NSLayoutConstraint(item: label, attribute: .leading, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .leading, multiplier: 1.0, constant: 20.0)
+
+// Then you need to add the constraints to the appropriate view.
+// You add it to the most immediate common ancestor of both views involved in the constraint.
+liveView.containerView.addConstraint(centerY)
+liveView.containerView.addConstraint(leading)
+
+// What happens if we add the constraint to a view too low in the tree?
+// What error do we get?
+//label.addConstraint(leading)
 
 PlaygroundPage.current.needsIndefiniteExecution = true
 PlaygroundPage.current.liveView = liveView

LearnAboutAutoLayout.playground/Pages/Unsatisfiable Layouts.xcplaygroundpage/Contents.swift

@@ -0,0 +1,37 @@
+import UIKit
+import PlaygroundSupport
+
+// This is our sample container view which allows us
+// to adjust the width and height of the container
+let liveView = EHAdjustableContainerView(frame: CGRect(x: 0.0, y: 0.0, width: 512.0, height: 512.0))
+
+let label = UILabel(frame: .zero)
+label.translatesAutoresizingMaskIntoConstraints = false
+label.backgroundColor = .purple
+label.text = "111"
+label.textColor = .white
+label.font = UIFont.systemFont(ofSize: 32.0)
+
+liveView.containerView.addSubview(label)
+
+// Assign the vertical center of the label to the vertical center of the container
+let centerY = NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
+// Position the label 20 points to the left of the left edge of the container
+let leading = NSLayoutConstraint(item: label, attribute: .leading, relatedBy: .equal,
+                                 toItem: liveView.containerView, attribute: .leading, multiplier: 1.0, constant: 20.0)
+// Now also add a conflicting constraint putting the
+// center of the label 40 points below the top.
+let top = NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal,
+                             toItem: liveView.containerView, attribute: .top, multiplier: 1.0, constant: 40.0)
+
+// Then you need to add the constraints to the appropriate view.
+// You add it to the most immediate common ancestor of both views involved in the constraint.
+liveView.containerView.addConstraint(centerY)
+liveView.containerView.addConstraint(leading)
+liveView.containerView.addConstraint(top)
+
+
+PlaygroundPage.current.needsIndefiniteExecution = true
+PlaygroundPage.current.liveView = liveView
+

LearnAboutAutoLayout.playground/Pages/Unsatisfiable Layouts.xcplaygroundpage/timeline.xctimeline

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Timeline
+   version = "3.0">
+   <TimelineItems>
+   </TimelineItems>
+</Timeline>

LearnAboutAutoLayout.playground/contents.xcplayground

@@ -2,6 +2,9 @@
 <playground version='6.0' target-platform='ios'>
     <pages>
         <page name='Introducing Constraints'/>
-        <page name='Untitled Page 2'/>
+        <page name='Ambiguous Layouts'/>
+        <page name='Unsatisfiable Layouts'/>
+        <page name='Constraint Inequalities'/>
+        <page name='Hugging and Compression'/>
     </pages>
 </playground>

StackViewSynthesis2/StackViewSynthesis2.xcodeproj/project.pbxproj

@@ -12,7 +12,6 @@
 		FD67181C1F33FE49001244A4 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = FD67181A1F33FE49001244A4 /* Main.storyboard */; };
 		FD67181E1F33FE49001244A4 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = FD67181D1F33FE49001244A4 /* Assets.xcassets */; };
 		FD6718211F33FE49001244A4 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = FD67181F1F33FE49001244A4 /* LaunchScreen.storyboard */; };
-		FD6718291F3402B1001244A4 /* vacation_spots.plist in Resources */ = {isa = PBXBuildFile; fileRef = FD6718281F3402B1001244A4 /* vacation_spots.plist */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -23,7 +22,6 @@
 		FD67181D1F33FE49001244A4 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		FD6718201F33FE49001244A4 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		FD6718221F33FE49001244A4 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		FD6718281F3402B1001244A4 /* vacation_spots.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = vacation_spots.plist; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -56,7 +54,6 @@
 		FD6718151F33FE49001244A4 /* StackViewSynthesis2 */ = {
 			isa = PBXGroup;
 			children = (
-				FD6718281F3402B1001244A4 /* vacation_spots.plist */,
 				FD6718161F33FE49001244A4 /* AppDelegate.swift */,
 				FD6718181F33FE49001244A4 /* ViewController.swift */,
 				FD67181A1F33FE49001244A4 /* Main.storyboard */,
@@ -130,7 +127,6 @@
 				FD6718211F33FE49001244A4 /* LaunchScreen.storyboard in Resources */,
 				FD67181E1F33FE49001244A4 /* Assets.xcassets in Resources */,
 				FD67181C1F33FE49001244A4 /* Main.storyboard in Resources */,
-				FD6718291F3402B1001244A4 /* vacation_spots.plist in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -308,6 +304,7 @@
 				FD6718271F33FE49001244A4 /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
 		};
 /* End XCConfigurationList section */
 	};

StackViewSynthesis2/StackViewSynthesis2/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,5 +1,15 @@
 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "idiom" : "iphone",
       "size" : "29x29",
@@ -30,6 +40,16 @@
       "size" : "60x60",
       "scale" : "3x"
     },
+    {
+      "idiom" : "ipad",
+      "size" : "20x20",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
     {
       "idiom" : "ipad",
       "size" : "29x29",
@@ -59,6 +79,11 @@
       "idiom" : "ipad",
       "size" : "76x76",
       "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "83.5x83.5",
+      "scale" : "2x"
     }
   ],
   "info" : {

StackViewSynthesis2/StackViewSynthesis2/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}