SwiftUI Segment Picker의 round 유지하며 background color 변경하기

SwiftUI의 Picker view의 `pickerStyle`을 .segmented로 설정해주면, UIKit의 `Uisegmentedcontrol`과 같은 모양의 UI를 사용할 수 있습니다.

 

Picker

Picker의 rounded corner

 

 

기본적으로 배경색이 회색이고 round된 corner를 가진 모양입니다. 배경색상을 변경할 필요가 있었고, `background`를 설정해주면 될 것 같아 적용해 보았습니다.

 

struct SegmentedView: View {
    @Binding var element: PickerElement
    var body: some View {
        Picker(selection: $element) {
            ForEach(PickerElement.allCases) {
                Text($0.rawValue)
            }
        } label: {
            Text("Segmented Picker")
        }.pickerStyle(.segmented)
            .background { // background에 Color 설정
                Color.yellow
            }
    }
}

이렇게 했더니 배경색상이 노란색으로 변경되기는 하는데, 기본적으로 적용되던 corner radius가 반영되지 않는 모습이었습니다.

 

 

Background 설정 후

Round corner가 무시되고 배경이 생긴 모습

 

 

이 때 둥근 모서리 모양도 유지하고 싶다면, background에 Color view 대신 RoundedRectangle을 사용해주면 됩니다!

 

 .background {
    RoundedRectangle(cornerRadius: 5)  // Color 대신 RoundedRectangle을 사용하고 cornerRadius 설정
    .fill(.yellow) // 도형의 색상을 원하는 색상으로 적용
}

 

이렇게 해주면 아래처럼 rounded corner와 배경색이 같이 잘 나오는 것을 확인할 수 있습니다.

 

 

 

 

다만, cornerRadius의 값이 너무 크면 원하는 대로 적용이 안되기도 하던데, 더 좋은 방법을 아시는 분께서는 알려주시면 감사하겠습니다.

 

감사합니다!