swift 피커 뷰 앱 만들기

피커 뷰(Picker View)

피커 뷰(Picker View)는 아이폰에서 원하는 항목을 선택할 수 있게 해주는 객체 입니다. 피커 뷰는 문자열을 선택하기 위한 객체 입니다. 여러가지 선택지 가운데 하나를 선택해야 하는 경우 피커 뷰를 사용하여 사용자가 선택할 수 있게 할 수 있습니다.

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    //이미지 파일명을 저장할 배열의 최대 크기를 지정합니다.
    let MAX_ARRAY_NUM = 10
    //피커뷰의 열의 개수를 지정 합니다.
    let PICKER_VIEW_COLUMN = 1
    //피커 뷰의 높이를 지정핳 상수를 선언
    let PICKER_VIEW_HEIGHT:CGFloat = 80
    //UIImage 타입의 배열 imageArray를 선언랍니다.
    var imageArray = [UIImage?]()
    //이미지 파일명을 저장할 배열 입니다.
    var imageFileName = [ "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",
                          "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg" ]
    
    @IBOutlet weak var pickerImage: UIPickerView!
    @IBOutlet weak var lblImageFileName: UILabel!
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        //i라는 변수를 0부터 MAX_ARRAY_NUM보다 작을 때까지 루프를 실행합니다.
        for i in 0 ..< MAX_ARRAY_NUM {
            //image라는 변수를 선언합니다.
            //imageFileName[i]에 있는 파일명을 사용하여 UIImage 타입의 이미지를 생성합니다.
            //생성한 이미지를 image라는 변수에 할당합니다.
            let image = UIImage(named: imageFileName[i])
            //이미지 뷰에 첫 번째 이미지가 나타납니다.
            imageArray.append(image)
        }
        lblImageFileName.text = imageFileName[0]
        imageView.image = imageArray[0]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //피커뷰에 표시되는 열의 개수
    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, rowHeightForComponent component: Int) -> CGFloat {
        //PICKER_VIEW_HEIGHT 값인 80을 넘겨 줍니다.
        return PICKER_VIEW_HEIGHT
    }
    
    //imageFileName에 저장되어 있는 파일명을 넘겨줍니다.
//    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String?{
//        return imageFileName[row]
//    }
    //피커 뷰에게 컴포넌트의 각 열의 뷰를 UIView 타입의 값을 넘겨줍니다.여기서는 이미지 뷰에 저장되어있는 이미지를 넘겨줍니다.
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView{
        //선택된 row에 해당하는 이미지를 imageArray에서 가져옵니다.
        let imageView = UIImageView(image: imageArray[row])
        //이미지 뷰의 프레임 크기를 설정합니다.
        imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 150)
        //이미지 뷰를 리턴합니다
        return imageView
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){
        lblImageFileName.text = imageFileName[row]
        //사용자가 피커 뷰의 룰렛에서 선택한 row 값을 사용하여 imageArray 배열에서 row 값에 해당하는 이미지를
        //가지고 옵니다.그리고 가져온 이미지를 이미지 뷰의 아웃렛 변수인 imageView.image에 저장합니다.
        imageView.image = imageArray[row]
    }

}

[결과화면]

앱이 실행되면 피커 뷰의 룰렛에 이미지가 나타납니다.룰렛을 선택하면 레이블에는 선택된 파일명이,이미지 뷰에는 선택된 이미지가 나타나는 것을 확인할 수 있습니다.