blob: 86bf4bccf07ed7d7d80d37919596625a474306e9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
//
// SegmentedControl.swift
// MullvadVPN
//
// Created by Marco Nikic on 2025-09-03.
// Copyright © 2025 Mullvad VPN AB. All rights reserved.
//
import SwiftUI
class SegmentedControlViewModel: ObservableObject {
@Published var selectedSegmentIndex = 0
}
struct SegmentedControl<Segment: StringProtocol>: View {
var segments: [Segment]
@ObservedObject var viewModel: SegmentedControlViewModel
public var onSelectedSegment: ((Int) -> Void)?
func isSelected(segment: Segment) -> Bool {
viewModel.selectedSegmentIndex == segments.firstIndex(of: segment)
}
var body: some View {
GeometryReader { proxy in
HStack(spacing: 0) {
ForEach(segments, id: \.self) { segment in
// The segments are expected to be already localised
Text(segment)
.font(.mullvadSmallSemiBold)
.foregroundStyle(.white)
.frame(maxWidth: .infinity) // Makes the text take all the available space
.contentShape(Rectangle()) // Makes the tappable area extend beyond just the text
.onTapGesture {
withAnimation(.easeInOut(duration: 0.25)) {
viewModel.selectedSegmentIndex = segments.firstIndex(of: segment)!
onSelectedSegment?(viewModel.selectedSegmentIndex)
}
}
.background(
Group {
if isSelected(segment: segment) {
Capsule()
.fill(UIColor.SegmentedControl.selectedColor.color)
.frame(height: 36)
} else {
Capsule()
.fill(UIColor.SegmentedControl.backgroundColor.color)
.frame(height: 36)
}
}
)
}
}
.padding([.leading, .trailing], 4) // Insets the inner shape to not overlay with the outer one
.frame(maxWidth: .infinity, maxHeight: proxy.size.height)
.background(
Capsule(style: .circular)
.fill(UIColor.SegmentedControl.backgroundColor.color)
)
.clipShape(Capsule())
}
}
}
#Preview {
VStack {
Spacer()
SegmentedControl(
segments: ["Entry", "Exit"],
viewModel: SegmentedControlViewModel(),
onSelectedSegment: { newIndex in print("Selected \(newIndex)") }
)
.frame(height: 44)
Spacer()
}
.background(Color.mullvadBackground)
}
|
