[스위프트 기초] 5장 피커뷰 사용해보기

피커 뷰(picker view) 란?

아이폰에서 원하는 항목을 선택할 수 있게 해주는 객체로, 피커라고도 한다. 데이트 피커가 시간을 선택하기 위한 객체라면 피거 뷰는 문자열을 선택하기 위한 객체. 

델리케이트(Delegate) 메서드 

: 특정한 객체와 상호작용할 때 메시지를 넘기면 그 메세지에 대한 책임이 넘어감 

1. 

import UIKit

//delegate 클래스도 상속받음
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.
    }


}

delegate 메서드 추가

//returns the number of 'col' to display
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return PICKER_VIEW_COL //pickerView에 표시되는 열의 개수
    }
    
    //returns the # of rows in each component
    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] //imageFileName 에 저장된 파일명 리턴
    }

//여기까지 제대로 작동 확인

    //해당 룰렛을 선택했을때 = didSelectedRow
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row] //row 값에 해당하는 문자열을 가지고 와서 lblImageFileName.text에 저장
    }

** 이 부분 이해가 잘 안됨

var imageFileName = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"] //이미지 파일명 배열

이게 imageFileName 배열이니까 여기서 row 에 해당하는 파일명을 골라와서 라벨에 넣어준다는 의미

 

 var imageArr = [UIImage?]() // 배열 선언 먼저 한 것 (빈 배열)

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        for i in 0 ..< MAX_ARRAY_NUM { //0부터 4까지 루프
            let image = UIImage(named: imageFileName[i]) // imageFileName[i] 파일명의 UIImage 타입의 image 변수 선언
            imageArr.append(image) // 이 배열에 image 추가
        }
        
        lblImageFileName.text = imageFileName[0] //레이블에 파일명 첫번째 파일명 추가
        imageView.image = imageArr[0] //이미지 뷰에 첫번째 이미지 나타남.
    }

** for 반복문

for 변수 in Range {

}

//해당 룰렛을 선택했을때 = didSelectedRow
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row] //row 값에 해당하는 문자열을 가지고 와서 lblImageFileName.text에 저장
        imageView.image = imageArr[row]
    }

//    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
//        return imageFileName[row] //imageFileName 에 저장된 파일명 리턴
//    }
    
    //피커뷰에게 컴포넌트 각 열의 뷰를 UIView 타입의 값으로 넘겨줌, 이미지 뷰에 저장되어 있는 이미지를 넘겨줌
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        //선택된 row에 있는 이미지를 imageArr에서 가져옴
        let imageView = UIImageView(image:imageArr[row])
        //프레임 크기 설정
        imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 150)
        
        return imageView
    }

여기까지 피커뷰의 선택을 text가 아니라 사진으로 보여주기

    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return PICKER_VIEW_HEIGHT
    }

피커뷰 룰렛 높이 변경하기!

PICKER_VIEW_HEIGHT 라는 상수를 미리 정의한 후 위 메서드 추가

주의: INT가 아니라 CGFloat 형식으로 정의하기. 

 

참고 : https://hyerios.tistory.com/100

iOS CGFloat

---

도전과제

여러개의 컴포넌트를 가진 피커뷰 만들기.  
왼쪽 컴포넌트는 레이블에 파일 명을 출력하고, 오른쪽은 이미지 뷰에 이미지 출력

피커뷰 자체를 여러개 넣을 필요 없이 칼럼 상수를 변경하면 피커뷰가 여러개로 나누어짐. 

 func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        
        if(component == 0){
            lblImageFileName.text = imageFileName[row]
        }
        else{
            imageView.image = imageArr[row]
        }
//        lblImageFileName.text = imageFileName[row] //row 값에 해당하는 문자열을 가지고 와서 lblImageFileName.text에 저장
//        imageView.image = imageArr[row]
    }

컴포넌트별 이벤트를 나눠주면 간단하게 해결!