Customized segmented control in Swift?

Question

I would like to recreate the same effect than Pinterest:

Given that I'm new in Swift, I have three simple questions:

• Is the menu a segmented control customized? or something like buttons?
• How can I create this effect/animation of sliding? Is this a collectionView or something like that?
• And finally, is it possible to create this with storyboard or the viewController needs to be created in full code?

Answer 1

my two cents for highly customisable segmented, with colors and fonts.

struct ContentView: View {
    @State private var segmentedSelection = 0
    let titles = ["AA", "BB", "CC"]
    let colors = [Color.red, .green, .white]
    
    var body: some View {
        VStack {
            CustomSegmentedControl(segmentedSelection: $segmentedSelection, titles: titles, colors: colors)
            Spacer()
            Text("Hello, selection is " + titles[segmentedSelection] )
                .padding()
        }
    }
}




struct CustomSegmentedControl: View {
    @Binding var segmentedSelection : Int
    var titles : [String]
    let colors : [Color]
    
    var body: some View {
        VStack {
            HStack{
                ForEach(0 ..< titles.count, id: \.self){ (i: Int) in
                    
                    Button(action: {
                        print(titles[i])
                        segmentedSelection = i
                    }, label: {
                        Text(titles[i])
                            .foregroundColor(colors[i])
                            .font(.system(size: i == segmentedSelection ? 22 : 16))
                    })
                    .frame(minWidth: 0, maxWidth: .infinity)

                }
            }
            
        }
    }
}