[Xcode 13] SwiftUI Picker Style Issue

 

안녕하세요 :) Zedd입니다.

오늘은 그냥 기록용. 

제목은 SwiftUI로 했지만 SwiftUI에만 국한된 이야기는 아닐 수 있겠다. UIKit으론 안해봤음ㅋ..

 

# 문제

struct ContentView: View {
    
    @State var selection: Int
    
    var arr = ["Zedd","Alan Walker", "David Guetta", "Avicii", "Marshmello", "Steve Aoki", "R3HAB", "Armin van Buuren", "Skrillex", "Illenium", "The Chainsmokers", "Don Diablo", "Afrojack", "Tiesto", "KSHMR", "DJ Snake", "Kygo", "Galantis", "Major Lazer", "Vicetone" ]
    
    var body: some View {
        Picker(selection: $selection, label: Text("")) {
            ForEach(0..<arr.count, id: \.self) { index in
                Text(arr[index])
            }
        }
    }
}

주어진 arr를 Picker로 보여주는 코드이다. (따로 PickerStyle을 지정해주지는 않았다.) 

내가 원한 UI는 다음과 같다.

Wheel Style

✔️ Xcode 12.x로 빌드 -> iOS 버전 상관없이 위와같은 UI로 나온다. (iOS 15여도) 

✔️ Xcode 13.x로 빌드 -> iOS 15이상에서 다음과 같이 나온다. (iOS 14 이하에서는 위와같은 UI로 나옴) 

문제는 간단하다. Wheel Style이 아닌 Menu Style로 나오고 있다. 

 

# 해결

해결 방법은 2가지가 있을 것 같다. (내 앱 기준..) 

1. Xcode 13.x && iOS 15이상에서도 Wheel Style로 나오게

2. 내 앱의 전체적인 UI가 Wheel Style에 맞춰져 있으니 이를 바꾼다.

 

# Xcode 13.x && iOS 15이상에서도 Wheel Style로 나오게

이건 굉장히 간단하다.

Picker(selection: $selection, label: Text("")) {
    ForEach(0..<arr.count, id: \.self) { index in
        Text(arr[index])
    }
}.pickerStyle(WheelPickerStyle()) ✅

pickerStyle을 명시적으로 WheelPickerStyle로 주는 것이다. 

이렇게만 해주면 Xcode 13.x && iOS 15이상에서도 Wheel Style로 나오게 된다. 

(WheelPickerStyle은 iOS13+ 이라 사용에는 문제없다.) 

 

# 내 앱의 전체적인 UI가 Wheel Style에 맞춰져 있으니 이를 바꾼다.

사실 WheelPickerStyle만 지정해주면 모든 문제는 해결된다. 

만들때는 Picker Style을 지정해주지 않았었기 때문에 기본적으로 Wheel Style이 나왔고,  

Wheel Style을 기준으로 UI를 만들어나갔다. 

나같은 경우에는 넘겨주는 arr가 꽤 길기 때문에 문득 UX적인 관점에서 Wheel Style이 적절한가? 하는 생각이 들었다. 

막상 이렇게 보니 Menu Style로 나오는게 더 편하게 느껴졌기 때문이다. (더 빨리 내가 원하는 걸 찾을 수 있는 느낌) 

그래서 해결방법 두번째로 내 앱의 전체적인 UI가 Wheel Style에 맞춰져 있으니 이를 바꾼다. 를 넣어보았다 ㅎ

동일한 문제에 직면했을 때 단순히 해결만 하는게 아니라 UI(동시에 UX)도 개선해보는 것도 선택지에 있었으면 해서 ㅎㅎ,,

Human Guild Line - Picker도 iOS 15에 맞춰서 업데이트가 된 듯하다. (추측..) 

 

나는 결국 Menu Style로 보여주는 해결방법을 택했는데, 

기존 Wheel Style보다 나아보인다 ㅎㅎ

 

⚠️ 이때 주의해야할 사항은 반드시

.pickerStyle(MenuPickerStyle())

MenuPickerStyle로 pickerStyle을 지정해줘야한다. 

그렇지 않으면 Xcode 12.x로 빌드시 

이렇게 나올 수도 있다.