title: SwiftUI Create a Custom Segmented Control also in a ScrollView
body: <p>Below is my code to create a standard segmented control.  </p>
  
  <pre><code>struct ContentView: View {
  
      @State private var favoriteColor = 0
      var colors = ["Red", "Green", "Blue"]
  
      var body: some View {
          VStack {
              Picker(selection: $favoriteColor, label: Text("What is your favorite color?")) {
                  ForEach(0..&lt;colors.count) { index in
                      Text(self.colors[index]).tag(index)
                  }
              }.pickerStyle(SegmentedPickerStyle())
  
              Text("Value: \(colors[favoriteColor])")
          }
      }
  }
  </code></pre>
  
  <p>My question is how could I modify it to have a customized segmented control where I can have the boarder rounded along with my own colors, as it was somewhat easy to do with UIKit? Has any one done this yet. </p>
  
  <p>I prefect example is the Uber eats app, when you select a restaurant you can scroll to the particular portion of the menu by selecting an option in the customized segmented control.</p>
  
  <p>Included are the elements I'm looking to have customized:</p>
  
  <p><a href="https://i.stack.imgur.com/sPe0V.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sPe0V.png" alt="enter image description here"></a></p>
  
  <p><strong>* UPDATE *</strong></p>
  
  <p>Image of the final design</p>
  
  <p><a href="https://i.stack.imgur.com/Gm1ny.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Gm1ny.png" alt="enter image description here"></a></p>