[iOS] UIPickerView 를 사용해보자

https://developer.apple.com/documentation/uikit/uipickerview

Apple Developer Documentation

---

UIPickerView 는 UITableView와 비슷하게도

UIPickerViewDataSource 와 UIPickerviewDelegate 를 구현해주면 된다.

완전 같진 않지만, UITableView 도 UITableViewDataSource 와 UITableViewDelegate 를 구현하면 보여지는 것과는 같다.

아무튼 글을 쓰기 전에 공식문서는 꼭 확인하고 가자!

 

UIPickerView

먼저 스토리보드에 Picker View 를 추가해주자

그리고 아래의 그림과 같이 PickerView 를 고르면 해당하는 숫자가 나오게끔 라벨을 밑에 만들어두자.

스토리보드 설정은 끝났다.

오토레이아웃은 위와 같이 만들어도 되고, 각자가 편한대로 하면 된다.

이제 ViewController 에서 아래와 같이 코드를 적어주자.

코드에 대한 설명은 주석으로 대신한다.

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    // pickerView 에 담고 싶은 정보를 배열로 표현했다.
    let numbersString: [String] = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
    let numbers: [String] = ["1", "2", "3", "4", "5", "6", "7", "8"]
    
    // UIPickerViewDelegate, UIPickerViewDatsSource 프로토콜을 구현해줘야 한다.
    
    // pickerView에 표현하고 싶은 아이템의 갯수
    // 각각의 component 마다 다른 값을 갖게 한다.
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        if component == 0 {
            return numbersString.count
        } else {
            return numbers.count
        }
        
    }
    
    // pickerView에서 특정 아이템을 선택했을 때의 행위
    // 각각의 component 마다 다른 값을 갖게 한다.
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        if component == 0 {
            label.text = numbersString[row]
        } else {
            numberLabel.text = numbers[row]
        }
    }
    
    // pickerView에서 보여주고 싶은 아이템의 제목
    // 각각의 component 마다 다른 값을 갖게 한다.
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        if component == 0 {
            return numbersString[row]
        } else {
            return numbers[row]
        }
    }
    
    // pickerView에 담긴 아이템의 컴포넌트 갯수
    // pickerView는 여러 개의 wheel이 있을 수 있다.
    // 여기서는 2개의 wheel을 가진 pickerView를 표현했다.
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2
    }
    
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var numberLabel: UILabel!
    @IBOutlet weak var pickerView: UIPickerView! {
        didSet {
            // pickerView 의 delegate, dataSource 를 반영하는 코드
            pickerView.delegate = self
            pickerView.dataSource = self
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

위와 같이 설정해두면

아래와 같은 결과를 얻을 수 있다.