SwiftUI Custom picker with Arrow Shape

user_8719510 0
Viewed 85

I am trying to create SwiftUI Custom picker with Arrow Shape like

enter image description here

What I have done so far is :

struct SItem: Identifiable, Hashable {
    var text: String
    var id = UUID()
}

struct BreadCumView: View {

    var items: [SItem] = [SItem(text: "Item 1"), SItem(text: "Item 2"), SItem(text: "Item 3")]

    @State var selectedIndex: Int = 0

    var body: some View {

        HStack {
            ForEach(self.items.indices) { index in
                let tab = self.items[index]
                Button(tab.text) {
                    selectedIndex = index
                }.buttonStyle(CustomSegmentButtonStyle())
            }
        }
    }
}





 struct CustomSegmentButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration
                .label
                .padding(8)
                .background(
                    Color(red: 0.808, green: 0.831, blue: 0.855, opacity: 0.9)
                )
        }
 }

How to create Shape style for Background? With Selected Stats.

swiftui swift ios
1 Answers

Here's an arrow Shape using @Asperi's comment:

struct ArrowShape: Shape {
func path(in rect: CGRect) -> Path {
    Path { path in
        let chunk = rect.height * 0.5
        path.move(to: .zero)
        path.addLine(to: CGPoint(x: rect.width, y: 0))
        path.addLine(to: CGPoint(x: max(rect.width - chunk, rect.width / 2), y: 0))
        path.addLine(to: CGPoint(x: rect.width), y: chunk)
        path.addLine(to: CGPoint(x: max(rect.width - chunk, rect.width / 2), y: rect.height))
        path.addLine(to: CGPoint(x: 0, y: rect.height))
    }
}

}

user_132789220
Related