Swiftpack.co - Package - spacenation/swiftui-grid

Build Status

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)

ScrollView {
    Grid(colors) {
        Rectangle()
            .foregroundColor($0)
    }
}
.gridStyle(
    ModularGridStyle(columns: .min(100), rows: .fixed(100))
)

StaggeredGridStyle

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.

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.

ModularGridStyle(columns: 3, rows: 3)
StaggeredGridStyle(tracks: 8)

Fixed

Item size is fixed to a specific width or height.

ModularGridStyle(columns: .fixed(100), rows: .fixed(100))
StaggeredGridStyle(tracks: .fixed(100))

Min

Autolayout respecting a min item width or height.

ModularGridStyle(columns: .min(100), rows: .fixed(100))
StaggeredGridStyle(tracks: .min(100))

Preferences

Get item size and position with preferences

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.

Github

link
Stars: 700

Dependencies

Used By

Total: 0

Releases

Custom grid styles - 2020-04-05 23:41:10

Examples and tests - 2020-03-29 05:42:07

Deployment target 13.1 - 2020-03-27 03:44:27

Inlinable style - 2020-03-26 18:22:29

Release 1.0.0 - 2020-03-14 21:44:30

This release contains breaking changes.

  1. ScrollView has been removed from Grid
  2. Padding has been removed from styles

This API is now stable with 1.0.0

\\\ Scrollable grid

ScrollView {
    Grid {
         ...
    }
    .padding(16)
}
.gridStyle(
    ModularGridStyle(.vertical, columns: .min(100), rows: .fixed(100))
)
\\\ Static grid

Grid {
    ...
}
.gridStyle(
    ModularGridStyle(columns: 3, rows: 2)
)

This allows us to embed grid anywhere since scrollview is now optional. Also it is possible now to have sections, list of grids and even grid of grids.

Removing private @State - 2020-02-23 19:07:18

Package URL - 2020-02-15 22:58:48

Grid package - 2020-01-27 21:36:58

Grid is now a separate package. Other packages have been moved to: https://github.com/swift-extensions/charts https://github.com/swift-extensions/shapes https://github.com/swift-extensions/sliders

Separating packages - 2020-01-27 21:08:16

GridItem - 2019-12-30 19:54:57

Adds Identifiable grid items.

struct GridItem: Identifiable {
    let view: AnyView
    let id: AnyHashable
}

Products - 2019-12-30 00:42:07

It is now possible to import separate packages

import Grid
import Sliders
import Shapes
import Chart

SwiftUI Extensions - 2019-12-13 20:37:19

Merged extensions into one repo

Tracks - 2019-11-18 01:17:52

public enum Tracks: Hashable {
    case count(Int)
    case fixed(CGFloat)
    case min(CGFloat)
}

Better examples - 2019-11-17 21:57:50

StaggeredGridStyle - 2019-11-17 09:00:32

Grid(1...69, id: \.self) { index in
    Image("\(index)")
        .resizable()
        .scaledToFit()
}
.gridStyle(
    StaggeredGridStyle(tracks: 8, axis: .horizontal, spacing: 4)
)

Optimizations - 2019-11-06 19:18:38

Xcode 11.2 optimizations

Bundle identifiers - 2019-10-15 19:37:02

Spacing - 2019-09-12 20:50:14

Item preferences - 2019-09-08 00:01:49

tvOS - 2019-08-26 00:00:17

watchOS - 2019-08-25 23:28:58

ZStack and StyleStructs - 2019-08-25 22:09:27

ViewBuilder - 2019-08-24 00:02:54

Examples - 2019-08-19 21:38:00

- 2019-07-31 01:54:22

- 2019-07-29 01:00:34