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

Commit 04f0bce

Browse files
ay42ay42
authored
Sliders (#53)
* sliders * readme
1 parent 69afc12 commit 04f0bce

File tree

52 files changed

+3382
-2
lines changed

Some content is hidden

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

52 files changed

+3382
-2
lines changed

‎Demo/SwiftUIExtensionsDemo iOS/ContentView.swift

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,30 @@ struct ContentView: View {
3030
}
3131
}
3232

33+
34+
Section(header: Text("Sliders")) {
35+
NavigationLink(destination: HorizontalSliderExamplesView()) {
36+
HStack {
37+
Image(systemName: "square.split.1x2.fill")
38+
Text("Horizontal")
39+
}
40+
}
41+
42+
NavigationLink(destination: VerticalSliderExamplesView()) {
43+
HStack {
44+
Image(systemName: "square.split.2x1.fill")
45+
Text("Vertical")
46+
}
47+
}
48+
49+
NavigationLink(destination: PointSliderExamplesView()) {
50+
HStack {
51+
Image(systemName: "square.split.2x2.fill")
52+
Text("Point")
53+
}
54+
}
55+
}
56+
3357
Section(header: Text("Shapes")) {
3458
NavigationLink(destination: RegularPolygonsView()) {
3559
HStack {

‎Demo/SwiftUIExtensionsDemo iOS/SceneDelegate.swift

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class SceneDelegate: UIResponder, UIWindowSceneDelegate {
1212
// This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
1313

1414
// Create the SwiftUI view that provides the window contents.
15-
let contentView = ContentView()
15+
let contentView = ContentView().environmentObject(Model())
1616

1717
// Use a UIHostingController as window root view controller.
1818
if let windowScene = scene as? UIWindowScene {

‎Demo/SwiftUIExtensionsDemo iOS/Sliders/HorizontalSliderExamplesView.swift

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import SwiftUI
2+
import SwiftUIExtensions
3+
4+
struct HorizontalSliderExamplesView: View {
5+
@EnvironmentObject var model: Model
6+
7+
var body: some View {
8+
ScrollView {
9+
Group {
10+
11+
HSlider(value: $model.value1)
12+
13+
// ValueSlider(value: $model.value1)
14+
// .background(Color.yellow)
15+
// .valueSliderStyle(
16+
// HorizontalValueSliderStyle(
17+
// track: { HorizontalValueTrack(value: $0) },
18+
// thumbSize: CGSize(width: 32, height: 32),
19+
// options: .interactiveTrack
20+
// )
21+
// )
22+
23+
24+
HSlider(value: $model.value2,
25+
configuration: .init(
26+
thumbSize: CGSize(width: 16, height: 32)
27+
)
28+
)
29+
30+
HSlider(value: $model.value3, track:
31+
LinearGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .pink]), startPoint: .leading, endPoint: .trailing)
32+
.frame(height: 8)
33+
.cornerRadius(4)
34+
)
35+
36+
HSlider(
37+
value: $model.value4,
38+
track:
39+
HTrack(
40+
value: model.value4,
41+
view: Rectangle()
42+
.foregroundColor(.green)
43+
.frame(height: 8),
44+
configuration: .init(
45+
offsets: 8
46+
)
47+
)
48+
.background(Color.white)
49+
.frame(height: 8)
50+
.cornerRadius(3)
51+
.overlay(
52+
Capsule().strokeBorder(Color.white.opacity(0.5), lineWidth: 1)
53+
)
54+
.animation(
55+
.spring(response: 0.7, dampingFraction: 0.4)
56+
),
57+
configuration: .init(
58+
thumbSize: CGSize(width: 16, height: 16)
59+
)
60+
61+
)
62+
63+
HSlider(
64+
value: $model.value5,
65+
track:
66+
LinearGradient(gradient: Gradient(colors: [.purple, .blue, .purple]), startPoint: .leading, endPoint: .trailing)
67+
.frame(height: 6)
68+
.cornerRadius(3),
69+
configuration: .init(
70+
thumbSize: CGSize(width: 48, height: 16)
71+
)
72+
)
73+
74+
HSlider(
75+
value: $model.value6,
76+
track:
77+
ZStack {
78+
HTrack(
79+
value: model.value6,
80+
view: Rectangle().foregroundColor(.white).opacity(0.2),
81+
mask: Rectangle()
82+
)
83+
84+
HTrack(
85+
value: model.value6,
86+
view: LinearGradient(gradient: Gradient(colors: [.purple, .blue, .purple]), startPoint: .leading, endPoint: .trailing).opacity(0.8),
87+
mask: Rectangle()
88+
)
89+
.overlay(
90+
Capsule().strokeBorder(Color.white.opacity(0.5), lineWidth: 2)
91+
)
92+
.animation(.easeInOut(duration: 1.0))
93+
}
94+
.background(Capsule().foregroundColor(Color.secondary.opacity(0.25)))
95+
.frame(height: 32)
96+
.cornerRadius(16),
97+
thumb: EmptyView(),
98+
configuration: .init(
99+
options: .interactiveTrack,
100+
thumbSize: .zero
101+
)
102+
)
103+
}
104+
105+
Group {
106+
HorizontalRangeSlider(range: $model.range1)
107+
108+
HRangeSlider(
109+
range: $model.range2,
110+
track:
111+
HRangeTrack(
112+
range: model.range2,
113+
view: Capsule().foregroundColor(.purple),
114+
mask: Rectangle(),
115+
configuration: .init(
116+
lowerOffset: 32,
117+
upperOffset: 48
118+
)
119+
)
120+
.background(Capsule().foregroundColor(Color.purple.opacity(0.25)))
121+
.frame(height: 8),
122+
lowerThumb: Circle().foregroundColor(.purple),
123+
upperThumb: Circle().foregroundColor(.purple),
124+
configuration: .init(
125+
thumbSize: CGSize(width: 32, height: 32)
126+
)
127+
)
128+
129+
HRangeSlider(
130+
range: $model.range3,
131+
track:
132+
HRangeTrack(
133+
range: model.range3,
134+
view: LinearGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .pink]), startPoint: .leading, endPoint: .trailing),
135+
configuration: .init(
136+
offsets: 32
137+
)
138+
)
139+
.background(LinearGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .pink]), startPoint: .leading, endPoint: .trailing).opacity(0.25))
140+
.frame(height: 32)
141+
.cornerRadius(16),
142+
lowerThumb: HalfCapsule().foregroundColor(.white).shadow(radius: 3),
143+
upperThumb: HalfCapsule().rotation(Angle(degrees: 180)).foregroundColor(.white).shadow(radius: 3),
144+
configuration: .init(
145+
thumbSize: CGSize(width: 32, height: 32)
146+
)
147+
)
148+
149+
HRangeSlider(
150+
range: $model.range4,
151+
track:
152+
HRangeTrack(
153+
range: model.range4,
154+
view: LinearGradient(gradient: Gradient(colors: [.purple, .blue, .purple]), startPoint: .leading, endPoint: .trailing),
155+
mask: Rectangle(),
156+
configuration: .init(
157+
offsets: 16
158+
)
159+
)
160+
.mask(Ellipse())
161+
.background(Ellipse().foregroundColor(Color.secondary.opacity(0.25)))
162+
.overlay(Ellipse().strokeBorder(Color.white.opacity(0.5), lineWidth: 1))
163+
.padding(.vertical, 8),
164+
configuration: .init(
165+
thumbSize: CGSize(width: 16, height: 64)
166+
)
167+
)
168+
.frame(height: 64)
169+
170+
HRangeSlider(
171+
range: $model.range5,
172+
in: 0.0...1.0,
173+
step: 0.01,
174+
track:
175+
HRangeTrack(
176+
range: model.range5,
177+
view: LinearGradient(gradient: Gradient(colors: [.yellow, .orange, .red]), startPoint: .leading, endPoint: .trailing),
178+
mask: Rectangle(),
179+
configuration: .init(
180+
offsets: 32
181+
)
182+
)
183+
.background(Color.secondary.opacity(0.25))
184+
.cornerRadius(16),
185+
lowerThumb: HalfCapsule().foregroundColor(.white).shadow(radius: 3),
186+
upperThumb: HalfCapsule().rotation(Angle(degrees: 180)).foregroundColor(.white).shadow(radius: 3),
187+
configuration: .init(
188+
thumbSize: CGSize(width: 32, height: 64)
189+
)
190+
191+
)
192+
.frame(height: 64)
193+
194+
HRangeSlider(
195+
range: $model.range6,
196+
track: HRangeTrack(
197+
range: model.range6,
198+
view:
199+
ZStack {
200+
LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .leading, endPoint: .trailing)
201+
VStack {
202+
Text("Any View")
203+
.font(.largeTitle)
204+
.foregroundColor(Color.white)
205+
Text("Place any view here and it will be masked to a selected value range")
206+
.font(.title)
207+
.foregroundColor(Color.white.opacity(0.5))
208+
}
209+
},
210+
mask: RoundedRectangle(cornerRadius: 10),
211+
configuration: .init(
212+
offsets: 8
213+
)
214+
)
215+
.background(Color.secondary.opacity(0.25)),
216+
configuration: .init(
217+
thumbSize: CGSize(width: 8, height: 64)
218+
)
219+
)
220+
.cornerRadius(8)
221+
.frame(height: 128)
222+
}
223+
224+
}
225+
.padding()
226+
.navigationBarTitle("Horizontal Sliders")
227+
}
228+
}
229+
230+
231+
struct HorizontalSliderExamplesView_Previews: PreviewProvider {
232+
static var previews: some View {
233+
HorizontalSliderExamplesView().environmentObject(Model.preview)
234+
}
235+
}

