What's a good way to approach custom layouts?

[dfabulich]

I just bumped into a problem that benefits from a custom layout: a "flow layout" that wraps views when they fill their current line.

On Android, there's an out-of-the-box experimental API for flow layout https://developer.android.com/develop/ui/compose/layouts/flow but on iOS, as far as I know, we have to provide our own layout implementation to handle this.

If I were writing a Swift-only app, I'd probably grab https://github.com/tevelee/SwiftUI-Flow off the shelf, but, as you might expect, it doesn't transpile well, and I'm skeptical about trying to dive in and make it transpile correctly.

Alternately, it's not that hard to implement a flow layout from scratch using the iOS 16 Layout API. But SkipUI doesn't support that API at all.

There is a Compose custom layout API, and I guess it would be possible in principle to re-implement the SwiftUI Layout API using that. The API is totally different, though.

Even if I just wrote the layout twice, once in SwiftUI and then again in Compose, it's hard to see how to write transpilable Swift in a way that would let me use a SwiftUI Layout on iOS and a Compose custom layout on Android.

What would y'all recommend I do for flow layouts in my app? What do you recommend in general for handling other kinds of custom layouts? (Radial layouts, masonry, relative stacks, etc.)

[dfabulich]

Here's what I came up with.

First, here's an LLM-generated FlowLayout using the Layout protocol. Seems to work for my use case, but it has no tests. Buyer beware.

Implementation

#if !SKIP
struct FlowLayout: Layout {
    // Configuration properties
    var horizontalSpacing: CGFloat = 8
    var verticalSpacing: CGFloat = 8

    // Calculates the total size needed for the layout
    func sizeThatFits(
        proposal: ProposedViewSize, // Proposed container size
        subviews: Subviews,         // The views to lay out
        cache: inout ()             // Cache for intermediate calculations (not used here)
    ) -> CGSize {
        guard !subviews.isEmpty else { return .zero }

        // Use the proposed width, or infinity if none is proposed
        let availableWidth = proposal.width ?? .infinity
        var currentX: CGFloat = 0
        var rowHeight: CGFloat = 0
        var totalHeight: CGFloat = 0

        // Simulate placing views to calculate total height
        for subview in subviews {
            let idealSize = subview.sizeThatFits(ProposedViewSize.unspecified) // Get intrinsic size

            // Check if the subview fits on the current line
            if currentX + idealSize.width > availableWidth && currentX > 0 {
                // Move to the next line
                totalHeight += rowHeight + verticalSpacing
                currentX = 0
                rowHeight = 0
            }

            // Place the subview conceptually
            currentX += idealSize.width + horizontalSpacing
            rowHeight = max(rowHeight, idealSize.height)
        }

        // Add the height of the last row
        totalHeight += rowHeight

        // Return the calculated total size
        // Width is constrained by the proposal, height is calculated
        return CGSize(width: proposal.width ?? currentX, height: totalHeight)
    }

    // Places the subviews within the allocated bounds
    func placeSubviews(
        in bounds: CGRect,         // The bounds allocated by the parent
        proposal: ProposedViewSize, // Original proposal (can be ignored here)
        subviews: Subviews,         // The views to lay out
        cache: inout ()             // Cache (not used here)
    ) {
        guard !subviews.isEmpty else { return }

        // Start placing from the top-left corner of the bounds
        var currentX: CGFloat = bounds.minX
        var currentY: CGFloat = bounds.minY
        var rowHeight: CGFloat = 0

        for subview in subviews {
            let idealSize = subview.sizeThatFits(ProposedViewSize.unspecified)

            // Check if the subview fits on the current line
            // Use bounds.width here as the actual available width
            if currentX + idealSize.width > bounds.maxX && currentX > bounds.minX {
                // Move to the next line
                currentY += rowHeight + verticalSpacing
                currentX = bounds.minX
                rowHeight = 0
            }

            // Calculate the placement point
            let placementPoint = CGPoint(x: currentX, y: currentY)

            // Place the subview
            subview.place(at: placementPoint, proposal: ProposedViewSize(idealSize))

            // Update current position and row height
            currentX += idealSize.width + horizontalSpacing
            rowHeight = max(rowHeight, idealSize.height)
        }
    }
}
#endif

The whole thing is in an #if !SKIP block because Layout protocol isn't supported in SkipUI. But Android comes with its own FlowRow.

Here's how I implemented it in my app:

// SKIP INSERT: @OptIn(androidx.compose.foundation.layout.ExperimentalLayoutApi::class)
struct FlowRow: View {
    var body: some View {
        #if SKIP
        ComposeView { context in
            androidx.compose.foundation.layout.FlowRow(modifier: context.modifier) {
                FlowRowContent().Compose(context: context.content())
            }
        }
        .padding(.leading)
        #else
        FlowLayout(horizontalSpacing: 0, verticalSpacing: 0) {
            FlowRowContent()
        }
        .padding(.leading)
        #endif
    }
}

It seems to work on my machine.

🤷