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

Commit 15800a8

Browse files
ay42ay42
authored
settings (#33)
1 parent 9784cc9 commit 15800a8

File tree

16 files changed

+251
-78
lines changed

16 files changed

+251
-78
lines changed

‎Examples/GridExamples iOS/ModularGridSettingsView.swift‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct ModularGridSettingsView: View {
5+
@Environment(\.presentationMode) var presentationMode
6+
@Binding var style: ModularGridStyle
7+
8+
@State var columnsCount: Int = 3
9+
@State var columnsFixed: CGFloat = 150
10+
@State var columnsMin: CGFloat = 100.0
11+
12+
@State var rowsCount: Int = 3
13+
@State var rowsFixed: CGFloat = 150
14+
@State var rowsMin: CGFloat = 100.0
15+
16+
var body: some View {
17+
NavigationView {
18+
List {
19+
Section {
20+
Picker(selection: self.$style.axis, label: Text("Axis")) {
21+
Text("Vertical")
22+
.tag(Axis.vertical)
23+
Text("Horizontal")
24+
.tag(Axis.horizontal)
25+
}
26+
}
27+
Section(header: Text("Columns")) {
28+
Picker(selection: self.$style.columns, label: Text("Columns")) {
29+
Text("Count (\(self.columnsCount))")
30+
.tag(Tracks.count(self.columnsCount))
31+
Text("Fixed (\(Int(self.columnsFixed)))")
32+
.tag(Tracks.fixed(self.columnsFixed))
33+
Text("Min (\(Int(self.columnsMin)))")
34+
.tag(Tracks.min(self.columnsMin))
35+
}
36+
}
37+
38+
Section(header: Text("Rows")) {
39+
Picker(selection: self.$style.rows, label: Text("Rows")) {
40+
Text("Count (\(self.rowsCount))")
41+
.tag(Tracks.count(self.rowsCount))
42+
Text("Fixed (\(Int(self.rowsFixed)))")
43+
.tag(Tracks.fixed(self.rowsFixed))
44+
Text("Min (\(Int(self.rowsMin)))")
45+
.tag(Tracks.min(self.rowsMin))
46+
}
47+
}
48+
49+
Section(header: Text("Spacing (\(Int(self.style.spacing)))")) {
50+
Slider(value: self.$style.spacing, in: 0...32)
51+
}
52+
}
53+
.navigationBarTitle("Modular Style")
54+
.navigationBarItems(trailing:
55+
Button(action: { self.presentationMode.wrappedValue.dismiss() }) {
56+
Image(systemName: "xmark.circle.fill")
57+
}
58+
)
59+
}
60+
.navigationViewStyle(
61+
StackNavigationViewStyle()
62+
)
63+
.pickerStyle(
64+
SegmentedPickerStyle()
65+
)
66+
.listStyle(
67+
GroupedListStyle()
68+
)
69+
}
70+
}
71+
72+
struct ModularGridSettingsView_Previews: PreviewProvider {
73+
static var previews: some View {
74+
ModularGridSettingsView(style: .constant(ModularGridStyle(columns: 3, rows: 3)))
75+
}
76+
}

‎Examples/GridExamples iOS/ModularGridView.swift‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,31 @@ import Grid
33

44
struct ModularGridView: View {
55
@State var items: [Item] = (0...100).map { Item(number: $0) }
6+
@State var showSettings: Bool = false
7+
@State var style = ModularGridStyle(columns: .min(100), rows: .min(100))
68

79
var body: some View {
810
NavigationView {
911
Grid(items) { item in
1012
Card(title: "\(item.number)", color: item.color)
1113
}
14+
.gridStyle(
15+
self.style
16+
)
1217
.navigationBarTitle("Modular Grid", displayMode: .inline)
18+
.navigationBarItems(leading:
19+
Button(action: { self.showSettings = true }) {
20+
Image(systemName: "gear")
21+
}
22+
)
1323
}
14-
.gridStyle(
15-
ModularGridStyle(columns: .auto(.min(100)), rows: .auto(.min(100)))
16-
)
24+
1725
.navigationViewStyle(
1826
StackNavigationViewStyle()
1927
)
28+
.sheet(isPresented: $showSettings) {
29+
ModularGridSettingsView(style: self.$style).accentColor(.purple)
30+
}
2031
}
2132
}
2233

‎Examples/GridExamples iOS/StaggeredGridSettingsView.swift‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct StaggeredGridSettingsView: View {
5+
@Environment(\.presentationMode) var presentationMode
6+
@Binding var style: StaggeredGridStyle
7+
8+
@State var tracksCount: Int = 3
9+
@State var tracksFixed: CGFloat = 150
10+
@State var tracksMin: CGFloat = 100.0
11+
12+
var body: some View {
13+
NavigationView {
14+
List {
15+
Section {
16+
Picker(selection: self.$style.axis, label: Text("Axis")) {
17+
Text("Vertical")
18+
.tag(Axis.vertical)
19+
Text("Horizontal")
20+
.tag(Axis.horizontal)
21+
}
22+
}
23+
Section(header: Text("Tracks")) {
24+
Picker(selection: self.$style.tracks, label: Text("Tracks")) {
25+
Text("Count (\(self.tracksCount))")
26+
.tag(Tracks.count(self.tracksCount))
27+
Text("Fixed (\(Int(self.tracksFixed)))")
28+
.tag(Tracks.fixed(self.tracksFixed))
29+
Text("Min (\(Int(self.tracksMin)))")
30+
.tag(Tracks.min(self.tracksMin))
31+
}
32+
}
33+
34+
Section(header: Text("Spacing (\(Int(self.style.spacing)))")) {
35+
Slider(value: self.$style.spacing, in: 0...32)
36+
}
37+
}
38+
.navigationBarTitle("Staggered Style")
39+
.navigationBarItems(trailing:
40+
Button(action: { self.presentationMode.wrappedValue.dismiss() }) {
41+
Image(systemName: "xmark.circle.fill")
42+
}
43+
)
44+
}
45+
.navigationViewStyle(
46+
StackNavigationViewStyle()
47+
)
48+
.pickerStyle(
49+
SegmentedPickerStyle()
50+
)
51+
.listStyle(
52+
GroupedListStyle()
53+
)
54+
}
55+
}
56+
57+
struct StaggeredGridSettingsView_Previews: PreviewProvider {
58+
static var previews: some View {
59+
StaggeredGridSettingsView(style: .constant(StaggeredGridStyle(tracks: 3)))
60+
}
61+
}

‎Examples/GridExamples iOS/StaggeredGridView.swift‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import SwiftUI
22
import Grid
33

44
struct StaggeredGridView: View {
5+
@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))
7+
58
var body: some View {
69
NavigationView {
710
Grid(1...69, id: \.self) { index in
@@ -10,13 +13,21 @@ struct StaggeredGridView: View {
1013
.scaledToFit()
1114
}
1215
.navigationBarTitle("Staggered Grid", displayMode: .inline)
16+
.navigationBarItems(leading:
17+
Button(action: { self.showSettings = true }) {
18+
Image(systemName: "gear")
19+
}
20+
)
1321
}
1422
.gridStyle(
15-
StaggeredGridStyle(tracks: .auto(.min(100)), axis: .vertical, spacing: 1, padding: .init(top: 1, leading: 1, bottom: 1, trailing: 1))
23+
self.style
1624
)
1725
.navigationViewStyle(
1826
StackNavigationViewStyle()
1927
)
28+
.sheet(isPresented: $showSettings) {
29+
StaggeredGridSettingsView(style: self.$style).accentColor(.purple)
30+
}
2031
}
2132
}
2233

