[iOS/swift] 이미지 피커 뷰(Picker View) 앱 컴포넌트 추가하기

Xcode(버전11.2.1)를 이용하여 이미지 피커뷰 (Picker View) 앱을 만들었는데,

피커뷰의 컴포넌트를 2개로 바꾸고

왼쪽 컴포넌트 또는 오른쪽 컴포넌트를 선택하면,

label과 imageview에 선택된 파일명과 이미지가 출력되도록 한다.

(자세한 내용은 아래 포스팅 참고)

swift 로 이미지 피커 뷰(Picker View) 앱 만들기

 

 

 

전체 소스 보기

//
//  ViewController.swift
//  day191127_PickerView
//
//  Created by 무니 on 27/11/2019.
//  Copyright © 2019 com.mooni. All rights reserved.
//
 
import UIKit
 
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    let MAX_ARRAY_NUM = 7 // 이미지의 파일명을 저장할 배열의 최대 크기를 지정
    let PICKER_VIEW_COLUMN = 2 // 피커 뷰의 열의 갯수 지정
    let PICKER_VIEW_HEIGHT:CGFloat = 80 // 피커 뷰의 높이를 지정할 상수
    var imageArray = [UIImage?]()
    var imageFileName = ["구운새송이버섯.jpeg", "대만도시락.jpeg", "새우볶음밥.jpeg", "새우샤오마이.jpeg", "샤오롱바오.jpeg", "우육면.jpg", "치즈스테이크.jpg"] // 이미지의 파일명을 저장할 배열
    
    @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.
        // i 값을 0에서 MAX_ARRAY_NUM보다 작을 때까지 반복
        for i in 0 ..< MAX_ARRAY_NUM {
            // 각 파일 명에 해당하는 이미지를 생성
            let image = UIImage(named: imageFileName[i])
            // 생성된 이미지를 imageArray에 추가
            imageArray.append(image)
        }
        // 뷰가 로드되었을 때 첫번째 파일명 출력
        lblImageFileName.text = imageFileName[0]
        // 뷰가 로드되었을 때 첫번째 이미지 출력
        imageView.image = imageArray[0]
    }
    // 피커 뷰의 컴포넌트 수 설정
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return PICKER_VIEW_COLUMN
    }
    
    // 피커 뷰의 높이 설정
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return PICKER_VIEW_HEIGHT
    }
    
    // 피커 뷰의 개수 설정
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return imageFileName.count
    }
    // 피커 뷰의 각 Row의 타이틀 설정
//    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
//        return imageFileName[row]
//    }
    
    // 피커 뷰의 각 Row의 view 설정
    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: 80) // 이미지 뷰의 프레임 크기 설정
        
        return imageView
    }
    
    // 피커 뷰가 선택되었을 때 실행
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row]
        imageView.image = imageArray[row]
    }
 
}
 
 

let PICKER_VIEW_COLUMN = 2 // 피커 뷰의 열의 갯수 지정

피커 뷰의 열의 갯수를 지정해준 소스를 2로 바꾸니 피커 뷰의 컴포넌트가 2개로 나타난다...

 

 

 

시뮬레이터 결과 화면