Reputation: 466
I was trying to change radius of segment control in SwiftUI. I am only able to change the outer radius. Is there any way to change the radius of selected tag?
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..<colors.count) { index in
Text(self.colors[index]).tag(index)
}
}.pickerStyle(SegmentedPickerStyle())
.cornerRadius(13). ////////////////////////////////--
Text("Value: \(colors[favoriteColor])")
}
}
}
Upvotes: 5
Views: 2216
Reputation: 1909
Use the Introspection Library to access the underlying UISegmentedControl
from the SwiftUI view. Doing so, you can customize it. Here's an example for you:
struct ContentView : View {
// 1.
@State private var selectorIndex = 0
@State private var numbers = ["One","Two","Three"]
var body: some View {
VStack {
// 2
Picker("Numbers", selection: $selectorIndex) {
ForEach(0 ..< numbers.count) { index in
Text(self.numbers[index]).tag(index)
}
}
.pickerStyle(SegmentedPickerStyle())
.introspectSegmentedControl{
segmentedControl in
segmentedControl.layer.cornerRadius = 0
segmentedControl.layer.borderColor = UIColor(red: 170.0/255.0, green: 170.0/255.0, blue: 170.0/255.0, alpha: 1.0).cgColor
segmentedControl.layer.borderWidth = 1.0
segmentedControl.layer.masksToBounds = true
segmentedControl.clipsToBounds = true
}
// 3.
Text("Selected value is: \(numbers[selectorIndex])").padding()
}
}
}
Upvotes: 3
Reputation: 9473
At this point, I believe there is no way to modify the properties (e.g. shape) of the selected tag. I assume this is either a stylistic choice by Apple (because they want standard controls to truly look "standard"), or they just haven't gotten around to it (SwiftUI is very much a 1.0 at this point).
Upvotes: 3