iOS에서 배열 데이터로 UIPickerView를 코드로 만드는 방법

피커 뷰(Picker View)는 사용자가 휠을 돌려 항목을 선택할 수 있도록 하나 이상의 회전판을 화면에 표시하는 UI 컴포넌트입니다. 각 휠은 '컴포넌트(component)'라고 부르며, 선택 가능한 항목들이 인덱스가 붙은 행(row) 형태로 나열되어 있습니다.

UIPickerView는 iOS 개발에서 가장 많이 사용되는 핵심 컴포넌트 중 하나입니다. 특히 사용자에게 과목, 지역, 옵션 등을 고르게 하는 폼 기반 애플리케이션에서 자주 활용됩니다.

공식 문서는 Apple 개발자 사이트에서 확인할 수 있습니다: https://developer.apple.com/documentation/uikit/uipickerview

이번 글에서는 스토리보드 없이 배열 데이터를 기반으로 UIPickerView를 프로그래밍 방식(코드)으로 생성하고, 배열의 값을 피커에 로드하는 방법을 단계별로 알아보겠습니다.

구현 순서

1단계 – 프로젝트 생성

Xcode를 열고 Single View Application 템플릿으로 새 프로젝트를 만든 뒤, 프로젝트 이름을 PickerSample로 지정합니다.

2단계 – ViewController.swift 열기

이번 예제는 모두 코드로 작성하므로 스토리보드는 전혀 건드리지 않습니다. ViewController.swift 파일만 열어 작업하면 됩니다.

3단계 – UIPickerView 객체 생성

viewDidLoad 메서드 안에서 UIPickerView 객체를 먼저 생성합니다.

let UIPicker: UIPickerView = UIPickerView()

4단계 – 델리게이트 설정 및 화면 중앙 배치

델리게이트와 데이터소스를 설정한 후, 피커 뷰를 화면 정중앙에 배치합니다.

UIPicker.delegate = self as UIPickerViewDelegate
UIPicker.dataSource = self as UIPickerViewDataSource
self.view.addSubview(UIPicker)
UIPicker.center = self.view.center

5단계 – 델리게이트·데이터소스 채택

ViewController 클래스가 UIPickerViewDelegate와 UIPickerViewDataSource 프로토콜을 채택하도록 선언합니다.

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource

6단계 – 표시할 데이터 배열 만들기

피커에 보여줄 과목 목록을 문자열 배열로 준비합니다.

let dataArray = ["English", "Maths", "History", "German", "Science"]

7단계 – 필수 delegate 메서드 구현

컴포넌트 수, 행 수, 각 행의 제목을 반환하는 세 가지 필수 메서드를 구현합니다.

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return dataArray.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    let row = dataArray[row]
    return row
}

numberOfComponents(in:) – 피커에 표시할 휠(컴포넌트)의 개수를 반환합니다. 여기서는 1개입니다.
numberOfRowsInComponent – 각 컴포넌트에 들어갈 행의 개수를 반환합니다. 배열의 원소 개수를 그대로 사용합니다.
titleForRow – 해당 행에 표시될 문자열을 반환합니다.

8단계 – 실행

앱을 빌드하고 실행하면 화면 중앙에 과목 목록이 담긴 피커 뷰가 나타나고, 휠을 돌려 항목을 선택할 수 있습니다.

전체 소스 코드

import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    let dataArray = ["English", "Maths", "History", "German", "Science"]
    override func viewDidLoad() {
        super.viewDidLoad()
        let UIPicker: UIPickerView = UIPickerView()
        UIPicker.delegate = self as UIPickerViewDelegate
        UIPicker.dataSource = self as UIPickerViewDataSource
        self.view.addSubview(UIPicker)
        UIPicker.center = self.view.center
    }
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataArray.count
    }
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        let row = dataArray[row]
        return row
    }
}

이처럼 UIPickerView는 델리게이트 패턴만 이해하면 스토리보드 없이도 몇 줄의 코드로 손쉽게 구현할 수 있습니다. 여러 개의 컴포넌트를 추가하거나 didSelectRow 메서드를 활용해 선택된 값을 처리하는 기능으로 확장해 보세요.