‎Demo/SwiftUIExtensionsDemo iOS/Sliders/PointSliderExamplesView.swift

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import SwiftUI
2+
import SwiftUIExtensions
3+
4+
struct PointSliderExamplesView: View {
5+
@EnvironmentObject var model: Model
6+
7+
var body: some View {
8+
ScrollView {
9+
Group {
10+
XYSlider(
11+
x: $model.pointX1,
12+
y: $model.pointY1,
13+
track:
14+
ZStack {
15+
LinearGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .pink]), startPoint: .leading, endPoint: .trailing)
16+
LinearGradient(gradient: Gradient(colors: [.white, .clear]), startPoint: .bottom, endPoint: .top).blendMode(.hardLight)
17+
},
18+
thumb:
19+
Circle()
20+
.foregroundColor(.white)
21+
.shadow(radius: 3),
22+
configuration: .init(
23+
options: .interactiveTrack,
24+
thumbSize: CGSize(width: 48, height: 48)
25+
)
26+
)
27+
.overlay(
28+
RoundedRectangle(cornerRadius: 24)
29+
.strokeBorder(lineWidth: 4)
30+
.foregroundColor(Color.white)
31+
)
32+
.cornerRadius(24)
33+
.frame(height: 256)
34+
.shadow(radius: 3)
35+
.padding()
36+
37+
HStack {
38+
XYSlider(
39+
x: $model.pointX2,
40+
y: $model.pointY2,
41+
track:
42+
RoundedRectangle(cornerRadius: 24)
43+
.foregroundColor(
44+
Color(hue: 0.67, saturation: model.pointY2, brightness: 1.0)
45+
),
46+
thumb:
47+
ZStack {
48+
Capsule().frame(width: 12).foregroundColor(.white)
49+
Capsule().frame(height: 12).foregroundColor(.white)
50+
}
51+
.compositingGroup()
52+
.rotationEffect(Angle(radians: model.pointX2 * 10))
53+
.shadow(radius: 3),
54+
configuration: .init(
55+
options: .interactiveTrack,
56+
thumbSize: CGSize(width: 48, height: 48)
57+
)
58+
)
59+
.frame(height: 256)
60+
.shadow(radius: 3)
61+
.padding()
62+
63+
XYSlider(
64+
x: $model.pointX3,
65+
y: $model.pointY3,
66+
track:
67+
ZStack {
68+
LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .leading, endPoint: .trailing)
69+
VStack {
70+
Text("Any View")
71+
.font(.largeTitle)
72+
.foregroundColor(Color.white)
73+
Text("Place any view here")
74+
.font(.title)
75+
.foregroundColor(Color.white.opacity(0.5))
76+
}
77+
}
78+
.cornerRadius(24),
79+
thumb:
80+
Capsule()
81+
.foregroundColor(.white)
82+
.shadow(radius: 3),
83+
configuration: .init(
84+
options: .interactiveTrack,
85+
thumbSize: CGSize(width: 96, height: 48)
86+
)
87+
)
88+
.frame(height: 256)
89+
.shadow(radius: 3)
90+
.padding()
91+
}
92+
93+
XYSlider(x: $model.pointX4, y: $model.pointY4)
94+
.frame(height: 256)
95+
.padding()
96+
97+
}
98+
99+
}
100+
.padding()
101+
.navigationBarTitle("Point Sliders")
102+
}
103+
}
104+
105+
106+
struct PointSliderExamplesView_Previews: PreviewProvider {
107+
static var previews: some View {
108+
PointSliderExamplesView().environmentObject(Model.preview)
109+
}
110+
}

0 commit comments

Comments
 (0)