Mastering Resizable Layouts with SwiftUI's SplitView Components ( HSplitView & VSplitView)

The fundamental benefit of these components is that they automatically handle the user interaction required for resizing

PublishedNovember 17, 2025

•2 min read•View as Markdown

Mastering Resizable Layouts with SwiftUI's SplitView Components ( HSplitView & VSplitView)

Dev Faganello

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to Use ContextMenu in SwiftUI

One of the most effective ways to improve the user experience of an iOS app is by utilizing features that feel native and familiar to the user.

Nov 27, 20252 min read

Swift Tip: A Cleaner Way to Handle Optional Defaults in Strings

https://youtu.be/L0X1BK4D6mc Handling Optionals is a bread-and-butter task for Swift developers. We all know the standard way to unwrap a value or provide a fallback, but things get tricky when we are dealing with String interpolation and data type...

Nov 21, 20253 min read

Swift Tip: A Cleaner Way to Handle Optional Defaults in Strings

Parallelism in Swift Concurrency with async let

Swift's concurrency model provides a powerful and elegant solution to Parallelism: the async let binding.

Nov 17, 20253 min read

Parallelism in Swift Concurrency with async let

The Essential Difference Between .task and .onAppear in SwiftUI

https://www.youtube.com/watch?v=CiObtyFFuSs The video is in Portuguese but with English subtitles This article explores the critical distinction between the .task and .onAppear view modifiers in SwiftUI, a common point of confusion and a frequent...

Nov 16, 20253 min read

The Essential Difference Between .task and .onAppear in SwiftUI

Dev Faganello

12 posts

Basic Implementation:

A simple implementation of a resizable interface involves using HSplitView to divide the application window into two distinct, adjustable sections.

For example, to create a layout with a blue panel on the left and a purple panel on the right, the structure is straightforward:

struct ContentView: View { var body: some View { HSplitView { // Left Panel Color.blue .frame(minWidth: 100) // Right Panel Color.purple .frame(minWidth: 100) } } }

When the application runs, the user can click and drag the vertical divider between the blue and purple panels to resize them, and the views will automatically adapt to the new dimensions.

Advanced Layouts

For more complex application designs, HSplitView and VSplitView can be nested to create multi-dimensional, resizable layouts. This technique allows for both horizontal and vertical resizing within the same window.

Consider a scenario where the right-hand side of the horizontal split needs to be further divided vertically into a red and a green section. This is achieved by placing a VSplitView inside the right-hand pane of the HSplitView:

struct ComplexContentView: View { var body: some View { HSplitView { // Left Panel (Blue) Color.blue .frame(minWidth: 100) // Right Panel (Vertically Split) VSplitView { // Top-Right Panel Color.red .frame(minHeight: 50) // Bottom-Right Panel Color.green .frame(minHeight: 50) } } } }

Controlling Resizing with Constraints

While the default behavior allows for free resizing, developers often need to impose limits to maintain a usable interface. This is accomplished using standard SwiftUI frame modifiers.

By applying modifiers like .frame(maxWidth: 200) to a view within a split view, you can set a maximum size for that pane. The divider will stop moving once the pane reaches this constraint, ensuring that critical content areas are not completely obscured or resized beyond a functional limit.

For instance, to ensure the left panel never exceeds 200 points in width:

HSplitView { Color.blue .frame(minWidth: 100, maxWidth: 200) // Constrained Panel Color.purple .frame(minWidth: 100) // Flexible Panel }

Command Palette

Comments

More from this blog

Basic Implementation:

Advanced Layouts

Controlling Resizing with Constraints