[IOS] Do it(4) PickerView룰렛을 이용한 ImageViewer 제작

Picker View 룰렛을 활용한 Image Viewer

결과 화면

---

포인트

---

Picker View 사용시 Delegate(사용자 인터렉티브) 메소드 사용하기 위해 선택해주어야 한다 

스토리 보드 구성

이미지가 많아질경우 이미지를 관리 하기위해 Image file을 추가 해주는 게 좋다  , 그리고 이미지를 옮길때는 복사 해서 옮길것 / 링크만 걸어준다면 이미지가 누락될 가능성이 있음

 

코드 & 설명

---

//
//  ViewController.swift
//  PickerView
//
//  Created by HwangSeungyeon on 2020/07/12.
//  Copyright © 2020 HwangSeungyeon. All rights reserved.
//

import UIKit
//pickerView의 Delegate클래스 상속받기 위해서 Delegate & DataSource 추가
class ViewController: UIViewController, UIPickerViewDelegate ,UIPickerViewDataSource {
    //피커뷰가 동작하는데 필요한 변수 및 상수 추가
    let MAX_ARRAY_NUM = 6 //이미지 파일명 저장 최대 갯수
    let PICKER_VIEW_COLUMN = 1 //피커뷰 열의 갯수
    let PICKER_VIEW_HEIGHT:CGFloat = 80
    var imageArray = [UIImage?]() //UI Type의 배열 선언
    var imageFileName = ["1.png","2.png","3.png","4.png",
                        "5.png","6.png"]

    @IBOutlet var pickerImage: UIPickerView! //pickerView 아웃렛 변수
    @IBOutlet var lblImageFileName: UILabel! //selectedItem 아웃렛 변수
    @IBOutlet var imageView: UIImageView! //imageView 아웃렛 변수

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        //MAX ARRAY만큼의 For문을 돌려서 imageFileName안에 있는 이미지를 UIImage 배열에 넣어 준다
        for i in 0 ..< MAX_ARRAY_NUM {
            let image = UIImage(named: imageFileName[i])
            imageArray.append(image)
        }

        //첫번째 이미지 할당
        lblImageFileName.text = imageFileName[0]
        imageView.image = imageArray[0]

    }
    //피커뷰에게 컴포넌트 수를 넘겨준다 여기서는 1(Delegate Method)
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return PICKER_VIEW_COLUMN
    }

    //PickerView의 Row 높이 지정
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return PICKER_VIEW_HEIGHT
    }

    //피커뷰에게 컴포넌트의 열의 개수 정수값으로 넘겨줌, 피커뷰에서 해당열에서 선택할 수 있는 행의 개수(데이터 개수)(Delegate Method)
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return imageFileName.count
    }
    //titleForRow인수를 가지는 Delegate Method , 피커뷰에게 컴포넌트의 각 열의 타이틀을 문자열로 넘겨줌
//    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
//        return imageFileName[row]
//    }
    //피커뷰에 이미지 title 대신 image를 넣는다

    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
    }

    //아래의 label에 선택한 파일명 저장, 출력
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        lblImageFileName.text = imageFileName[row]
        imageView.image = imageArray[row] //피커뷰에서 선택한 이미지(row)해당하는 이미지 가져온다 -> 출력
    }

}

 

전체 코드

PickerView.zip

0.04MB

출처 : Do it 스위프트로 앱 만들기