[iOS] 피커 뷰 만들기

기능

1. 피커 뷰에 title 대신 이미지를 넣어 멀티 컴포넌트를 구성한다.
2. 왼쪽 피커뷰 경우, 피커 뷰에 이미지를 바꿀때마다 selected item 레이블에 파일명이 바뀐다.
3. 오른쪽 피커뷰 경우, 피커 뷰애 이미지를 바꿀떄마다 아래 이미지뷰에 해당하는 사진이 크게 나온다.

코드

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let MAX_ROW_NUMBER = 6
    let CUR_NUMBER = 1
    var uiImageList :[UIImage?] = []
    var imageList = ["1.png", "2.png", "3.png" , "4.png", "5.png", "6.png"]
    
    @IBOutlet var selectedItemLabel: UILabel!
    @IBOutlet var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        for i in 0..<MAX_ROW_NUMBER
        {
            let tempImage = UIImage(named: imageList[i])
            uiImageList.append(tempImage)
        }
        imageView.image = uiImageList[0]
        selectedItemLabel.text = imageList[0]
        
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int{
        return CUR_NUMBER + 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{
        return MAX_ROW_NUMBER
    }
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView{
        let imageView = UIImageView(image: uiImageList[row])
        imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 150)
        return imageView
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){
        if(component == 0){
            selectedItemLabel.text = imageList[row]
        }else{
            imageView.image = uiImageList[row]
        }
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat{
        return CGFloat(80)
    }
}

• 피커 뷰를 뷰 컨트롤러에 연동한다. (드래그)
• 뷰 컨트롤러가 UIPickerViewDelegate, UIPickerViewDataSource 를 상속받도록 한다
• UIPickerViewDelegate 에 정의되어 있는 메소드로 기능을 구현하였다.
• 어플 화면이 로드 될 때, 미리 설정한 최대 이미지의 개수를 이용해 반복문을 돌아 UIImage 배열에 저장한다.
• 뷰 피커의 컴포넌트는 왼쪽부터 0, 오른쪽부터 1로 접근이 가능하다.
• UIimageView(image:) 를 통해 인스턴스를 생성하고, 해당 이미지 뷰의 frame 프로퍼티에 접근한다.
• 해당 프로퍼티를 CGRect() 메소드로 크기를 조절해 컴포넌트에서 현재 row의 크기를 변경한다.