https://github.com/filiplazov/cornerstacks

Layout SwiftUI views in corners with ease.
https://github.com/filiplazov/cornerstacks

ios library macos swift swift-package-manager swiftui tvos watchos

Last synced: 2 months ago
JSON representation

Layout SwiftUI views in corners with ease.

• Host: GitHub
• URL: https://github.com/filiplazov/cornerstacks
• Owner: filiplazov
• License: mit
• Created: 2020-03-22T21:31:53.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-29T20:10:09.000Z (over 4 years ago)
• Last Synced: 2024-10-14T13:34:55.523Z (2 months ago)
• Topics: ios, library, macos, swift, swift-package-manager, swiftui, tvos, watchos
• Language: Swift
• Size: 52.7 KB
• Stars: 13
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    





    

    

        

    

    

        

    



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 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](https://www.youtube.com/watch?v=XC5NOBsHcf0).

## 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:

```swift

.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 

```swift

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

```swift

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](https://github.com/filiplazov) ([@filiplazov](https://twitter.com/filiplazov))

## License

CornerStacks is available under the MIT license. See the [LICENSE](LICENSE) file for more info.