Picker View를 사용해 원하는 항목 선택하기

피커 뷰(Picker View)란?

피커 뷰(Picker View)는 아이폰에서 원하는 항목을 선택할 수 있게 해주는 객체로, 피커(Picker)라고도 합니다.

데이트 피커가 날짜와 시간을 선택하기 위한 객체라면 피커 뷰는 문자열을 선택하기 위한 객체입니다.

여러 가지 선택지 가운데 하나를 선택해야 하는 경우 피커 뷰를 사용하여 사용자가 선택할 수 있게 할 수 있습니다.

---

피커 뷰 앱을 위한 기본 환경 구성

피커 뷰의 룰렛 중 하나를 선택하면 해당 이미지를 이미지 뷰에 나타내 주는 기능을 구현해 보려 합니다.

이미지를 보여주려면 이미지를 프로젝트에 추가를 해 주어야겠죠?

내비게이터 영역에서 [PickerView] 폴더를 선택한 후 마우스 오른쪽 버튼을 클릭하여 [New Group]을 선택한 후 그룹 이름은 'images'로 입력해 주세요.

저 같은 경우 10장의 사진을 [images] 그룹에 넣어주었습니다.

---

스토리보드로 피커 뷰 앱 화면 꾸미기

이미지 파일 목록을 보여 주고 선택하기 위한 피커 객체와 선택된 목록에 해당하는 이미지 파일명을 표시할 레이블 객체 그리고 선택된 이미지를 화면에 보여줄 이미지 뷰 객체를 배치해 보겠습니다.

 

저의 경우 아래와 같이 배치해 주었습니다.

📝 'Selected Item :' Lable과 'Item' Lable

📝imageView Content Mode는 [Aspect Fill]

---

Outlet 변수 추가 및 Delegate 설정하기

프로그램에 사용할 아웃렛 변수를 추가해 보겠습니다.

저의 경우 아래와 같이 아웃렛 변수를 추가해 주었습니다.

Delegate 설정

Picker View가 상호작용하려면 Picker View에 대한 Deleagate 메서드를 사용해야 합니다.

마우스 오른쪽 버튼으로 피커 뷰를 선택한 후 위쪽 뷰 컨트롤러 아이콘 위로 끌어다 놓습니다.

선택 화면이 나오면 [delegate]를 선택해 설정해 주세요.

📝 Delegate란? 

대리자라고도 하며 누군가 해야 할 일을 대신해주는 역할을 합니다.

예를 들어 특정 객체와 상호 작용할 때 메시지를 넘기면 그 메세지에 대한 책임은 Delegate로 위임됩니다.

그리고 Delegate 메서드는 해당 역할을 수행하며 처리 결과나 메세지 등을 받습니다.

즉, 사용자가 객체를 터치했을 때 해야 하는 일을 Delegate 메서드에 구현하고 해당 객체가 터치되었을 때 Delegate가 호출되어 위임받는 일을 하는 것입니다.

---

Picker View 동작 구현

피커 뷰를 동작시키기 위한 코드를 작성해 보겠습니다.

피커 뷰를 동작시키기 위해서는 피커 뷰 델리게이트 클래스를 상속받아야 하며 피커 뷰의 델리게이트 메서드를 추가해야 합니다.

 

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet var PickerImage: UIPickerView!
    @IBOutlet var ImageFileName: UILabel!
    @IBOutlet var ImageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

피커 뷰의 델리게이트 메서드를 사용하려면 UIPickerViewDelegate 클래스와 UIPickerViewDataSource 클래스를 위와 같이 상속받아야 합니다.

 

이제 피커 뷰가 동작하는 데 필요한 변수 및 상수를 추가해 보겠습니다.

아래 소스를 ViewController 클래스 선언부와 아웃렛 변수 사이에 추가해 주세요.

//
//  ViewController.swift
//  PickerView
//
//  Created by 양원식 on 2023/06/13.
//

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    // 이미지 파일명을 저장할 배열의 최대 크기
    let MaxArrayNumber = 10
    // 피커뷰의 열의 개수
    let PickerViewColumn = 1
    // 이미지 파일명을 저장할 배열
    var imageFileName = ["1.jpeg","2.jpeg","3.jpeg","4.jpeg","5.jpeg","6.jpeg","7.jpeg","8.jpeg","9.jpeg","10.jpeg",]
    @IBOutlet var PickerImage: UIPickerView!
    @IBOutlet var ImageFileName: UILabel!
    @IBOutlet var ImageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

 

이제 피커 뷰에게 무엇을 어떻게 보여주고 어떻게 동작할지를 설정해 보겠습니다.

우선 피커뷰의 동작에 필요한 델리게이트 메서드를 뷰 컨트롤러 클래스의 맨 아래에 추가해 주세요

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        // 피커 뷰에게 컴포넌트의 수를 정수 값으로 넘겨주는 델리게이트 메서드
        // 피커 뷰의 컴포넌트는 피커 뷰에 표시되는 열을 의미
        return PickerViewColumn
    }
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        // numberOfRowsInComponent 인수를 가지는 델리게이트 메서드
        // 피커 부에게 컴포넌트의 열개의 정수 값으로 넘겨준다.
        // 이 값은 피커 뷰의 해당 열에서 선택할 수 있는 행의 개수를 의미
        return imageFileName.count
    }
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        // titleForRow 인수를 가지는 델리게이트 메서드
        // 피커 뷰에게 컴포넌트의 각 열의 타이틀을 문자열(String) 값으로 넘겨준다
        return imageFileName[row]
    }

 

실행 버튼을 클릭하여 확인을 한 결과 피커 뷰의 열개의 개수와 행의 개수를 설정하고 각 행의 타이틀을 전달해 주면 피커뷰가 동작하는 것을 볼 수 있습니다

