Skip to content

Repository files navigation

TrueMasonryStack

2.mp4

Overview

TrueMasonryStack provides a custom layout container that arranges elements in a row-based masonry-style grid, however unlike other flow layouts or WrappedHStacks, this implementation specializes in handling elements of varying widths and heights while maximizing space efficiency. It arranges elements in rows while trying to cram in as of them as possible into a given row.

1.mp4

Suggestion/Disclaimer

If you are dealing with a bunch of unconsistently sized elements they might not necessary fit well in a row based layout, if so then I would recommend should you check out BentoStack which should be save you more space.


Installation

Swift Package Manager

Add it directly in Xcode:

1. Navigate to File > Swift Packages > Add Package Dependency.

2. Enter the package URL: https://github.com/SwiftTyper/TrueMasonryStack.git.

3. Follow the prompts to complete the setup.

Usage

Import the package and use MStack in your SwiftUI views:

import TrueMasonryStack

struct ContentView: View {
    var items: [Item] // Your data model

    var body: some View {
        MStack {
            ForEach(items) { item in
                ItemView(item: item)
            }
        }
    }
}

The Why?

The original idea for this package arose from the need for a better layout to display widgets in my app Wigion. Widgets in Wigion can be displayed in many different sizes, and using a typical WrappingHStack or grid proved to be extremely space inefficient. So i developed TrueMasonryStack to solve this problem by making better use of available space while keeping the layout visually appealing.

wigion

About

A flexible masonry layout (row based)

Topics

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages