Vertical Custom Picker 구현방식

[Dorii0513]

1. Picker란?

@MainActor @preconcurrency
struct Picker<Label, SelectionValue, Content> where Label : View, SelectionValue : Hashable, Content : View

• 위의 코드에서 알 수 있듯이 Picker는 label , selectionValue , content 를 필요로 한다.
  • label : 어떤 역할의 Picker인지 제목 설정
  • selectionValue : picker에서 사용자가 선택한 값 → binding하여 제공하기
  • content : picker에서 보여줄 콘텐츠

• Hashable이란?

  우리가 아는 dictionary 는 key-value로 값을 저장하는데, 이러한 딕셔너리가 hash table 이라는 것으로 구현되어 있다고 함

  해시 테이블은 배열로 구현이 되어 있는데,

이런 식으로 key 값을 해싱 함수에 넣어 해시하여 → 배열의 주소 값을 얻고, 그 주소값에 맞는 index에 value 값을 저장한다고 함. 이때, 해시테이블은 순서를 지키지 않고 저장 됨!!

따라서 배열에 저장된 값을 알고 싶다면, index 값을 알아야 하는데 이 index 값이 순서대로 되어 있지 않기 때문에 key 값을 알아야 하는 것임 (우린 value가 저장된 해시테이블의 index를 모름

→ 즉 Key를 통해 해시테이블의 index를 알아야 해당 value에 접근할 수 있게 됨

따라서 해시테이블이란 key 라는 것을 해시 함수를 이용해 주소값(index)로 바꾸고 이를 활용하여 해시테이블에 접근해 value를 가져오거나, 저장하는 형태를 말함

• 예제 코드

    enum Flavor: String, CaseIterable, Identifiable {
        case chocolate, vanilla, strawberry
        var id: Self { self }
    }

    @State private var selectedFlavor: Flavor = .chocolate
    //Pikcer의 기본 세팅 값을 @State로 설정한다

    //위의 열거형 값 중에서 선택할 수 있는 Picker 만들기
    //selection은 위에 State변수로 선언한 값을 바인딩하여 넣는다
    List {
        Picker("Flavor", selection: $selectedFlavor) {
            Text("Chocolate").tag(Flavor.chocolate)
            Text("Vanilla").tag(Flavor.vanilla)
            Text("Strawberry").tag(Flavor.strawberry)
        }
    }

• Picker의 기본 세팅 값을 selectedFlavor라는 State변수로 선언한다
• 위의 열거형 값 중에서 선택할 수 있는 Picker 만들기
• selection은 위에 State변수로 선언한 값을 바인딩하여 넣는다
• 각 선택항목의 유형이 바인딩된 selection과 일치하도록 tag 를 추가

⁉️근데 이 태그가 머하는 앤지 모르겠음 ㅠㅠ → 네비게이션할 때 쓰는 거 같음

• 위의 코드를 For each 사용해서 더 간단하게 만들기!

    Picker("Flavor", selection: $selectedFlavor) {
        ForEach(Flavor.allCases) { flavor in
            Text(flavor.rawValue.capitalized)
        }
    }

• capitalized란?

  문자열을 대문자 값으로 표현한 것이라고 함

⁉️Foreach가 자동으로 ID 값을 활용해 tag를 할당한다는데 → Flavor가 식별 가능한 프로토콜을 준수하기 때문이라고함…이게 무슨 말..??

*위의 예는 Flavor가 선택 유형과 정확히 일치하도록 id 매개변수의 유형을 정의한다는 사실에 의존한다고 함. 그렇지 않은 경우에는 태그를 재정의해야 함!*

⇒ **Foreach**

    struct ForEach<Data, ID, Content> where Data : RandomAccessCollection, ID : Hashable

모르겠는 부분

• Picker를 활용하기 위해서는 → Tag를 추가해야하는데,
• Foreach는 각 항목 별 ID를 활용하여 Tag를 할당하기 때문에 따로 써줄 필요 없음
• Foreach의 ID와 Picker의 SelectionValue의 타입이 Hashable로 같은데

---

2. StylingPickers

[PickerStyle | Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/pickerstyle)

애플에서는 Picker의 스타일을 커스텀할 수 있도록 PickerStyle 이라는 프로토콜을 사용하고 있음!!

VStack {
    Picker("Flavor", selection: $selectedFlavor) {
        ForEach(Flavor.allCases) { flavor in
            Text(flavor.rawValue.capitalized)
        }
    }
    Picker("Topping", selection: $selectedTopping) {
        ForEach(Topping.allCases) { topping in
            Text(topping.rawValue.capitalized)
        }
    }
}
.pickerStyle(.segmented)

만약 pickerStyle 을 .wheel 로 하면 vertical scroll하는 picker가 생성!

---

3. Timer에 있는 Picker는 어떻게 만들까?

일단 Picker를 어떻게 만드는 지는 위에서 배웠는데, 얘는 어떻게 해야하지??

고민해 봤을 때!

이렇게 섹션을 나누어서 Picker 3개를 만들어야할까?

import SwiftUI

struct ContentView: View {
    var body: some View {
        @State var hour = 0
        @State var minute = 0
        @State var second = 0

        var hours = [Int](0..<24)
        var minutes = [Int](0..<60)
        var seconds = [Int](0..<60)

        HStack {
            Picker(selection: $hour, label: Text("")){
                ForEach(0..<24){ hour in
                    Text("\(hours[hour]) 시간").tag(hour)
                }
            }
            Picker(selection: $minute, label: Text("")){
                ForEach(0..<60){ minute in
                    Text("\(minutes[minute]) 분").tag(hour)
                }
            }
            Picker(selection: $second, label: Text("")){
                ForEach(0..<60){ second in
                    Text("\(seconds[second]) 초").tag(hour)
                }
            }
        }.pickerStyle(.wheel)
            .padding()
    }
}

이렇게 나옴;;ㅜㅜ

구글링 해보니까

[Multi-Component Picker (UIPickerView) in SwiftUI](https://stackoverflow.com/questions/56567539/multi-component-picker-uipickerview-in-swiftui)

Multi Component Picker 구현하기

//
//  ContentView.swift
//  customPicker
//
//  Created by 김예림 on 7/28/24.
//

import SwiftUI

struct PickerView: UIViewRepresentable {
    var data: [[String]]
    @Binding var selections: [Int]

    //makeCoordinator()
    func makeCoordinator() -> PickerView.Coordinator {
        Coordinator(self)
    }

    //makeUIView(context:)
    func makeUIView(context: UIViewRepresentableContext<PickerView>) -> UIPickerView {
        let picker = UIPickerView(frame: .zero)

        picker.dataSource = context.coordinator
        picker.delegate = context.coordinator

        return picker
    }

    //updateUIView(_:context:)
    func updateUIView(_ view: UIPickerView, context: UIViewRepresentableContext<PickerView>) {
        for i in 0...(self.selections.count - 1) {
            view.selectRow(self.selections[i], inComponent: i, animated: false)
        }
        context.coordinator.parent = self // fix
    }

    class Coordinator: NSObject, UIPickerViewDataSource, UIPickerViewDelegate {
        var parent: PickerView

        //init(_:)
        init(_ pickerView: PickerView) {
            self.parent = pickerView
        }

        //numberOfComponents(in:)
        func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return self.parent.data.count
        }

        //pickerView(_:numberOfRowsInComponent:)
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            return self.parent.data[component].count
        }

        //pickerView(_:titleForRow:forComponent:)
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            return self.parent.data[component][row]
        }

        //pickerView(_:didSelectRow:inComponent:)
        func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
            self.parent.selections[component] = row
        }
    }
}