---

선택한 이미지 이름과 해당 이미지 출력하기

사용자가 피커 뷰의 룰렛을 돌려 원하는 열을 선택했을 때 할 일을 델리게이트에게 지시하는 매서드를 아래와 같이 추가해 주겠습니다. 피커 뷰의 델리게이트 메서드 중 didSelectRow 인수가 포함된 메서드는 사용자가 피커 뷰의 룰렛을 선택했을 때 호출됩니다.

사용자가 선택한 피커 뷰의 row를 사용하여 원하는 일을 코딩할 수 있습니다.

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        ImageFileName.text = imageFileName[row]
    }

 

피커 뷰의 룰렛을 선택할 경우 선택된 파일명에 해당하는 이미지를 이미지 뷰에 출력해 보겠습니다.

먼저 배열 imageArray를 선언해 주었습니다.

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    // 이미지 파일명을 저장할 배열의 최대 크기
    let MaxArrayNumber = 10
    // 피커뷰의 열의 개수
    let PickerViewColumn = 1
    // 이미지 파일명을 저장할 배열
    var imageArray = [UIImage?]()
    var imageFileName = ["1.jpeg","2.jpeg","3.jpeg","4.jpeg","5.jpeg","6.jpeg","7.jpeg","8.jpeg","9.jpeg","10.jpeg",]

 

뷰가 로드되었을 때 MaxArrayNumber의 개수만큼 imageFileName에 있는 이미지를 가져와 UIImage 타입의 상수 image에 할당하고, 할당된 image를 배열 imageArray에 추가합니다.. 또한 레이블과 이미지 뷰에 배열의 처음에 해당하는 imageFileName [0]과 imageAray [0]을 각각 출력하는 코드를 작성해 보겠습니다.

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // i라는 변수를 0부터 MaxArrayNumber보다 작을때까지 루프를 실행
        for i in 0 ..< MaxArrayNumber {
            
            // image 변수 선언, imageFileName[i]에 있는 파일명을 사용하여 UIImage 타입의 이미지를 생성, 생성한 이미지를 image라는 변수에 할당
            let image = UIImage(named: imageFileName[i])
            
            // imageArray 배열에 image 추가
            imageArray.append(image)
        }
        
        // ImageFileName 레이블에 imageFileName 배열의 첫 번째 파일명 출력
        ImageFileName.text = imageFileName[0]
        
        // 이미지 뷰에 첫 번째 이미지가 출력
        ImageView.image = imageArray[0]
    }

 

마지막으로 피커 뷰의 룰렛이 선택되었을 때 동작하는 didSelectRow 인수가 포함된 델리게이트 메서드의 맨 아랫부분에 선택한 이미지를 이미지 뷰에 나타내 주는 코드를 추가해 줍니다.

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        ImageFileName.text = imageFileName[row]
        
        // 사용자가 피커뷰의 룰렛에서 선택한 row 값을 사용하여 imageArray 배열에서 row 값에 해당하는 이미지를 가져옴, 그리고 가져온 이미지를 이미지 뷰의 아웃렛 변수은 imageView.image에 저장
        ImageView.image = imageArray[row]
    }

---

결과 확인 및 소스코드

 

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    // 이미지 파일명을 저장할 배열의 최대 크기
    let MaxArrayNumber = 10
    // 피커뷰의 열의 개수
    let PickerViewColumn = 1
    // 이미지 파일명을 저장할 배열
    var imageArray = [UIImage?]()
    var imageFileName = ["1.jpeg","2.jpeg","3.jpeg","4.jpeg","5.jpeg","6.jpeg","7.jpeg","8.jpeg","9.jpeg","10.jpeg",]
    @IBOutlet var PickerImage: UIPickerView!
    @IBOutlet var ImageFileName: UILabel!
    @IBOutlet var ImageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // i라는 변수를 0부터 MaxArrayNumber보다 작을때까지 루프를 실행
        for i in 0 ..< MaxArrayNumber {
            
            // image 변수 선언, imageFileName[i]에 있는 파일명을 사용하여 UIImage 타입의 이미지를 생성, 생성한 이미지를 image라는 변수에 할당
            let image = UIImage(named: imageFileName[i])
            
            // imageArray 배열에 image 추가
            imageArray.append(image)
        }
        
        // ImageFileName 레이블에 imageFileName 배열의 첫 번째 파일명 출력
        ImageFileName.text = imageFileName[0]
        
        // 이미지 뷰에 첫 번째 이미지가 출력
        ImageView.image = imageArray[0]
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        // 피커 뷰에게 컴포넌트의 수를 정수 값으로 넘겨주는 델리게이트 메서드
        // 피커 뷰의 컴포넌트는 피커 뷰에 표시되는 열을 의미
        return PickerViewColumn
    }
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        // numberOfRowsInComponent 인수를 가지는 델리게이트 메서드
        // 피커 부에게 컴포넌트의 열개의 정수 값으로 넘겨준다.
        // 이 값은 피커 뷰의 해당 열에서 선택할 수 있는 행의 개수를 의미
        return imageFileName.count
    }
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        // titleForRow 인수를 가지는 델리게이트 메서드
        // 피커 뷰에게 컴포넌트의 각 열의 타이틀을 문자열(String) 값으로 넘겨준다
        return imageFileName[row]
    }
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        ImageFileName.text = imageFileName[row]
        
        // 사용자가 피커뷰의 룰렛에서 선택한 row 값을 사용하여 imageArray 배열에서 row 값에 해당하는 이미지를 가져옴, 그리고 가져온 이미지를 이미지 뷰의 아웃렛 변수은 imageView.image에 저장
        ImageView.image = imageArray[row]
    }

}