This is a custom SwiftUI view that manages the layout of two child views ("panes") by the position of a third "divider" view. Uses the excellent Composable Architecture (TCA) for Swift by Point-Free for handling state.
The three views are provided to a SplitView instance via SwiftUI @ViewBuilder arguments:
public var body: some View {
SplitView(store: store) {
Text("Hello")
} divider: {
HandleDivider()
} secondary: {
Text("World")
}.splitViewConfiguration(.init())
}
Here is a demo view that contains a vertical split view with the lower child pane holding a horizontal split view. The split view configurations enable dragging to close a child pane -- the horizontal split view allows it for both child panes, while the vertical orientation only allows it for the lower child pane. Here is a macOS rendering:
And below shows the iOS example:
- Divider and child views are any SwiftUI
@ViewBuildervalues you provide to theSplitViewview constructor. - Inject custom configurations through the
.splitViewConfigurationView modifier. - Dividers can close either or both child views if you drag the divider over a certain amount of the child view pane.
- Blurs the child view pane that will be closed.
- Double-clicking on a divider can close a view as well.
- State of child pane visibility is available for tracking in the SplitView's store.
The SplitViewConfiguration struct controls the layout and behavior of the views. It currently has the following attributes:
- orientation -- the layout of the child views (
.horizontalor.vertical) - draggableRange (ClosedRange) -- the range that the divider can be moved over. If
dragToHidePanes(below) is empty then dragging is limited to this. Otherwise, dragging outside of this range will result in closing a child pane. - dragToHidePanes (SplitViewPanes) -- which child panes can be closed by
dragging into their minimum area. By default none are. Affects the behavior of the
draggableRangeabove. - doubleClickToClose (SplitViewPanes) -- which child pane to close when the divider is double-tapped/clicked. By default none are.
- visibleDividerSpan (Double) -- the width or height of the divider. Dividers can draw outside of this span, including defining a bigger area for touch tracking.
The source currently contains three divider views:
- Debug -- used during development with separate views for the divider and the hit tracking area.
- Minimal -- just draws a solid line. The line width and the color are configurable.
- Handle -- draws a solid line as well as a handle that serves as a visual hint that the divider can be dragged by the user.
In a current project I was originally using SplitView by Steve Harris which is very nice, but I opted to write my own after having some difficulty integrating it into my app that is based on TCA. My version adopts many of the same features, but it does have a hard dependency on TCA, so consider Steve's implementation if you are looking for a SwifUI-only version.