filiplazov/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 `Spacer`s to produce the desired layout for each o

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

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.

Package Metadata

Repository: filiplazov/cornerstacks

Default branch: master

README: README.md