Is there a way to structure three views vertically with a top, middle divider, and bottom view, where the…
Middle divider view “hugs” its contents vertically (grows and shrinks based on height of child views)
Top and bottom views fill the space available above and below the divider
Divider can be dragged all the way up (or down), to completely hide the top view (or bottom view)
I’ve been working on this for a while and still can’t get it quite right. The code below is close, but the parent view’s bottom edge shifts when the divider resizes. As a result, the bottom view shifts upward when the divider shrinks, whereas I want it to continue to fill the space to the bottom of the screen.
import SwiftUI
struct ContentView: View {
@State private var topRatio: CGFloat = 0.5
@State private var dividerHeight: CGFloat = 44
var body: some View {
GeometryReader { geometry in
let topInset = geometry.safeAreaInsets.top
let bottomInset = geometry.safeAreaInsets.bottom
let totalHeight = geometry.size.height
let availableHeight = max(totalHeight - bottomInset - dividerHeight, 0)
VStack(spacing: 0) {
TopView()
.frame(height: max(availableHeight * topRatio - topInset, 0))
.frame(maxWidth: .infinity)
.background(Color.red.opacity(0.3))
DividerView()
.background(GeometryReader { proxy in
Color.clear.preference(key: DividerHeightKey.self, value: proxy.size.height)
})
.onPreferenceChange(DividerHeightKey.self) { height in
dividerHeight = height
}
.gesture(
DragGesture()
.onChanged { value in
let maxDragDistance = availableHeight + dividerHeight
let translation = value.translation.height / max(maxDragDistance, 1)
let newTopRatio = topRatio + translation
topRatio = min(max(newTopRatio, 0), 1)
}
)
.zIndex(1)
BottomView()
.frame(height: max(availableHeight * (1 - topRatio), 0))
.frame(maxWidth: .infinity)
.background(Color.green.opacity(0.3))
}
}
}
}
struct DividerHeightKey: PreferenceKey {
static var defaultValue: CGFloat = 44
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = nextValue()
}
}
struct DividerView: View {
@State private var showExtraText = true
var body: some View {
VStack(spacing: 0) {
Text(showExtraText ? "Tap to hide 'More'" : "Tap to show 'More'")
.frame(height: 44)
if showExtraText {
Text("More")
.frame(height: 44)
}
}
.frame(maxWidth: .infinity)
.background(Color.gray)
.onTapGesture {
showExtraText.toggle()
}
}
}
struct TopView: View {
var body: some View {
VStack {
Spacer()
Text("Top")
}
.padding(0)
}
}
struct BottomView: View {
var body: some View {
VStack {
Text("Bottom")
Spacer()
}
.padding(0)
}
}
#Preview {
ContentView()
}
