Swift - PickerView

PickerView

- 사용자에게 선택할 수 있는 여러 옵션을 제공하는 위젯

- 주로 선택 목록, 날짜, 시간 등과 같은 데이터를 표시하고 사용자가 원하는 값을 선택할 수 있도록 함

 

 

 

 

 

 

---

사용해보기

 

 

1. PickerView 추가 

 

 

 

 

2. PickerView, outlet 변수 추가 

 

 

 

 

3. UIPickerViewDelegate, UIPickerViewDataSource 프로토콜 구현

- pickerView를 사용하려면 먼저 UIPickerViewDelegate와 UIPickerViewDataSource 프로토콜을 구현해야 함

- UIPickerViewDelegate : pickerView의 동작 커스터마이즈하는 데 사용 

- UIPickerViewDataSource : pickerView에 데이터를 제공 

- 위의 오류는 UIPickerViewDataSource의 필수 메서드를 구현하지 않아서 생긴 오류로 이후 추가함

 

 

 

 

 

4. 필요한 변수 추가

    let pickerViewCount = 5     // pickerView의 Lable 개수
    let pickerViewColumn = 1    // pickerView의 열 개수
    
    // pickerView에 띄울 내용
    var pickerViewList = ["홍길동", "이길동", "김길동", "최길동", "박길동"]

 

 

 

 

 

5. UIPickerViewDataSource 필수 메서드 구현

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        // return 1    // 하나의 컴포넌트(열) 사용
        return pickerViewColumn
    }

- pickerView의 컴포넌트 수를 반환 

- 컴포넌트는 pickerView의 섹션 또는 구분선 (열)을 의미 

 

 

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        // return pickerViewList.count
        return pickerViewCount

    }

- 각 컴포넌트에 표시될 행(row)의 개수 반환 

- 컴포넌트마다 다른 행의 수를 반환 가능 

 

 

 

6. UIPickerViewDelegate 필수 메서드 구현

  func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return pickerViewList[row] // pickerViewList 배열의 요소를 각 행에 표시
    }

 

- 사용자가 pickerView에서 선택할 수 있는 각 행(row)의 타이틀을 반환하여 제공

- 반환된 문자열은 각 행의 레이블로 표시 

 

 

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        let selectedOption = pickerViewList[row]
        
        self.selectedList.text = selectedOption
        print("Selected option: \(selectedOption)")
    }

- 사용자가 pickerView에서 특정한 행을 선택했을 때 호출 

- 선택된 행과 컴포넌트의 인덱스를 인수로 받음 

- 사용자의 선택에 따라 적절한 동작을 수행 

- 'selectedList' 라벨을 추가하여 리스트에서 선택한 열의 문자열을 'selectedList' 라벨에 띄움

 

 

 

 

7. Delegate, DataSource 설정

    override func viewDidLoad() {
        super.viewDidLoad()
        
        selectedList.text = "선택된 리스트"
        
        pickerView.dataSource = self
        pickerView.delegate = self

    }

- pickerView와 관련된 데이터 동작을 컨트롤 하려면 'pickerView.dataSource = self', 'pickerView.deleate = self' 설정해야 함

 

 

 

 

 

 

8. 실행 화면

 

 

 

 

+) PickerView Row 높이 설정 

 

'  func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat { ... }' 

- 이용하여 row의 높이 설정 가능 

 

 

 

참고) 

https://envia.tistory.com/170

스위프트 피커 뷰(Picker View) 사용하기 | 델리게이트 설정 방법