[iOS] PickerView

지난 TextField 이후로 iOS 14버전 이전에서 알람 맞추거나 정보를 입력할 때 UIPickerView를 많이 볼 수 있다. 그래서 UIPickerView를 적용하면서 공부했던 내용을 정리해보려고 한다.

UIPickerView

이미지처럼 이러한 형태를 iOS 사용자들은 많이 봤을 것 이다. 이것이 UIPickerView다. 애플 개발자 문서에서는 UIPickerView를 회전하는 바퀴나 슬롯머신을 비유해서 하나이상의 값을 표현하는 뷰라고 소개하고 있다.

UIPickerView를 사용하려면 UIPickerViewDataSource와 UIPickerViewDelegate 프로토콜을 채택해서 함수를 구현해주어야한다. 간단하게 두 프로토콜은 다음과 같은 역할을 한다.

• UIPickerViewDataSource : PickerView에서 보여줄 데이터를 세팅하는 프로토콜
• UIPickerViewDelegate : PickerView에서 발생하는 이벤트를 처리하는 프로토콜

이 프로토콜을 채택하고 구현하기 앞서서 PickerView에 들어갈 데이터를 다음과 같이 배열을 이용해서 선언해주었다.

보면 연, 월, 일을 나타낸 2차원 배열임을 알 수 있다.

이렇게 데이터를 먼저 선언한 다음
extension을 사용해서 두 프로토콜을 채택해주었다.

extension AddItemView: UIPickerViewDataSource, UIPickerViewDelegate {
    
    // days 배열의 구성요소의 수를 반환하는 메서드 -> picker뷰의 행의 수를 결정
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return days.count
    }
    
    // days 배열의 구성요소의 열의 수를 반환하는 메서드 -> 각 행의 열의 수를 결정
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return days[component].count
    }
    
    // days 배열의 값들을 반환하는 메서드 -> 각각의 값을 결정
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    
        return days[component][row]
        
    }
    
    // 주어진 component에서 선택된 열을 매개변수로 갖음
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    
    // component에 따라 연, 월, 일의 값을 변경
        switch component {
        case 0:
            year = days[0][row]
        case 1:
            month = days[1][row]
        case 2:
            day = days[2][row]
        default:
            print("Error!!")
        }
        
        // 바뀐 값을 텍스트필드의 값으로 할당
        dateTextField.text = year+"년 "+month+"월 "+day+"일"
    }
}

Componenet와 row라는 매개변수가 많이 사용되는데 Componenet는 뜻 그대로 구성요소이고 row는 각 구성요소에서의 열 인덱스 값이다. 각 메서드들의 역할은 간단하게 주석으로 나타냈다. 각 메서드들의 이름은 같지만 인덱스에 따라 호출되는 메서드가 다른 중복 메서드로 구현되어 있다. 위에 3개의 메서드는 PickerView의 생성에 필요한 메서드들이고 마지막 1개의 메서드는 PickerView에서 발생하는 이벤트에 대한 처리가 구현되어 있다.

여기까지 진행을 하게 되면 UIPickerView의 생성은 다 마쳤다. 하지만 PickerView를 TextField가 선택되어지면 나타나도록 하려면 한 줄의 코드가 남아있다.

// 텍스트필드에 피커뷰를 할당하는 부분
 dateTextField.inputView = datePickerView

pickerView를 TextField에 할당해주면 텍스트 필드를 클릭하면 아래에 피커뷰가 나타나게 된다.

아래는 결과물입니다!! (처음 일이 10일로 나오는건 제가 일의 초기값을 10으로 주어서 그렇습니다! 이 부분은 현재 일자자 수정했습니다!)