import SwiftUI

struct ContentView: View {
    private let data: [[String]] = [
        Array(0...10).map { "\($0)" },
        Array(20...40).map { "\($0)" },
        Array(100...200).map { "\($0)" }
    ]

    @State private var selections: [Int] = [5, 10, 50]

    var body: some View {
        VStack {
            PickerView(data: self.data, selections: self.$selections)

            Text("\(self.data[0][self.selections[0]]) \(self.data[1][self.selections[1]]) \(self.data[2][self.selections[2]])")
        } //VStack
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

#Preview {
    ContentView()
}

• 아직 UIkit 에서만 되고 SwiftUI에서는 잘 안되는 기능
• 아예 Picker를 그리는 뷰를 따로 만들어서 적용함

[[SwiftUI] Picker 맛보기](https://sujinnaljin.medium.com/swiftui-picker-%EB%A7%9B%EB%B3%B4%EA%B8%B0-d745494f9a1c)

• displayedComponents 를 활용할 수도 있어 보임

Picker의 영역을 조절하는 방법

//
//  ContentView.swift
//  customPicker
//
//  Created by 김예림 on 7/28/24.
//

import SwiftUI

struct ContentView: View {

    @State var hour: Int
    @State var minute: Int

    var hours = [Int](0..<24)
    var minutes = [Int](0..<60)

    var body: some View {

        HStack(spacing: 0) {
            Picker("hours", selection: $hour) {
                ForEach (0..<24) { hour in
                    Text("\(hours[hour])")
                }
            }
            .pickerStyle(.wheel)
            Text(":")
                .font(.title)
                .fontWeight(.heavy)
            Picker("hours", selection: $minute) {
                ForEach (0..<60) { minute in
                    Text("\(minutes[minute])")
                }
            }
            .pickerStyle(.wheel)
        }
        .frame(width: 100, height: 100)
    }
}

#Preview {
    ContentView(hour: 0, minute: 0)
}

Picker의 영역은 .frame 을 활용하여 조절할 수 있음

HStack에 .frame(width: 100, height: 100) 을 걸어서 조절 가능

여기서 높이를 .frame(width: 100, height: 50)로 더 줄이면

다음과 같이 영역이 더 줄어들게 됨!