Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spacenation/swiftui-grid
:rocket: SwiftUI Grid layout with custom styles
https://github.com/spacenation/swiftui-grid
apple grid ios macos swift swift-library swift-package swiftui swiftui-example tvos watchos xcode
Last synced: 3 months ago
JSON representation
:rocket: SwiftUI Grid layout with custom styles
- Host: GitHub
- URL: https://github.com/spacenation/swiftui-grid
- Owner: spacenation
- License: mit
- Archived: true
- Created: 2019-07-29T00:51:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-27T00:25:28.000Z (about 4 years ago)
- Last Synced: 2024-09-19T09:31:32.880Z (4 months ago)
- Topics: apple, grid, ios, macos, swift, swift-library, swift-package, swiftui, swiftui-example, tvos, watchos, xcode
- Language: Swift
- Homepage:
- Size: 26.4 MB
- Stars: 963
- Watchers: 18
- Forks: 60
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-about-SwiftUI - Grid
- awesome - swiftui-grid - :rocket: SwiftUI Grid layout with custom styles (xcode)
README
[](https://github.com/spacenation/swiftui-grid/actions)
## SwiftUI Grid
SwiftUI Grid view layout with custom styles.
## Features
- ZStack based layout
- Vertical and horizontal scrolling
- Supports all apple platforms
- Custom styles (ModularGridStyle, StaggeredGridStyle)
- SwiftUI code patterns (StyleStructs, EnvironmentValues, ViewBuilder)
- Active development for production apps
Open `GridDemo.xcodeproj` for more examples for iOS, macOS, watchOS and tvOS
## Styles
### ModularGridStyle (Default)
```swift
ScrollView {
Grid(colors) {
Rectangle()
.foregroundColor($0)
}
}
.gridStyle(
ModularGridStyle(columns: .min(100), rows: .fixed(100))
)
```
### StaggeredGridStyle
```swift
ScrollView {
Grid(1...69, id: \.self) { index in
Image("\(index)")
.resizable()
.scaledToFit()
}
}
.gridStyle(
StaggeredGridStyle(.horizontal, tracks: 8, spacing: 4)
)
```
## Tracks
Tracks setting allows you to customize grid behaviour to your specific use-case. Both Modular and Staggered grid use tracks value to calculate layout. In Modular layout both columns and rows are tracks.
```swift
public enum Tracks: Hashable {
case count(Int)
case fixed(CGFloat)
case min(CGFloat)
}
```
### Count
Grid is split into equal fractions of size provided by a parent view.
```swift
ModularGridStyle(columns: 3, rows: 3)
StaggeredGridStyle(tracks: 8)
```
### Fixed
Item size is fixed to a specific width or height.
```swift
ModularGridStyle(columns: .fixed(100), rows: .fixed(100))
StaggeredGridStyle(tracks: .fixed(100))
```
### Min
Autolayout respecting a min item width or height.
```swift
ModularGridStyle(columns: .min(100), rows: .fixed(100))
StaggeredGridStyle(tracks: .min(100))
```
## Preferences
Get item size and position with preferences
```swift
struct CardsView: View {
@State var selection: Int = 0
var body: some View {
ScrollView {
Grid(0..<100) { number in
Card(title: "\(number)")
.onTapGesture {
self.selection = number
}
}
.padding()
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
RoundedRectangle(cornerRadius: 16)
.strokeBorder(lineWidth: 4)
.foregroundColor(.white)
.frame(
width: preferences[self.selection].width,
height: preferences[self.selection].height
)
.position(
x: preferences[self.selection].midX,
y: preferences[self.selection].midY
)
.animation(.linear)
}
}
}
}
```
## SDKs
- iOS 13.1+
- Mac Catalyst 13.1+
- macOS 10.15+
- watchOS 6+
- Xcode 11.0+
## Roadmap
- Items span
- 'CSS Grid'-like features
## Code Contributions
Feel free to contribute via fork/pull request to master branch. If you want to request a feature or report a bug please start a new issue.
## Coffee Contributions
If you find this project useful please consider becoming my GitHub sponsor.