[IOS]피커 뷰

이정찬·2022년 5월 18일
0

Storyboard개발일지

목록 보기
7/20

피커 뷰를 활용하는 방법을 간단하게 정리해 보았다.

스토리보드 구성

추가 옵션


피커뷰를 위에 아이콘으로 드래그하여 델리게이트 메서드를 사용할 수 있게끔 설정하였다.

코드

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{
    let MAX_ARRAY_NUM = 5
    let PICKER_VIEW_COLUMN = 1
    let PICKER_VIEW_HEIGHT:CGFloat = 80
    var imageArray = [UIImage?]()
    var imageFileName = ["1.png", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"]

    @IBOutlet var lblImageFileName: UILabel!
    @IBOutlet var pickerimage: UIPickerView!
    @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]
    }
    
    // return the number of 'colums' to display.
    //뷰의 컨포넌트 수 설정
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return PICKER_VIEW_COLUMN
    }
    
    // return the # of rows in each component..
    //피커 뷰의 높이 설정
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return imageFileName.count
    }
    
    //피커 뷰의 개수 설정
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat{
        return PICKER_VIEW_HEIGHT
    }
    
    //피커 뷰의 각 Row의 타이틀 설정
    /*
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return imageFileName[row]
    }
    */

    //피커 뷰의 각 Row의 view 설정
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row]
        imageView.image = imageArray[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
    }
}

실행결과

profile
오늘도 조금씩 성장하자

0개의 댓글