Skip to content
This repository was archived by the owner on Dec 27, 2020. It is now read-only.

Commit 6dd579e

Browse files
ay42ay42
authored
Modular and Staggered (#31)
* modular grid style * staggered grid style
1 parent df2916d commit 6dd579e

File tree

178 files changed

+1587
-690
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

178 files changed

+1587
-690
lines changed

‎Examples/GridExamples iOS/ContentView.swift

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,27 @@
11
import SwiftUI
2+
import Grid
23

34
struct ContentView: View {
45
@State private var selection = 0
56

67
var body: some View {
78
TabView(selection: $selection) {
8-
AutoColumnsLayoutView()
9+
ModularGridView()
910
.tabItem {
1011
VStack {
1112
Image(systemName: "square.grid.3x2.fill")
12-
Text("Auto Columns")
13+
Text("Modular")
1314
}
1415
}
1516
.tag(0)
16-
FixedColumnsLayoutView()
17-
.tabItem {
18-
VStack {
19-
Image(systemName: "rectangle.split.3x3.fill")
20-
Text("Fixed Columns")
21-
}
22-
}
23-
.tag(1)
24-
SingleColumnLayoutView()
25-
.tabItem {
26-
VStack {
27-
Image(systemName: "rectangle.grid.1x2.fill")
28-
Text("One Column")
29-
}
30-
}
31-
.tag(2)
32-
PerformanceLayoutView()
33-
.tabItem {
34-
VStack {
35-
Image(systemName: "square.grid.4x3.fill")
36-
Text("Performance")
37-
}
38-
}
39-
.tag(3)
40-
BuilderLayoutView()
17+
StaggeredGridView()
4118
.tabItem {
4219
VStack {
4320
Image(systemName: "rectangle.3.offgrid.fill")
44-
Text("Builder")
21+
Text("Staggered")
4522
}
4623
}
47-
.tag(4)
24+
.tag(1)
4825
}
4926
.accentColor(.purple)
5027
}

‎Examples/GridExamples iOS/ModularGridView.swift

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct ModularGridView: View {
5+
@State var selection: Int = 0
6+
@State var items: [(Int, Color)] = (0...100).map { ($0, .random) }
7+
8+
var body: some View {
9+
NavigationView {
10+
Grid(items, id: \.0) { item in
11+
Card(title: "\(item.0)", color: item.1)
12+
.onTapGesture {
13+
self.selection = item.0
14+
}
15+
}
16+
.navigationBarTitle("Modular Grid", displayMode: .inline)
17+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
18+
RoundedRectangle(cornerRadius: 16)
19+
.strokeBorder(lineWidth: 4)
20+
.foregroundColor(.white)
21+
.frame(
22+
width: preferences[self.selection].width,
23+
height: preferences[self.selection].height
24+
)
25+
.position(
26+
x: preferences[self.selection].midX,
27+
y: preferences[self.selection].midY
28+
)
29+
.animation(.linear)
30+
}
31+
}
32+
.gridStyle(
33+
ModularGridStyle(columns: .auto(.min(100)), rows: .auto(.min(100)))
34+
)
35+
.navigationViewStyle(
36+
StackNavigationViewStyle()
37+
)
38+
}
39+
}
40+
41+
struct ModularGridView_Previews: PreviewProvider {
42+
static var previews: some View {
43+
ModularGridView()
44+
}
45+
}

‎Examples/GridExamples iOS/StaggeredGridView.swift

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct StaggeredGridView: View {
5+
var body: some View {
6+
NavigationView {
7+
Grid(1...69, id: \.self) { index in
8+
Image("\(index)")
9+
.resizable()
10+
.scaledToFit()
11+
}
12+
.navigationBarTitle("Staggered Grid", displayMode: .inline)
13+
}
14+
.gridStyle(
15+
StaggeredGridStyle(tracks: .auto(.min(100)), axis: .vertical, spacing: 1, padding: .init(top: 1, leading: 1, bottom: 1, trailing: 1))
16+
)
17+
.navigationViewStyle(
18+
StackNavigationViewStyle()
19+
)
20+
}
21+
}
22+
23+
struct StaggeredGridView_Previews: PreviewProvider {
24+
static var previews: some View {
25+
StaggeredGridView()
26+
}
27+
}

‎Examples/GridExamples macOS/ContentView.swift

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,16 @@ struct ContentView: View {
66

77
var body: some View {
88
TabView(selection: $selection) {
9-
AutoColumnsLayoutView()
9+
ModularGridView()
1010
.tabItem {
11-
Text("Auto Columns")
11+
Text("Modular")
1212
}
1313
.tag(0)
14-
.frame(minWidth: 300)
15-
FixedColumnsLayoutView()
14+
StaggeredGridView()
1615
.tabItem {
17-
Text("Fixed Columns")
16+
Text("Staggered")
1817
}
19-
.tag(1)
20-
.frame(minWidth: 300)
21-
SingleColumnLayoutView()
22-
.tabItem {
23-
Text("One Column")
24-
}
25-
.tag(2)
26-
.frame(minWidth: 300)
27-
PerformanceLayoutView()
28-
.tabItem {
29-
Text("Performance")
30-
}
31-
.tag(3)
32-
.frame(minWidth: 300)
33-
BuilderLayoutView()
34-
.tabItem {
35-
Text("Builder")
36-
}
37-
.tag(4)
38-
.frame(minWidth: 300)
18+
.tag(0)
3919
}
4020
.frame(minWidth: 600, maxWidth: .infinity, maxHeight: .infinity)
4121
.padding()

‎Examples/GridExamples macOS/ModularGridView.swift

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct ModularGridView: View {
5+
@State var selection: Int = 0
6+
@State var items: [(Int, Color)] = (0...100).map { ($0, .random) }
7+
8+
var body: some View {
9+
Grid(items, id: \.0) { item in
10+
Card(title: "\(item.0)", color: item.1)
11+
.onTapGesture {
12+
self.selection = item.0
13+
}
14+
}
15+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
16+
RoundedRectangle(cornerRadius: 16)
17+
.strokeBorder(lineWidth: 4)
18+
.foregroundColor(.white)
19+
.frame(
20+
width: preferences[self.selection].width,
21+
height: preferences[self.selection].height
22+
)
23+
.position(
24+
x: preferences[self.selection].midX,
25+
y: preferences[self.selection].midY
26+
)
27+
.animation(.linear)
28+
}
29+
.gridStyle(
30+
ModularGridStyle(columns: .auto(.min(200)), rows: .auto(.min(200)))
31+
)
32+
}
33+
}
34+
35+
struct ModularGridView_Previews: PreviewProvider {
36+
static var previews: some View {
37+
ModularGridView()
38+
}
39+
}

‎Examples/GridExamples macOS/StaggeredGridView.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct StaggeredGridView: View {
5+
var body: some View {
6+
Grid(1...69, id: \.self) { index in
7+
Image("\(index)")
8+
.resizable()
9+
.scaledToFit()
10+
.clipShape(RoundedRectangle(cornerRadius: 8))
11+
}
12+
.gridStyle(
13+
StaggeredGridStyle(tracks: 5, axis: .horizontal, spacing: 4)
14+
)
15+
}
16+
}
17+
18+
struct StaggeredGridView_Previews: PreviewProvider {
19+
static var previews: some View {
20+
StaggeredGridView()
21+
}
22+
}

‎Examples/GridExamples tvOS/ContentView.swift

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,24 @@ struct ContentView: View {
66

77
var body: some View {
88
TabView(selection: $selection){
9-
AutoColumnsLayoutView()
9+
ModularGridView()
1010
.font(.title)
1111
.tabItem {
1212
HStack {
1313
Image(systemName: "square.grid.3x2.fill")
14-
Text("Auto Columns")
14+
Text("Modular")
1515
}
1616
}
17-
.frame(minWidth: 300)
1817
.tag(0)
19-
20-
FixedColumnsLayoutView()
18+
StaggeredGridView()
2119
.font(.title)
2220
.tabItem {
2321
HStack {
24-
Image(systemName: "rectangle.split.3x3.fill")
25-
Text("Fixed Columns")
22+
Image(systemName: "rectangle.3.offgrid.fill")
23+
Text("Staggered")
2624
}
2725
}
28-
.frame(minWidth: 300)
29-
.tag(1)
30-
SingleColumnLayoutView()
31-
.font(.title)
32-
.tabItem {
33-
HStack {
34-
Image(systemName: "rectangle.grid.1x2.fill")
35-
Text("One Column")
36-
}
37-
}
38-
.frame(minWidth: 300)
39-
.tag(2)
40-
PerformanceLayoutView()
41-
.font(.title)
42-
.tabItem {
43-
HStack {
44-
Image(systemName: "square.grid.4x3.fill")
45-
Text("Performance")
46-
}
47-
}
48-
.frame(minWidth: 300)
49-
.tag(3)
26+
.tag(0)
5027
}
5128
}
5229
}

‎Examples/GridExamples tvOS/ModularGridView.swift

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct ModularGridView: View {
5+
@State var selection: Int = 0
6+
@State var items: [(Int, Color)] = (0...100).map { ($0, .random) }
7+
8+
var body: some View {
9+
Grid(items, id: \.0) { item in
10+
Card(title: "\(item.0)", color: item.1)
11+
.focusable(true) { focus in
12+
if focus {
13+
self.selection = item.0
14+
}
15+
}
16+
}
17+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
18+
RoundedRectangle(cornerRadius: 16)
19+
.strokeBorder(lineWidth: 4)
20+
.foregroundColor(.white)
21+
.frame(
22+
width: preferences[self.selection].width,
23+
height: preferences[self.selection].height
24+
)
25+
.position(
26+
x: preferences[self.selection].midX,
27+
y: preferences[self.selection].midY
28+
)
29+
.animation(.linear)
30+
}
31+
.gridStyle(
32+
ModularGridStyle(columns: .auto(.min(300)), rows: .auto(.min(100)))
33+
)
34+
}
35+
}
36+
37+
struct ModularGridView_Previews: PreviewProvider {
38+
static var previews: some View {
39+
ModularGridView()
40+
}
41+
}

‎Examples/GridExamples tvOS/StaggeredGridView.swift

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct StaggeredGridView: View {
5+
var body: some View {
6+
Grid(1...69, id: \.self) { index in
7+
Image("\(index)")
8+
.resizable()
9+
.scaledToFit()
10+
}
11+
.gridStyle(
12+
StaggeredGridStyle(tracks: .auto(.min(200)))
13+
)
14+
}
15+
}
16+
17+
struct StaggeredGridView_Previews: PreviewProvider {
18+
static var previews: some View {
19+
StaggeredGridView()
20+
}
21+
}

‎Examples/GridExamples watchOS WatchKit Extension/ContentView.swift

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,22 @@ import Grid
44
struct ContentView: View {
55
var body: some View {
66
List {
7-
NavigationLink(destination: AutoColumnsLayoutView()) {
7+
NavigationLink(destination: ModularGridView()) {
88
HStack {
99
Image(systemName: "square.grid.3x2.fill")
1010
.foregroundColor(.accentColor)
11-
Text("Auto Columns")
11+
Text("Modular")
1212
}
1313

1414
}
15-
NavigationLink(destination: FixedColumnsLayoutView()) {
15+
16+
NavigationLink(destination: StaggeredGridView()) {
1617
HStack {
17-
Image(systemName: "rectangle.split.3x3.fill")
18+
Image(systemName: "rectangle.3.offgrid.fill")
1819
.foregroundColor(.accentColor)
19-
Text("Fixed Columns")
20-
}
21-
}
22-
NavigationLink(destination: SingleColumnLayoutView()) {
23-
HStack {
24-
Image(systemName: "rectangle.grid.1x2.fill")
25-
.foregroundColor(.accentColor)
26-
Text("One Column")
27-
}
28-
}
29-
NavigationLink(destination: PerformanceLayoutView()) {
30-
HStack {
31-
Image(systemName: "square.grid.4x3.fill")
32-
.foregroundColor(.accentColor)
33-
Text("Performance")
20+
Text("Staggered")
3421
}
22+
3523
}
3624
}
3725
.accentColor(.purple)

0 commit comments

Comments
 (0)