|
1 |
| -# DebugLayout |
| 1 | +# SwiftUI Layout Inspector |
2 | 2 |
|
3 |
| -Ole Begemann, 2022-09 |
| 3 | +By [Ole Begemann](https://oleb.net/) |
4 | 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) |
| 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. |
6 | 9 |
|
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 | + |
| 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. |
9 | 42 |
|
10 | 43 | ## Requirements
|
11 | 44 |
|
12 | 45 | iOS 16.0 or macOS 13.0 (requires the `Layout` protocol).
|
13 | 46 |
|
14 | 47 | ## Instructions
|
15 | 48 |
|
16 |
| -1. `import DebugLayout` |
| 49 | +1. `import LayoutInspector` |
17 | 50 |
|
18 | 51 | 2. Add `.debugLayout()` at each point in a view tree where you want to inspect
|
19 | 52 | the layout algorithm (what sizes are being proposed and returned).
|
20 | 53 |
|
21 | 54 | 3. At the top of the view tree you want to inspect, add `.startDebugLayout()`.
|
22 | 55 |
|
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