How to align the middle of a View to the bottom of other view in SwiftUI?

Question

So basically I need to come up with a layout that aligns the middle of a View to the bottom of other View in SwiftUI. To make it more clear, all I need is something like this:

I guess the equivalent in a UIKit world would be:

redView.bottomAnchor.constraint(equalTo: whiteView.centerYAnchor)

Ive tried setting both in a ZStack and offsetting the white View but it won't work on all screen sizes for obvious reasons.

Any tips?

Answer 1

Based on OPs request in comment, this is a solution making use of a custom Layout. The HalfOverlayLayout takes two subview and places the second half height over the first. The size of the first subview is flexible. As this is my first Layout I'm not sure if I covered all possible size variants, but it should be a start.

struct ContentView: View {
    
    var body: some View {
        
        HalfOverlayLayout {
            redView
            whiteView
        }
        .padding()
    }
    
    
    var redView: some View {
        VStack {
            ForEach(0..<20) { _ in
                Text("Red View")
            }
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.red)
        .cornerRadius(20)
    }
    
    var whiteView: some View {
        VStack {
            Text("White View")
        }
        .frame(width: 200, height: 150)
        .background(Color.white)
        .cornerRadius(20)
        .overlay(RoundedRectangle(cornerRadius: 20).stroke())
    }
    
}



struct HalfOverlayLayout: Layout {
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {

        let heightContent = subviews.first?.sizeThatFits(.unspecified).height ?? 0
        let heightFooter = subviews.last?.sizeThatFits(.unspecified).height ?? 0
        let totalHeight = heightContent + heightFooter / 2
        
        let maxsizes = subviews.map { $0.sizeThatFits(.infinity) }
        var totalWidth = maxsizes.max {$0.width < $1.width}?.width ?? 0
        if let proposedWidth = proposal.width {
            if totalWidth > proposedWidth { totalWidth = proposedWidth }
        }
        return CGSize(width: totalWidth, height: totalHeight)
    }

    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {

        let heightFooter = subviews.last?.sizeThatFits(.unspecified).height ?? 0
        let maxHeightContent = bounds.height - heightFooter / 2

        var pt = CGPoint(x: bounds.midX, y: bounds.minY)
        if let first = subviews.first {
            var totalWidth = first.sizeThatFits(.infinity).width
            if let proposedWidth = proposal.width {
                if totalWidth > proposedWidth { totalWidth = proposedWidth }
            }
            first.place(at: pt, anchor: .top, proposal: .init(width: totalWidth, height: maxHeightContent))
        }

        pt = CGPoint(x: bounds.midX, y: bounds.maxY)
        if let last = subviews.last {
            last.place(at: pt, anchor: .bottom, proposal: .unspecified)
        }
    }
}