dnrops/CornerStacks

CornerStacks provides an easy way to layout SwiftUI views at the 4 corners of the parent view. It works by wrapping HStack and VStack, with a straightforward implementation combining both HStack and VStack along with some Spacers to produce the desired layout for each of the corner views. The primary purpose is to reduce boilerplate setup, increase code readability and allow for rapid prototyping. This layout technique is nicely explained by John Sundell in this video.

Requirements

iOS 13.0+ / macOS 10.15+ / tvOS 13.0+ / watchOS 6.0+
Xcode 11.0+
Swift 5.1+

Installation

I . Automatically in Xcode:

Click File > Swift Packages > Add Package Dependency…
Use the package URL https://github.com/filiplazov/CornerStacks to add CornerStacks to your project.

II . Manually in your Package.swift file add:

.package(url: "https://github.com/filiplazov/CornerStacks", from: "0.1.0")

Usage

Before using any of the views make sure you import the CornerStacks module

import CornerStacks

There are 4 views defined for both HStack and VStack that represent the 4 corners.

HStack

TopLeadingHStack
TopTrailingHStack
BottomLeadingHStack
BottomTrailingHStack

VStack

TopLeadingVStack
TopTrailingVStack
BottomLeadingVStack
BottomTrailingVStack

Example

It is much easier to explain in an example

var body: some View {
  ZStack {
    // just like a normal HStack you can place many nested views
    TopLeadingHStack {
      makeSquare(size: 80)
      makeSquare(size: 80)
    }
    // spacing is passed along to the wrapped HStack and VStack
    TopTrailingVStack(spacing: 30) {
      makeSquare(size: 80)
      makeSquare(size: 80)
    }
    // horizontal alignment is passed along to the wrapped VStack
    BottomLeadingVStack(alignment: .leading) {
      makeSquare(size: 40)
      makeSquare(size: 80)
    }
    // vertical alignment passed along to the wrapped VStack
    BottomTrailingHStack(alignment: .top) {
      makeSquare(size: 80)
      makeSquare(size: 40)
    }
    // it also works in nested views like other VStacks and HStacks
    HStack {
      TopLeadingHStack {
        makeSquare(size: 40)
      }
      BottomTrailingVStack {
        makeSquare(size: 40)
        makeSquare(size: 40)
      }
    }
    .frame(width: 200, height: 150)
    .background(Color.black)
  }
}

Here is the output from the code above

Example

Contributing

Contributions are more than welcome. Please create a GitHub issue before submitting a pull request to plan and discuss implementation.

Author

Filip Lazov (@filiplazov)

License

CornerStacks is available under the MIT license. See the LICENSE file for more info.