‎Examples/GridExamples macOS/ModularGridView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ struct ModularGridView: View {
2727
.animation(.linear)
2828
}
2929
.gridStyle(
30-
ModularGridStyle(columns: .auto(.min(200)), rows: .auto(.min(200)))
30+
ModularGridStyle(columns: .min(200), rows: .min(200))
3131
)
3232
}
3333
}

‎Examples/GridExamples tvOS/ModularGridView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ struct ModularGridView: View {
2929
.animation(.linear)
3030
}
3131
.gridStyle(
32-
ModularGridStyle(columns: .auto(.min(300)), rows: .auto(.min(100)))
32+
ModularGridStyle(columns: .min(300), rows: .min(100))
3333
)
3434
}
3535
}

‎Examples/GridExamples tvOS/StaggeredGridView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ struct StaggeredGridView: View {
99
.scaledToFit()
1010
}
1111
.gridStyle(
12-
StaggeredGridStyle(tracks: .auto(.min(200)))
12+
StaggeredGridStyle(tracks: .min(200))
1313
)
1414
}
1515
}

‎Examples/GridExamples watchOS WatchKit Extension/ModularGridView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ struct ModularGridView: View {
2929
.animation(.linear)
3030
}
3131
.gridStyle(
32-
ModularGridStyle(columns: .auto(.min(32)), rows: .auto(.min(32)), spacing: 4)
32+
ModularGridStyle(columns: .min(32), rows: .min(32), spacing: 4)
3333
)
3434
}
3535
}

