[ IOS ] 피커 뷰 만들기 ( 프로토콜, 델리게이트 메서드 )

공부한 내용을 정리한 글입니다.

 

 

문제

컴포넌트가 두 개인 피커 뷰를 구현하라. 왼쪽 피커 뷰를 선택했을 경우 파일 명이 나타나도록, 오른쪽 피커 뷰를 선택했을 경우 이미지 뷰에 이미지를 출력하도록 한다.

 

 

구현 순서

1. 레이아웃 작성하기
2. 아울렛 변수 생성하기
3. 피커 뷰의 델리게이트 설정하기
4. 필요한 클래스 상속받기(프로토콜 채택), 변수 및 상수 추가하기, 초기화면 설정하기
5. 피커 뷰 동작 코드 작성하기
6. 첫 번째 피커 뷰 선택 시 파일 명 출력하기
7. 두 번째 피커 뷰 선택시 이미지 출력하기
8. 피커 뷰 룰렛 행 높이 설정

 

최종 결과

 

 

 

 

 

---

※ 개념 살펴보기

 

프로토콜 Protocol

델리게이트는 프로토콜로 구현되어있다. 따라서 프로토콜을 먼저 알아보자.

Protocol

(1) 외교 의례, 의전
(2) (조약의) 초안, 보충협약
(3) 컴퓨터 통신 규약
(4) (과학 실험, 의료 치료의) 계획서

• 특정 역할을 하기 위한 메서드, 프로퍼티, 기타 요구사항 등의 청사진을 정의한다.
• 프로토콜은 정의를 하고 제시를 할 뿐 스스로 기능을 구현하지 않는다. 기능의 구현은 해당 프로토콜을 채택(Adopted)한 곳에서 이루어진다.
• 프로토콜은 다른 객체를 도울 메서드와 속성이 정의되어있다. 즉 우리는 채택한 프로토콜에서 원하는 기능만을 가져와 사용할 수 있다.
• 자바의 interface와 유사하다.

 

 

 

델리게이트 Delegate

delegate
1. (집단의 의사를 대표하는) 대표(자)
2. (권한, 업무 등을) 위임하다
3. (대표를) 뽑다

• 대리자. 누군가 해야 할 일을 대신해주는 역할
• delegate는 프로토콜로 구현되어있다.
• '위임하다'라는 의미를 가진 것처럼, A가 해야할 ★을, B가 권한을 위임받아 ★을 수행한다.
• 클래스 선언문 오른쪽에 채택할 프로토콜을 적는다. (상속받을 클래스를 먼저 적은 후 채택할 프로토콜을 나열한다.)

class 클래스명: 상속받을 클래스명, 채택할 프로토콜 {
	...
}

• 사용자가 객체를 터치했을 때 해야 할 일을 델리게이트 메서드에 구현하고, 해당 객체가 터치되었을 때 델리게이트가 호출되어 위임받은 일을 하게 된다.
• 액션 함수를 사용해 기능을 구현할 수도 있지만, 프로토콜을 채택하여 델리게이트 메서드를 사용하면 프로토콜에 정의되어있는 많고 다양한 기능들을 사용할 수 있어 유용하다.

 

---

---

---

 

 

 

 

 

 

1. 레이아웃 작성하기

 

 

 

 

 

---

2. 아울렛 변수 생성하기

import UIKit

class PickerViewMissionController: UIViewController {
                                   
    @IBOutlet var pickerImage: UIPickerView!
    @IBOutlet var lblImageFileName: UILabel!
    @IBOutlet var imageView: UIImageView!
}

 

 

 

 

 

---

3. 피커 뷰의 델리게이트 설정하기

마우스의 오른쪽 버튼으로 피커 뷰를 선택한 후 위쪽의 뷰 컨드롤러 아이콘 위로 끌어다 놓는다. 

그 후 delegate를 클릭하여 피커 뷰의 델리게이트를 설정한다.

 

 

 

 

 

 

 

---

4. 필요한 클래스 상속받기(프로토콜 채택), 변수 및 상수 추가하기, 초기화면 설정하기

 

4.1 UIPickerViewDelegate, UIPickerViewDataSource 프로토콜 채택하기

import UIKit

class PickerViewMissionController: UIViewController,
                                   UIPickerViewDelegate,
                                   UIPickerViewDataSource {
    ...
}

 

UIPickerViewDelegate

The delegate of a UIPickerView object must adopt this protocol and implement at least some of its methods to provide the picker view with the data it needs to construct itself.

The delegate implements the required methods of this protocol /to return height, width, row title, and the view content for the rows in each component. It must also provide/ the content for each component’s row, /either as a string or a view. Typically the delegate implements /other optional methods/ to respond to new selections or deselections of component rows.

UIPickerView 객체의 델리게이트는 UIPickerViewDelegate 프로토콜을 채택해야한다, 그리고 피커 뷰 구성에 필요한 데이터를 갖추기 위해 몇 개의 필수 메서드를 구현해야 한다.

 

델리게이트는 높이, 너비, 행(요소) 타이틀 그리고 각 컴포넌트의 행(요소)을 위한 뷰 콘텐츠를 반환하기 위해 UIPickerViewDelegate 프로토콜이 필요로 하는 메서드를 구현해야 한다. 또한 델리게이트는 문자열 또는 뷰를 이용해 각 컴포넌트 행(요소)에 콘텐츠를 제공해야 한다. 일반적으로 델리게이트는 컴포넌트 행(요소)의 새로운 선택 또는 선택 취소에 응답하기 위해 기타 선택 메서드를 구현해야 한다.

 

 

UIPickerViewDataSource

