DIFlowLayout

DIFlowLayout is a SwiftUI Layout implementation where subviews are arranged horizontally and wrapped vertically, similar to how text behaves in a multiline label.

DIFlowLayout works by first grouping subviews into rows based on the proposed container width, subviews' intrinsic size, and spacing values. Subviews, once grouped into rows, can be vertically and horizontally aligned within their row.

Usage

Use DIFlowLayout like any other SwiftUI container:

import DIFlowLayout

struct TagsView: View {

    let tags: [String]

    var body: some View {
        DIFlowLayout(horizontalSpacing: 8, verticalSpacing: 8) {
            ForEach(tags, id: \.self) { tag in
                Text(tag)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 6)
                    .background(Capsule().fill(.blue.opacity(0.2)))
            }
        }
    }
}

The initializer accepts the flow direction, horizontal and vertical alignment within each row, and horizontal and vertical spacing:

DIFlowLayout(
    direction: .forward,          // or .reverse
    horizontalAlignment: .leading, // .leading, .center, .trailing
    verticalAlignment: .top,       // .top, .center, .bottom
    horizontalSpacing: 8,
    verticalSpacing: 8
) {
    // subviews
}

Requirements

• iOS 16+, macOS 13+, Mac Catalyst 16+, tvOS 16+, watchOS 9+, visionOS 1+
• Swift 6.0+ toolchain (Xcode 16+)

Installation

To install using Swift Package Manager, add this to the dependencies section in your Package.swift file:

.package(url: "https://github.com/danielinoa/DIFlowLayout.git", from: "1.0.3")

Or in Xcode, add the package via File → Add Package Dependencies… using the URL above.

Demo

https://github.com/danielinoa/DIFlowLayoutDemo

diflowlayoutdemo.mp4

Contributing

Feel free to open an issue if you have questions about how to use DIFlowLayout, discovered a bug, or want to improve the implementation or interface.

Credits

DIFlowLayout is primarily the work of Daniel Inoa.