Skip to content

Instantly share code, notes, and snippets.

@mferak
Created March 29, 2025 19:45
Show Gist options
  • Save mferak/81daea6fe592e4c5fec1de57050119ab to your computer and use it in GitHub Desktop.
Save mferak/81daea6fe592e4c5fec1de57050119ab to your computer and use it in GitHub Desktop.
SegmentedPicker in style of Apple's newer apps such as Photos
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
)
}
}
}
@mferak
Copy link
Author

mferak commented Mar 29, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment