Picker View 동작 코드 작성하기

Posted on 2021-09-02 by GKSRUDTN99
Swift&Xcode Xcode Swift PickerView Delegate

피커 뷰를 동작시키기 위해서는 Picker View Delegate 클래스를 상속받아야 하며, Picker View의 Delegate 메서드를 추가해야 한다.

피커 뷰에 선택 목록 표시하기

1. ViewController.swift를 열고 View Controller가 UIPickerViewDelegate 클래스를 상속받도록 다음과 같이 작성한다.
//
//  ViewController.swift
//  PickerView
//
//  Created by 한경수 on 2021/09/03.
//

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    @IBOutlet var pickerImage: UIPickerView!

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


}
2. 변수 및 상수 추가하기
  • 클래스 정의 부 바로 아래에 다음 코드를 작성한다.
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    let MAX_ARRAY_NUM = 10
    let PICKER_VIEW_COLUMN = 1
    var imageFileName = [ "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg" ]

//  (...생략...)
  • MAX_ARRAY_NUM : 사용할 이미지의 개수
  • PICKER_VIEW_COLUMN = Picker View의 열의 개수
  • imageFileName : 사용할 이미지들의 파일명
Picker View의 동작에 필요한 Delegate 메서드를 View Controller 클래스 내에 다음과 같이 작성한다.
func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return PICKER_VIEW_COLUMN
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return imageFileName.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return imageFileName[row]
    }
  • numberOfComponents
    • Picker View에게 컴포넌트의 수를 정수 값으로 넘겨주는 Delegate 메서드
  • pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int
    • numberOfRowsInComponent 인수를 가지는 Delegate 메서드이다.
    • Picker View에게 특정 컴포넌트(component parameter)의 행의 개수를 정수 값으로 넘겨준다.
  • pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String?
    • titleForRow 인수를 가지는 Delegate 메서드
    • Picker View에게 컴포넌트의 각 열의 타이틀을 문자열 값을 넘겨준다.

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

1. 사용자가 Picker View의 룰렛을 돌려 원하는 열을 선택했을 때 할 일을 Delegate에게 지시하는 메서드를 맨 아래에 추가한다.
  • didSelecteRow 인수가 포함된 메서드는 사용자가 피커 뷰의 룰렛을 선택했을 때 호출된다.
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row]
    }
2. ViewController 클래스 안에 UIImage 타입의 배열 imageArray를 선언한다.
var imageArray = [UIImage?]()
3. View가 로드되었을 때 MAX_ARRAY_NUM의 개수만큼 imageFileName에 있는 이미지를 가져와 UIImage 타입의 상수 image에 할당하고, 할당된 image를 배열 imageArray에 추가한다. 또한 image View에 뷰의 배열의 처음에 해당하는 이미지를 표시하도록 viewDidLoad 함수 내에 다음과 같이 작성한다.
override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        for i in 0 ..< MAX_ARRAY_NUM {
            let image = UIImage(named: imageFileName[i])
            imageArray.append(image)
        }

        lblImageFileName.text = imageFileName[0]
        imageView.image = imageArray[0]
    }
4. 마지막으로 pickerView의 룰렛이 선택되었을 때 동작하는 Delegate메서드에 선택한 이미지를 image View에 나타내주는 코드를 추가한다.
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row]
        imageView.image = imageArray[row]
    }

Picker View의 룰렛에 파일명 대신 이미지 출력하기

1. 앞에서 작성한 titleForRow 인수를 가지는 Delegate 메서드를 주석처리한다.
2. viewForRow 인수를 가지는 Delegate 메서드를 새롭게 정의한다.
  • 이 메서드는 각 row의 view를 설정하고 UIView 타입을 리턴한다. Image View 객체를 리턴하도록 작성한다.
//    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
//        return imageFileName[row]
//    }
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let imageView = UIImageView(image: imageArray[row])
        imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 150)

        return imageView
    }

룰렛의 높이 변경하기

1. Picker View의 높이를 지정할 상수를 ViewController 클래스 내에 선언한다.
let PICKER_VIEW_HEIGHT:CGFloat = 80
2. rowHeightForComponent를 인수로 가지는 Delegate 메서드를 새롭게 추가하고 다음과 같이 작성한다.

Search