Created
March 29, 2025 19:45
-
-
Save mferak/81daea6fe592e4c5fec1de57050119ab to your computer and use it in GitHub Desktop.
SegmentedPicker in style of Apple's newer apps such as Photos
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct SegmentedPicker: View { | |
@State var selectedValue: PickerExampleValue | |
@Namespace var pickerAnimation | |
@Environment(\.accessibilityReduceMotion) private var reduceMotion | |
var body: some View { | |
HStack { | |
ForEach(PickerExampleValue.allCases) { value in | |
let isSelected = value == selectedValue | |
Button(action: { | |
withAnimation(.spring(duration: 0.25)) { | |
selectedValue = value | |
} | |
}) { | |
Text(value.rawValue.capitalized) | |
.padding(.horizontal, 12) | |
.padding(.vertical, 6) | |
.font(.subheadline.bold()) | |
.foregroundStyle(.white) | |
.background { | |
if isSelected { | |
RoundedRectangle(cornerRadius: 50) | |
.fill(.tertiary) | |
.matchedGeometryEffect(id: "background", in: pickerAnimation) | |
} | |
} | |
} | |
.buttonStyle(.plain) | |
} | |
} | |
.tint(.purple) | |
.padding(4) | |
.background( | |
RoundedRectangle(cornerRadius: 50) | |
.fill(.ultraThinMaterial) | |
) | |
} | |
} | |
enum PickerExampleValue: String, Codable, CaseIterable, Identifiable { | |
case easy | |
case medium | |
case hard | |
var id: String { rawValue } | |
} | |
#Preview { | |
ZStack { | |
LinearGradient(colors: [.black, .indigo], startPoint: .topLeading, endPoint: .bottom) | |
.ignoresSafeArea() | |
VStack { | |
Spacer() | |
SegmentedPicker( | |
selectedValue: .easy | |
) | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is what it looks like:
Screen.Recording.2025-03-29.at.20.43.52.mov
I've created this for my game Kahudo, which is available in App Store for free.