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

Commit 978cc2e

Browse files
ay42ay42
authored
Extracting scrollview (#80)
* extracting scrollview * readme
1 parent 016c88d commit 978cc2e

22 files changed

+250
-224
lines changed

‎GridDemo iOS/ModularGrid/ModularGridSettingsView.swift

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ struct ModularGridSettingsView: View {
1010
@State var columnsMin: CGFloat = 100.0
1111

1212
@State var rowsCount: Int = 3
13-
@State var rowsFixed: CGFloat = 150
13+
@State var rowsFixed: CGFloat = 100
1414
@State var rowsMin: CGFloat = 100.0
1515

1616
var body: some View {

‎GridDemo iOS/ModularGrid/ModularGridView.swift

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import Grid
44
struct ModularGridView: View {
55
@State var items: [Item] = (0...100).map { Item(number: $0) }
66
@State var showSettings: Bool = false
7-
@State var style = ModularGridStyle(columns: .min(100), rows: .min(100))
7+
@State var style = ModularGridStyle(.vertical, columns: .min(100), rows: .fixed(100))
88

99
var body: some View {
10-
Grid(items) { item in
11-
Card(title: "\(item.number)", color: item.color)
10+
ScrollView(style.axes) {
11+
Grid(items) { item in
12+
Card(title: "\(item.number)", color: item.color)
13+
}
14+
.padding(8)
15+
.gridStyle(
16+
self.style
17+
)
1218
}
13-
.gridStyle(
14-
self.style
15-
)
1619
.navigationBarTitle("Modular Grid", displayMode: .inline)
1720
.navigationBarItems(
1821
trailing:

‎GridDemo iOS/StaggeredGrid/StaggeredGridView.swift

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@ import Grid
33

44
struct StaggeredGridView: View {
55
@State var showSettings: Bool = false
6-
@State var style = StaggeredGridStyle(tracks: .min(100), axis: .vertical, spacing: 1, padding: .init(top: 1, leading: 1, bottom: 1, trailing: 1))
6+
@State var style = StaggeredGridStyle(.vertical, tracks: .min(100), spacing: 1)
77
@State var items: [Int] = (1...69).map { $0 }
88

99
var body: some View {
10-
Grid(self.items, id: \.self) { index in
11-
NavigationLink(destination: ImageDetailView(imageName: "\(index)")) {
12-
Image("\(index)")
13-
.renderingMode(.original)
14-
.resizable()
15-
.scaledToFit()
10+
ScrollView(style.axes) {
11+
Grid(self.items, id: \.self) { index in
12+
NavigationLink(destination: ImageDetailView(imageName: "\(index)")) {
13+
Image("\(index)")
14+
.renderingMode(.original)
15+
.resizable()
16+
.scaledToFit()
17+
}
1618
}
19+
.animation(.easeInOut)
1720
}
18-
.animation(.easeInOut)
1921
.navigationBarTitle("Staggered Grid", displayMode: .inline)
2022
.navigationBarItems(trailing:
2123
HStack {

‎GridDemo macOS/ModularGrid/ModularGridView.swift

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,37 @@ struct ModularGridView: View {
55
@State var selection: Int = 0
66
@State var items: [Item] = (0...100).map { Item(number: $0) }
77
@State var showSettings: Bool = false
8-
@State var style = ModularGridStyle(columns: .min(200), rows: .min(200))
8+
@State var style = ModularGridStyle(columns: .min(100), rows: .fixed(100))
99

1010
var body: some View {
1111
VStack(alignment: .trailing) {
1212
Button(action: { self.showSettings = true }) {
1313
Text("Settings")
1414
}
15-
.padding(.trailing, self.style.padding.trailing)
16-
17-
Grid(items) { item in
18-
Card(title: "\(item.number)", color: item.color)
19-
.onTapGesture {
20-
self.selection = item.number
21-
}
22-
}
23-
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
24-
RoundedRectangle(cornerRadius: 16)
25-
.strokeBorder(lineWidth: 4)
26-
.foregroundColor(.white)
27-
.frame(
28-
width: preferences[self.selection].width,
29-
height: preferences[self.selection].height
30-
)
31-
.position(
32-
x: preferences[self.selection].midX,
33-
y: preferences[self.selection].midY
34-
)
35-
.animation(.linear)
15+
ScrollView(style.axes) {
16+
Grid(items) { item in
17+
Card(title: "\(item.number)", color: item.color)
18+
.onTapGesture {
19+
self.selection = item.number
20+
}
21+
}
22+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
23+
RoundedRectangle(cornerRadius: 16)
24+
.strokeBorder(lineWidth: 4)
25+
.foregroundColor(.white)
26+
.frame(
27+
width: preferences[self.selection].width,
28+
height: preferences[self.selection].height
29+
)
30+
.position(
31+
x: preferences[self.selection].midX,
32+
y: preferences[self.selection].midY
33+
)
34+
.animation(.linear)
35+
}
36+
.padding(16)
3637
}
38+
3739
}
3840
.sheet(isPresented: self.$showSettings) {
3941
ModularGridSettingsView(style: self.$style)

‎GridDemo macOS/StaggeredGrid/StaggeredGridView.swift

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@ import Grid
33

44
struct StaggeredGridView: View {
55
@State var showSettings: Bool = false
6-
@State var style = StaggeredGridStyle(tracks: 5, axis: .horizontal, spacing: 4)
6+
@State var style = StaggeredGridStyle(.horizontal, tracks: 5, spacing: 4)
77

88
var body: some View {
99
VStack(alignment: .trailing) {
1010
Button(action: { self.showSettings = true }) {
1111
Text("Settings")
1212
}
13-
.padding(.trailing, self.style.padding.trailing)
1413

15-
Grid(1...69, id: \.self) { index in
16-
Image("\(index)")
17-
.resizable()
18-
.scaledToFit()
19-
.clipShape(RoundedRectangle(cornerRadius: 8))
14+
ScrollView(style.axes) {
15+
Grid(1...69, id: \.self) { index in
16+
Image("\(index)")
17+
.resizable()
18+
.scaledToFit()
19+
.clipShape(RoundedRectangle(cornerRadius: 8))
20+
}
21+
.padding(8)
2022
}
23+
2124
}
2225
.sheet(isPresented: self.$showSettings) {
2326
StaggeredGridSettingsView(style: self.$style)

‎GridDemo tvOS/ModularGrid/ModularGridView.swift

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ struct ModularGridView: View {
66
@State var items: [Item] = (0...100).map { Item(number: $0) }
77

88
var body: some View {
9-
Grid(items) { item in
10-
Card(title: "\(item.number)", color: item.color)
11-
.focusable(true) { focus in
12-
if focus {
13-
self.selection = item.number
9+
ScrollView {
10+
Grid(items) { item in
11+
Card(title: "\(item.number)", color: item.color)
12+
.focusable(true) { focus in
13+
if focus {
14+
self.selection = item.number
15+
}
1416
}
15-
}
17+
}
1618
}
1719
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
1820
RoundedRectangle(cornerRadius: 16)
@@ -29,7 +31,7 @@ struct ModularGridView: View {
2931
.animation(.linear)
3032
}
3133
.gridStyle(
32-
ModularGridStyle(columns: .min(300), rows: .min(100))
34+
ModularGridStyle(columns: .min(300), rows: .fixed(100))
3335
)
3436
.navigationBarTitle("Modular Grid")
3537
}

‎GridDemo tvOS/StaggeredGrid/StaggeredGridView.swift

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import SwiftUI
22
import Grid
33

44
struct StaggeredGridView: View {
5+
@State var selection: Int = 0
6+
57
var body: some View {
68
Grid(1...69, id: \.self) { index in
79
Image("\(index)")

‎GridDemo watchOS WatchKit Extension/ModularGrid/ModularGridView.swift

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,29 @@ struct ModularGridView: View {
66
@State var items: [Item] = (0...100).map { Item(number: $0) }
77

88
var body: some View {
9-
Grid(items) { item in
10-
Rectangle()
11-
.foregroundColor(item.color)
12-
.cornerRadius(4)
13-
.onTapGesture {
14-
self.selection = item.number
15-
}
16-
}
17-
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
18-
RoundedRectangle(cornerRadius: 4)
19-
.strokeBorder(lineWidth: 2)
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)
9+
ScrollView {
10+
Grid(items) { item in
11+
Rectangle()
12+
.foregroundColor(item.color)
13+
.cornerRadius(4)
14+
.onTapGesture {
15+
self.selection = item.number
16+
}
17+
}
18+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
19+
RoundedRectangle(cornerRadius: 4)
20+
.strokeBorder(lineWidth: 2)
21+
.foregroundColor(.white)
22+
.frame(
23+
width: preferences[self.selection].width,
24+
height: preferences[self.selection].height
25+
)
26+
.position(
27+
x: preferences[self.selection].midX,
28+
y: preferences[self.selection].midY
29+
)
30+
.animation(.linear)
31+
}
3032
}
3133
.gridStyle(
3234
ModularGridStyle(columns: .min(32), rows: .min(32), spacing: 4)

‎GridDemo watchOS WatchKit Extension/StaggeredGrid/StaggeredGridView.swift

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import Grid
33

44
struct StaggeredGridView: View {
55
var body: some View {
6-
Grid(1...69, id: \.self) { index in
7-
Image("\(index)")
8-
.resizable()
9-
.scaledToFit()
6+
ScrollView {
7+
Grid(1...69, id: \.self) { index in
8+
Image("\(index)")
9+
.resizable()
10+
.scaledToFit()
11+
}
1012
}
1113
.gridStyle(
1214
StaggeredGridStyle(tracks: 3, spacing: 1)

‎GridDemo.xcodeproj/project.pbxproj

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -832,6 +832,7 @@
832832
COPY_PHASE_STRIP = NO;
833833
DEBUG_INFORMATION_FORMAT = dwarf;
834834
DEVELOPMENT_ASSET_PATHS = "GridDemo\\ iOS/Preview\\ Content/Preview\\ Assets.xcassets";
835+
DEVELOPMENT_TEAM = "";
835836
ENABLE_PREVIEWS = YES;
836837
ENABLE_STRICT_OBJC_MSGSEND = YES;
837838
ENABLE_TESTABILITY = YES;
@@ -905,6 +906,7 @@
905906
COPY_PHASE_STRIP = NO;
906907
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
907908
DEVELOPMENT_ASSET_PATHS = "GridDemo\\ iOS/Preview\\ Content/Preview\\ Assets.xcassets";
909+
DEVELOPMENT_TEAM = "";
908910
ENABLE_NS_ASSERTIONS = NO;
909911
ENABLE_PREVIEWS = YES;
910912
ENABLE_STRICT_OBJC_MSGSEND = YES;

‎README.md

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ SwiftUI Grid view layout with custom styles.
66
## Features
77
- ZStack based layout
88
- Vertical and horizontal scrolling
9+
- Supports grid of grids, each with it's own style
910
- Supports all apple platforms
1011
- Custom styles (ModularGridStyle, StaggeredGridStyle)
1112
- SwiftUI code patterns (StyleStructs, EnvironmentValues, ViewBuilder)
@@ -21,12 +22,14 @@ Open `GridDemo.xcodeproj` for more examples for iOS, macOS, watchOS and tvOS
2122
</center>
2223

2324
```swift
24-
Grid(colors) {
25-
Rectangle()
26-
.foregroundColor($0)
25+
ScrollView {
26+
Grid(colors) {
27+
Rectangle()
28+
.foregroundColor($0)
29+
}
2730
}
2831
.gridStyle(
29-
ModularGridStyle(columns: .min(100), rows: .min(100))
32+
ModularGridStyle(columns: .min(100), rows: .fixed(100))
3033
)
3134
```
3235

@@ -37,13 +40,15 @@ Grid(colors) {
3740
</center>
3841

3942
```swift
40-
Grid(1...69, id: \.self) { index in
41-
Image("\(index)")
42-
.resizable()
43-
.scaledToFit()
43+
ScrollView {
44+
Grid(1...69, id: \.self) { index in
45+
Image("\(index)")
46+
.resizable()
47+
.scaledToFit()
48+
}
4449
}
4550
.gridStyle(
46-
StaggeredGridStyle(tracks: 8, axis: .horizontal, spacing: 4)
51+
StaggeredGridStyle(.horizontal, tracks: 8, spacing: 4)
4752
)
4853
```
4954

@@ -76,7 +81,7 @@ StaggeredGridStyle(tracks: .fixed(100))
7681
### Min
7782
Autolayout respecting a min item width or height.
7883
```swift
79-
ModularGridStyle(columns: .min(100), rows: .min(100))
84+
ModularGridStyle(columns: .min(100), rows: .fixed(100))
8085
StaggeredGridStyle(tracks: .min(100))
8186
```
8287

@@ -87,26 +92,28 @@ struct CardsView: View {
8792
@State var selection: Int = 0
8893

8994
var body: some View {
90-
Grid(0..<100) { number in
91-
Card(title: "\(number)")
92-
.onTapGesture {
93-
self.selection = number
94-
}
95-
}
96-
.padding()
97-
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
98-
RoundedRectangle(cornerRadius: 16)
99-
.strokeBorder(lineWidth: 4)
100-
.foregroundColor(.white)
101-
.frame(
102-
width: preferences[self.selection].width,
103-
height: preferences[self.selection].height
104-
)
105-
.position(
106-
x: preferences[self.selection].midX,
107-
y: preferences[self.selection].midY
108-
)
109-
.animation(.linear)
95+
ScrollView {
96+
Grid(0..<100) { number in
97+
Card(title: "\(number)")
98+
.onTapGesture {
99+
self.selection = number
100+
}
101+
}
102+
.padding()
103+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
104+
RoundedRectangle(cornerRadius: 16)
105+
.strokeBorder(lineWidth: 4)
106+
.foregroundColor(.white)
107+
.frame(
108+
width: preferences[self.selection].width,
109+
height: preferences[self.selection].height
110+
)
111+
.position(
112+
x: preferences[self.selection].midX,
113+
y: preferences[self.selection].midY
114+
)
115+
.animation(.linear)
116+
}
110117
}
111118
}
112119
}
@@ -120,7 +127,7 @@ struct CardsView: View {
120127
- Xcode 11.0+
121128

122129
## Roadmap
123-
- Item rearranging
130+
- Items span
124131
- 'CSS Grid'-like features
125132

126133
## Code Contributions

0 commit comments

Comments
 (0)