[SwiftUI] Picker, pickerStyle - 여러가지 중 하나를 선택

[머릿말]

iOS 프로젝트를 진행하면서 그동안 아이폰을 사용하면서 봤던 것들을 하나씩 접하게 되는데, 보물을 찾는 것처럼 재밌고 신기하다. 이번에 찾은 것은 여러가지 중 하나를 선택할 때 사용하는 Picker이다.

---

1. Picker란?

공식 문서에서의 내용은 다음과 같다.

"상호배타적인 값 집합에서 선택하기 위한 컨트롤"

 

여러 값에서 하나를 선택할 때 사용하는 것이라고 보면 되는데 아래 사진에 있는 것들이 모두 Picker이다.

 

2. 사용 방법

2-1. Picker(_ titleKey:selection:content:) - 값의 집합을 만들지 않고 사용

• titleKey : Picker 제목
• selection : 선택된 값(Binding)
• content : Picker 구성 내용

selection에는 각 아이템의 tag로 사용한 값과 같은 타입의 변수가 바인딩 되어야 한다. 위 형식의 Picker 초기화 함수를 사용하여 간단한 Picker을 만들어보면 다음과 같다.

import SwiftUI

struct ContentView: View {
    
    @State var selectedColor: String = "red" // String 타입의 tag 사용
    
    var body: some View {
        
        VStack {
            Picker("Color Picker", selection: $selectedColor) {
                Text("빨간색").tag("red")
                Text("파란색").tag("blue")
                Text("초록색").tag("green")
                Text("노란색").tag("yellow")
            }
        }
        .padding()
        
    }
    
}

selectedColor 변수에 할당된 "red"릍 tag로 하는 빨간색이 선택

 

2-2. 값의 집합을 만들어 사용

위 예제와는 달리 여러 값의 집합을 만들어서 Picker를 만들 수도 있다. enum을 사용하거나 Array를 사용할 수 있다. 이후 SwiftUI에서 제공하는 ForEach를 사용하여 Picker의 목록을 구성할 수 있다.

 

2-2-1. enum 사용

enum은 Identifiable 프로토콜을 준수해야 한다. 또한 .allCases 속성을 사용하려면 CaseIterable 프로토콜을 준수해야 한다.

import SwiftUI

enum MyColor: String, CaseIterable, Identifiable {
    case red, blue, green, yellow
    
    var id: Self { self }  // Identifiable 프로토콜 준수
}

struct ContentView: View {
    
    @State var selectedColor: MyColor = .red // ❗️String -> MyColor 타입 변경
    
    var body: some View {
        
        VStack {
            Picker("Color Picker", selection: $selectedColor) {
                ForEach(MyColor.allCases) { color in  // ❗️ForEach 사용
                    Text(color.rawValue).tag(color)
                }
            }
        }
        .padding()
        
    }
    
}

2-2-2. Array 사용

import SwiftUI
struct ContentView: View {
    
    let myColor: [Color] = [.red, .blue, .green, .yellow] // ❗️Color 타입 Array
    
    @State var selectedColor: Color = .red // ❗️tag와 동일한 Color 타입으로 변경
    
    var body: some View {
        
        VStack {
            Picker("Color Picker", selection: $selectedColor) {
                ForEach(0..<myColor.count) { index in
                    Text(myColor[index].description).tag(myColor[index])
                }
            }
        }
        .padding()
        
    }
    
}

결과는 위 사진과 동일하다.

 

2-3. pickerStyle 적용

pickerStyle(_ style:) 수정자를 사용하여 Picker의 스타일을 바꿀 수 있다. 위 코드는 이전 코드에서의 Picker를 List로 감싼 것이다.

 

• automatic(부모 뷰에 따라 자동으로 결정)

• inline

• menu

• palette, segmented

• wheel

 

---

그동안 아이폰을 사용하면서 한 번씩은 봤던 것들인데... 직접 만드니까 괜히 반갑고 그렇다🤣

 

끝!