‎Examples/GridExamples.xcodeproj/project.pbxproj‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@
5656
FA902162230B379D00BF9341 /* Color+Random.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA902160230B379D00BF9341 /* Color+Random.swift */; };
5757
FA902164230B389900BF9341 /* Card.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA902163230B389900BF9341 /* Card.swift */; };
5858
FA902165230B389900BF9341 /* Card.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA902163230B389900BF9341 /* Card.swift */; };
59+
FAA99F032381FCBB00CE1632 /* ModularGridSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAA99F022381FCBB00CE1632 /* ModularGridSettingsView.swift */; };
60+
FAA99F0523821F3200CE1632 /* StaggeredGridSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAA99F0423821F3200CE1632 /* StaggeredGridSettingsView.swift */; };
5961
FAAF755F2381E9F500DFDE03 /* Item.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAAF755E2381E9F500DFDE03 /* Item.swift */; };
6062
FAAF75602381E9F500DFDE03 /* Item.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAAF755E2381E9F500DFDE03 /* Item.swift */; };
6163
FAAF75612381E9F500DFDE03 /* Item.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAAF755E2381E9F500DFDE03 /* Item.swift */; };
@@ -154,6 +156,8 @@
154156
FA902160230B379D00BF9341 /* Color+Random.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Color+Random.swift"; sourceTree = "<group>"; };
155157
FA902163230B389900BF9341 /* Card.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Card.swift; sourceTree = "<group>"; };
156158
FA90216F230B4AC300BF9341 /* README.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; name = README.md; path = ../README.md; sourceTree = "<group>"; };
159+
FAA99F022381FCBB00CE1632 /* ModularGridSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModularGridSettingsView.swift; sourceTree = "<group>"; };
160+
FAA99F0423821F3200CE1632 /* StaggeredGridSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StaggeredGridSettingsView.swift; sourceTree = "<group>"; };
157161
FAAF755E2381E9F500DFDE03 /* Item.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Item.swift; sourceTree = "<group>"; };
158162
/* End PBXFileReference section */
159163

@@ -270,9 +274,9 @@
270274
children = (
271275
FA902111230B32EA00BF9341 /* GridExamples.app */,
272276
FA902146230B341C00BF9341 /* GridExamples.app */,
273-
FA61E95623134504006A5B6B /* GridExamples.app */,
274-
FA61E95923134505006A5B6B /* GridExamples.app */,
275-
FA61E96823134507006A5B6B /* GridExamples.appex */,
277+
FA61E95623134504006A5B6B /* GridExamples watchOS.app */,
278+
FA61E95923134505006A5B6B /* GridExamples watchOS WatchKit App.app */,
279+
FA61E96823134507006A5B6B /* GridExamples watchOS WatchKit Extension.appex */,
276280
FA61E994231351FC006A5B6B /* GridExamples.app */,
277281
);
278282
name = Products;
@@ -285,7 +289,9 @@
285289
FA902116230B32EA00BF9341 /* SceneDelegate.swift */,
286290
FA902118230B32EA00BF9341 /* ContentView.swift */,
287291
FA31E11C237E4EED005799AD /* ModularGridView.swift */,
292+
FAA99F022381FCBB00CE1632 /* ModularGridSettingsView.swift */,
288293
FA0FB89C23811DC800B6E84F /* StaggeredGridView.swift */,
294+
FAA99F0423821F3200CE1632 /* StaggeredGridSettingsView.swift */,
289295
FA90211A230B32EC00BF9341 /* Assets.xcassets */,
290296
FA90211F230B32EC00BF9341 /* LaunchScreen.storyboard */,
291297
FA902122230B32EC00BF9341 /* Info.plist */,
@@ -618,6 +624,8 @@
618624
FA902164230B389900BF9341 /* Card.swift in Sources */,
619625
FA902117230B32EA00BF9341 /* SceneDelegate.swift in Sources */,
620626
FA0FB89D23811DC800B6E84F /* StaggeredGridView.swift in Sources */,
627+
FAA99F032381FCBB00CE1632 /* ModularGridSettingsView.swift in Sources */,
628+
FAA99F0523821F3200CE1632 /* StaggeredGridSettingsView.swift in Sources */,
621629
FAAF755F2381E9F500DFDE03 /* Item.swift in Sources */,
622630
FA902119230B32EA00BF9341 /* ContentView.swift in Sources */,
623631
FA902161230B379D00BF9341 /* Color+Random.swift in Sources */,

‎README.md‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Grid(colors) {
2424
.foregroundColor($0)
2525
}
2626
.gridStyle(
27-
ModularGridStyle(columns: .auto(.min(100)), rows: .auto(.min(100)))
27+
ModularGridStyle(columns: .min(100), rows: .min(100))
2828
)
2929
```
3030

@@ -45,6 +45,39 @@ Grid(1...69, id: \.self) { index in
4545
)
4646
```
4747

48+
## Tracks
49+
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.
50+
51+
```swift
52+
public enum Tracks: Hashable {
53+
case count(Int)
54+
case fixed(CGFloat)
55+
case min(CGFloat)
56+
}
57+
```
58+
59+
### Count
60+
Grid is split into equal fractions of size provided by a parent view.
61+
62+
```swift
63+
ModularGridStyle(columns: 3, rows: 3)
64+
StaggeredGridStyle(tracks: 8)
65+
```
66+
67+
### Fixed
68+
Item size is fixed to a specific width or height.
69+
```swift
70+
ModularGridStyle(columns: .fixed(100), rows: .fixed(100))
71+
StaggeredGridStyle(tracks: .fixed(100))
72+
```
73+
74+
### Min
75+
Autolayout respecting a min item width or height.
76+
```swift
77+
ModularGridStyle(columns: .min(100), rows: .min(100))
78+
StaggeredGridStyle(tracks: .min(100))
79+
```
80+
4881
## Preferences
4982
Get item size and position with preferences
5083
```swift

0 commit comments

Comments
 (0)