Add readme

Author: ole

LayoutInspector.xcodeproj/project.pbxproj

@@ -24,6 +24,7 @@
 		5D2245F728D8FDB500E84C7D /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
 		5D2245FE28D9015300E84C7D /* DebugLayout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DebugLayout.swift; sourceTree = "<group>"; };
 		5D22463828DA2E7500E84C7D /* DebugLayoutLog.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DebugLayoutLog.swift; sourceTree = "<group>"; };
+		5DB6BE4F28DE4D4E00280F5E /* README.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = README.md; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -40,6 +41,7 @@
 		5D2245E328D8FDB400E84C7D = {
 			isa = PBXGroup;
 			children = (
+				5DB6BE4F28DE4D4E00280F5E /* README.md */,
 				5D2245EE28D8FDB400E84C7D /* LayoutInspector */,
 				5D2245ED28D8FDB400E84C7D /* Products */,
 			);

LayoutInspector/ContentView.swift

@@ -7,7 +7,7 @@ struct ContentView: View {
     @State private var generation: Int = 0
 
     var subject: some View {
-        Text("Hello")
+        Text("Hello world")
             .debugLayout("Text")
             .padding()
             .debugLayout("padding")

README.md

@@ -0,0 +1,46 @@
+#  SwiftUI Layout Inspector
+
+Ole Begemann, 2022-09
+
+Based on: [objc.io, Swift Talk episode 318, Inspecting SwiftUI's Layout Process (2022-08)](https://talk.objc.io/episodes/S01E318-inspecting-swiftui-s-layout-process)
+
+Inspect the layout algorithm of SwiftUI views, i.e. what sizes views propose to
+their children and what sizes they return to their parents.
+
+## Requirements
+
+iOS 16.0 or macOS 13.0 (requires the `Layout` protocol).
+
+## Instructions
+
+1.  Edit the `subject: some View` property in `ContentView`. It should contain
+    the view tree you want to inspect.
+    
+2.  Add `.debugLayout()` to each view in the view tree whose layout algorithm
+    you want to inspect. 
+        
+    Example of a `subject` property with a few `debugLayout` inspection points:
+   
+    ```swift
+    var subject: some View {
+        Text("Hello world")
+            .debugLayout("Text")
+            .padding()
+            .debugLayout("padding")
+            .background {
+                Color.yellow
+                    .debugLayout("yellow")
+            }
+            .debugLayout("background")
+    }
+    ```
+
+4.  Build and run the app.
+
+    - The subject view is displayed on top.
+    - The table on the bottom displays the sizes that are being proposed at each
+      inspection point in the subject view ("Proposal", and the resulting view 
+      sizes ("Response").
+    - You can use the sliders to modify the size proposed to the subject view.
+    - Some views cache certain layout information. Press "Reset layout cache"
+      after modifying the sliders to reset the caches.