Skip to content

Commit d334c21

Browse files
committed
Update and extend readme
1 parent 5b5b6cb commit d334c21

File tree

2 files changed

+49
-23
lines changed

2 files changed

+49
-23
lines changed

DemoApp/README.md

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,12 @@
1-
# SwiftUI Layout Inspector
2-
3-
Ole Begemann, 2022-09
4-
5-
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)
6-
7-
Inspect the layout algorithm of SwiftUI views, i.e. what sizes views propose to
8-
their children and what sizes they return to their parents.
9-
10-
![Layout Inspector screenshot on iPhone simulator](assets/LayoutInspector-screenshot.png)
11-
12-
## Requirements
13-
14-
iOS 16.0 or macOS 13.0 (requires the `Layout` protocol).
1+
# SwiftUI Layout Inspector Demo App
152

163
## Instructions
174

185
1. Edit the `subject: some View` property in `ContentView`. It should contain
196
the view tree you want to inspect.
207

21-
2. Add `.debugLayout()` at each point in the view tree where you want to inspect
22-
the layout algorithm (what sizes are being proposed and returned).
8+
2. Add `.debugLayout()` at each point in the view tree where you want to
9+
inspect the layout algorithm (what sizes are being proposed and returned).
2310

2411
Example of a `subject` property with a few inspection points:
2512

README.md

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,62 @@
1-
# DebugLayout
1+
# SwiftUI Layout Inspector
22

3-
Ole Begemann, 2022-09
3+
By [Ole Begemann](https://oleb.net/)
44

5-
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)
5+
A Swift library (and demo app) for learning how the SwiftUI layout system works,
6+
and for debugging your own layout code. Inspect the layout behavior of SwiftUI
7+
views, i.e. what sizes views propose to their children and how a view determines
8+
its own size.
69

7-
Inspect the layout algorithm of SwiftUI views, i.e. what sizes views propose to
8-
their children and what sizes they return to their parents.
10+
![Layout Inspector screenshot on iPhone simulator](assets/LayoutInspector-screenshot.png)
11+
12+
## Motivation
13+
14+
At its core, SwiftUI’s layout algorithm is wonderfully simple:
15+
16+
1. Each parent view proposes a size to its child view(s). Width and height are
17+
both optional values; either one (or both) can be `nil`.
18+
19+
2. The child view determines its own size, taking the proposed size into
20+
account, as well as the sizes of its own children (it’s a recursive
21+
process).
22+
23+
3. The child reports its size back to its parent. The parent cannot change the
24+
size: in SwiftUI, each view determines its own size.
25+
26+
4. The parent view positions its children.
27+
28+
Complex layouts in SwiftUI can be achieved by composing built-in views and view
29+
modifiers. The tricky part about understanding the SwiftUI layout system is
30+
learning the layout behavior of the built-in views. This package aims to help
31+
you learn.
32+
33+
## Components
34+
35+
Layout Inspector consists of:
36+
37+
- The `LayoutInspector` library, provided as a SwiftPM package. Add it to your
38+
own SwiftUI app to debug your layout code.
39+
40+
- The `LayoutInspectorDemo` app, an iOS and Mac app that shows Layout Inspector
41+
in action.
942

1043
## Requirements
1144

1245
iOS 16.0 or macOS 13.0 (requires the `Layout` protocol).
1346

1447
## Instructions
1548

16-
1. `import DebugLayout`
49+
1. `import LayoutInspector`
1750

1851
2. Add `.debugLayout()` at each point in a view tree where you want to inspect
1952
the layout algorithm (what sizes are being proposed and returned).
2053

2154
3. At the top of the view tree you want to inspect, add `.startDebugLayout()`.
2255

23-
See the README of the sample app for a complete example.
56+
See the README of the demo app for a complete example.
57+
58+
## Acknowledgements
59+
60+
Idea and initial code based on: [objc.io, Swift Talk episode 318, Inspecting SwiftUI's Layout Process (2022-08-19)](https://talk.objc.io/episodes/S01E318-inspecting-swiftui-s-layout-process)
61+
62+
Runtime warnings in Xcode: [Point-Free, Unobtrusive runtime warnings for libraries (2022-01-03)](https://www.pointfree.co/blog/posts/70-unobtrusive-runtime-warnings-for-libraries)

0 commit comments

Comments
 (0)