Composing custom layouts with SwiftUI
At a glance
| Item | Summary |
|---|---|
| Purpose | Arrange views in your app’s interface using layout tools that SwiftUI provides. |
| App architecture | A Swift sample with the source-visible chain CustomLayoutSampleApp → ContentView → Model → SwiftUI APIs. |
| Main patterns | SwiftUI environment injection, Publisher-backed observable state |
| Project style | 12 scanned source file(s) across Swift, organized around ranked entry, type, and file boundaries. |
Project structure
Source bundle/
└── CustomLayoutSample/
├── CustomLayoutSampleApp.swift
├── Views/
│ ├── ContentView.swift
│ ├── ButtonStack.swift
│ ├── Avatar.swift
│ ├── Leaderboard.swift
│ ├── Podium.swift
│ └── Profile.swift
├── Model/
│ ├── Model.swift
│ └── Pet.swift
└── Layouts/
├── MyEqualWidthVStack.swift
├── MyRadialLayout.swift
└── MyEqualWidthHStack.swift
Structure observations
- Architecturally prominent files are ranked from entry points and role-named declarations; resource-only paths are omitted.
- Primary languages: Swift.
- The verified tree contains 4 project/configuration file(s) and 15 source declaration(s).
Overall architecture
flowchart LR
N1["CustomLayoutSampleApp"]
N2["ContentView"]
N3["Model"]
N4["SwiftUI APIs"]
N1 --> N2
N2 --> N3
N3 --> N4
Reference code
CustomLayoutSample/CustomLayoutSampleApp.swift:18 — architecture anchor
@main
struct CustomLayoutSampleApp: App {
// ...
}Interpretation
The arrows summarize the source-visible entry, role-named types or folders, and framework direction; when nodes come from structural folders, the sequence is a high-level interpretation rather than proof that every adjacent node calls the next. Ownership is claimed only where the next section cites a stored property or assignment. The diagram is intentionally limited to the dominant path into SwiftUI.
Ownership and state
classDiagram
CustomLayoutSampleApp *-- Model : model
Model *-- Array : pets
Model *-- Model : startData
Buttons o-- Model : model
Ownership evidence
CustomLayoutSample/CustomLayoutSampleApp.swift:21 — stored dependency or nearest verified ownership anchor
@main
struct CustomLayoutSampleApp: App {
// ...
@StateObject private var model: Model = Model.startData
// ...
}| Owner | Object or state | Relationship | Mutation authority |
|---|---|---|---|
CustomLayoutSampleApp |
Model (model) |
owns wrapper-managed state | Owning lexical scope |
Model |
Array (pets) |
owns value state | App/module collaborators |
Model |
Model (startData) |
creates and retains | App/module collaborators |
Buttons |
Model (model) |
receives environment-provided state | The environment provider is authoritative |
Composition arrows indicate a source-visible construction expression or locally owned value state; aggregation means the owner stores or receives a dependency without proving exclusive lifetime ownership.
Class and protocol design
CustomLayoutSample/CustomLayoutSampleApp.swift:19 — representative type boundary
struct CustomLayoutSampleApp: App {
// ...
}| Type | Responsibility | Depends on or conforms to |
|---|---|---|
CustomLayoutSampleApp |
Application entry and top-level composition | App |
ContentView |
User-interface presentation and input forwarding | View |
Model |
Feature data or observable state | ObservableObject |
ButtonStack |
Represents a feature value or composable behavior | View |
Buttons |
Represents a feature value or composable behavior | View |
MyEqualWidthVStack |
Represents a feature value or composable behavior | Layout |
CacheData |
Represents feature data | Concrete collaborators/imported frameworks |
MyRadialLayout |
Represents a feature value or composable behavior | Layout |
Rank |
Represents a feature value or composable behavior | LayoutValueKey |
Avatar |
Represents a feature value or composable behavior | View |
No local protocol conformance is claimed as protocol-oriented design; external framework conformances are listed only as dependencies.
Access control
| Symbol | Access | Verified effect | Likely rationale |
|---|---|---|---|
model (CustomLayoutSample/CustomLayoutSampleApp.swift:21) |
private |
Use is restricted to the lexical declaration and same-file extensions allowed by Swift. | Inference: keep state mutation or dependency lifetime inside the owning implementation. |
maxSize (CustomLayoutSample/Layouts/MyEqualWidthHStack.swift:105) |
private |
Use is restricted to the lexical declaration and same-file extensions allowed by Swift. | Inference: hide an implementation step that is not part of the collaboration surface. |
spacing (CustomLayoutSample/Layouts/MyEqualWidthHStack.swift:118) |
private |
Use is restricted to the lexical declaration and same-file extensions allowed by Swift. | Inference: hide an implementation step that is not part of the collaboration surface. |
maxSize (CustomLayoutSample/Layouts/MyEqualWidthVStack.swift:149) |
private |
Use is restricted to the lexical declaration and same-file extensions allowed by Swift. | Inference: hide an implementation step that is not part of the collaboration surface. |
Reference code
CustomLayoutSample/CustomLayoutSampleApp.swift:21 — representative boundary
@main
struct CustomLayoutSampleApp: App {
// ...
@StateObject private var model: Model = Model.startData
// ...
}Swift declarations without a modifier are internal; explicit private, fileprivate, private(set), public, or open entries above are interpreted by language semantics. Objective-C/C samples instead rely on header and implementation boundaries, which are not equivalent to Swift lexical privacy.
Logic ownership and placement
| Logic | Owning type or file | Placement rationale |
|---|---|---|
| Application entry and top-level composition | CustomLayoutSampleApp |
The source’s App suffix makes this role explicit. |
| Feature data or observable state | Model |
The source’s Model suffix makes this role explicit. |
| User-interface presentation and input forwarding | ContentView |
The source’s View suffix makes this role explicit. |
Design patterns
| Pattern | Source evidence | Purpose or tradeoff |
|---|---|---|
| SwiftUI environment injection | CustomLayoutSample/Views/ButtonStack.swift:51 |
The environment supplies state or a capability without threading it through every initializer. |
| Publisher-backed observable state | CustomLayoutSample/Model/Model.swift:27 |
Published properties notify observers while mutation remains with the state object. |
Naming conventions
- Types: App: CustomLayoutSampleApp; Model: Model; View: ContentView.
- Protocols: no local protocol declaration in the scanned source.
- Methods:
rank,sizeThatFits,placeSubviews,makeCache,maxSize,spacing,getOffset,residual. - Files:
CustomLayoutSample/CustomLayoutSampleApp.swift,CustomLayoutSample/Views/ContentView.swift,CustomLayoutSample/Model/Model.swift,CustomLayoutSample/Views/ButtonStack.swift,CustomLayoutSample/Layouts/MyEqualWidthVStack.swift,CustomLayoutSample/Layouts/MyRadialLayout.swift.
Architecture takeaways
CustomLayoutSampleAppis the main source-visible entry or composition anchor for this sample.- Framework work reaches SwiftUI through a deliberately small high-level chain; the detailed API graph remains inside the cited implementation files.
- Stored-property evidence identifies lifecycle collaboration; it does not by itself prove exclusive object ownership.
- Access-control conclusions separate verified language visibility from the likely design rationale.
- The source does not justify labeling the design protocol-oriented.
Source map
| Source file | Relevant symbols |
|---|---|
CustomLayoutSample/CustomLayoutSampleApp.swift |
CustomLayoutSampleApp |
CustomLayoutSample/Views/ContentView.swift |
ContentView, ContentView_Previews |
CustomLayoutSample/Model/Model.swift |
Model |
CustomLayoutSample/Views/ButtonStack.swift |
ButtonStack, Buttons, ButtonStack_Previews |
CustomLayoutSample/Layouts/MyEqualWidthVStack.swift |
MyEqualWidthVStack, CacheData |
CustomLayoutSample/Layouts/MyRadialLayout.swift |
MyRadialLayout, Rank |
CustomLayoutSample/Views/Avatar.swift |
Avatar, Avatar_Previews |
CustomLayoutSample/Views/Leaderboard.swift |
Leaderboard, Leaderboard_Previews |
CustomLayoutSample/Views/Podium.swift |
Podium, Podium_Previews |
CustomLayoutSample/Views/Profile.swift |
Profile, Profile_Previews |