The UIPickerViewDataSource protocol must be adopted by an object that mediates between a UIPickerView object and your application’s data model for that picker view. The data source provides the picker view with the number of components, and the number of rows in each component, for displaying the picker view data. Both methods in this protocol are required.

UIPickerView 객체와 pickerView를 위한 애플리케이션 데이터 모델 사이에 중재하는 객체는 UIPickerViewDelegate 프로토콜을 채택해야 한다. 

데이터 소스는 pickerView에 데이터를 출력하기 위해 pickerView에 컴포넌트 수, 각 컴포넌트의 행(요소)의 수를 제공한다. 이 프로토콜에서 두 메소드는 필수이다.

 

 

 

---

 

 

 

4.2 변수 및 상수 추가하기, 초기화면 설정하기

import UIKit

class PickerViewMissionController: UIViewController,
                                   UIPickerViewDelegate,
                                   UIPickerViewDataSource {
    let MAX_ARRAY_NUM = 3
    let PICKER_VIEW_COLUMN = 2 //피커 뷰 component 2개 필요
    var imageArray: Array<UIImage?> = [UIImage?]() //이미지를 저장할 배열
    var imageFileName = ["putArmsAround.jpg",
                         "playingMusic.jpg",
                         "face.png"]               //이미지 파일 이름을 저장할 배열

    @IBOutlet var pickerImage: UIPickerView!
    @IBOutlet var lblImageFileName: UILabel!
    @IBOutlet var imageView: UIImageView!
    
    //뷰 로드시 호출되는 함수
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //UIImage 타입의 imageArray에 요소 추가
        for i in 0 ..< MAX_ARRAY_NUM {
            let image = UIImage(named: "WallaceAndGromit_\(imageFileName[i])")
            imageArray.append(image)
        }
        
        //초기 화면 설정
        lblImageFileName.text = imageFileName[0]
        imageView.image = imageArray[0]
        
        }
     
}

 

 

 

 

 

 

 

 

 

---

5. 피커 뷰 동작코드 작성하기

+ component는 인데스 0부터 시작한다. 인수인 component를 사용해 component를 구분할 수 있다.

 

• numberOfComponent : 피커 뷰에 표시되는 열 개수, 즉 피커 뷰 컴포넌트의 수를 피커 뷰에게 전달하는 델리게이트 메서드

    //returns the number of components(columns) to display
    //화면에 보여줄 component 개수(열)를 반환한다.(피커 뷰의 component 개수(열)를 정해주는 곳)
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return PICKER_VIEW_COLUMN
    }

 

• numberOfRowsInComponent 인수를 가지는 pickerView : 각 컴포넌트의 행(요소)의 개수를 피커 뷰에 전달하는 델리게이트 메서드

	//Returns The number of rows for the component.
    //numberOfRowsInComponent인수를 가진 델리게이트 메서드
    //한 component의 행의 개수를 반환한다
    //component는 인데스 0부터 시작한다. 인수인 component를 사용해 component를 구분할 수 있다.
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return imageFileName.count
    }

 

• titleForRow 인수를 가지는 pickerView :  각 컴포넌트의 행 타이틀을 피커 뷰에 문자열 값으로 전달하는 델리게이트 메서드

//이번 프로젝트에는 사용하지 않은 메서드

	func pickerView(_ pickerView: UIPickerView, 
    				titleForRow row: Int, forComponent componenet) -> String? {
         return imageFileName[row]  //어떤 행(요소)에 해당하는 배열 원소를 반환한다. 
    }

 

• viewForRow 인수를 가지는 pickerView : 각 컴포넌트의 행(요소)에 뜰 view를 피커 뷰에 UIView 값으로 전달하는 델리게이트 메서드

    //viewForRow 인수가 있는 델리게이트 메서드는 component에 UIView가 뜨도록 한다. -  이미지를 뜨게 할 수 있다.
    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: 150, height: 100)
        
        return imageView
    }

 

 

 

 

 

---

6 & 7 . 첫 번째 피커 뷰 선택 시 파일 명 출력하기 &두 번째 피커 뷰 선택 시 이미지 출력하기

+ component는 인데스 0부터 시작한다. 인수인 component를 사용해 component를 구분할 수 있다.

• didSelectRow 인수를 가지는 pickerView : 사용자가 컴포넌트의 행을 선택했을 때 호출되는 델리게이트 메서드

    //사용자가 피커 뷰의 행을 선택했을 때 할 일을 델리게이트에게 지시하는 메서드
    //didSelectRow 인수가 있는 메서드
    func pickerView(_ pickerView: UIPickerView,
                    didSelectRow row: Int, inComponent component: Int) {
        //왼쪽 컴포넌트를 선택했을 때 파일 명 출력, 오른쪽 컴포넌트 선택했을 때 파일 명 출력
        if component == 0 {
            lblImageFileName.text  = imageFileName[row]
        }
        else{
            imageView.image = imageArray[row]
        }
    }

 

 

 

 

 

 

---

8. 피커 뷰 룰렛 행 높이 설정

• rowHeightForComponent 인수를 가지는 pickerView : 각 컴포넌트의 행(요소) 높이를 피커 뷰에 전달하는 델리게이트 메서드

    //returns height of row for each component.
    //component 행의 높이를 정할 수 있다.
    //rowHeightForComponent 인수를 가지는 메서드
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component:Int) -> CGFloat {
        return PICKER_VIEW_HEIGHT
    }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

공부한 자료

https://zeddios.tistory.com/8
https://blog.naver.com/seotaji/220293615979
<델리게이트>
야곰 - 스위프트 프로그래밍 5판 (SWIFT5)
https://blog.naver.com/seotaji/220287208861
<프로토콜>

Do It! 스위프트로 아이폰 앱 만들기 개정 5판
SWIFT 문서