[iOS] 피커뷰 뽀개기 - HoonIOS

안녕하세요, HoonIOS입니다.

이번에는 앱에서 많이 사용하는 UI인 피커뷰에 대해 포스팅을 하려고 합니다. :)

 

피커뷰는 대표적으로 몇 가지의 선택 요소 중에서 하나를 고르고 싶을 때 사용을 합니다.

 

그럼 피커뷰를 한번 살펴보겠습니다.

 

 PickerView

 

피커뷰에는 크게 일반 피커뷰와 데이트 피커뷰로 나뉘게 됩니다.

 

그럼 하나씩 알아볼까요?

 

UIPickerView란?

애플 공식문서에서 말하는 UIPicerView는  spinning-wheel 또는 slot-machine을 통하여 한 개, 그이 상의 값들을 보여주는 뷰입니다.라고 나와있네요

 

쉽게 예시를 들어 설명하면 아래와 같은 형태가 피커뷰입니다. 앱을 사용하다가 보면 자주 보던 형태죠?

UIDatePicker란?

애플 공식문서에서는 날짜와 시간의 값을 입력하기 위한 컨트롤러라고 되어 있네요. :)

 

예시를 들어서 아래와 같이 datepickerView를 구현하면은 아래와 같이 날짜를 선택할 수 있는 뷰가 발생합니다.

 

이 둘의 차이는 피커뷰 자체는 델리게이트 패턴을 통해 동작을 하는 반에 데이트 피커뷰는 델리게이트 패턴을 통해 동작을 하지 않습니다.

 

피커 뷰에서 사용하는 프로토콜은 UIPickerViewDelegate와 UIPickerViewDataSource가 있습니다.

 

• UIPickerViewDelegate는 피커뷰에서 발생하는 액션을 처리하기 위한 프로토콜입니다.
• UIPickerViewDataSource는 피커뷰를 화면에 출력하기 위한 프로토콜입니다.

뭔가 지금까지 봤을때 이상하다는 생각을 하셨나요?

.

.

맞습니다.

피커뷰랑 테이블 뷰 델리게이트랑 상당히 비슷하네요, 심지어 두 개의 프로토콜 안에 있는 메서드들도 특성이 비슷합니다. :)

 

해당하는 델리게이트 프로토콜을 한번 살펴보겠습니다.

 

 UIPickerViewDelegate

• 애플 공식 문서에서는 UIPickerView 객체의 델리게이트로 프로토콜을 적용하고 피커뷰 자체 구성에 필요한 데이터를 제공하는 몇몇의 메서드를 제공한다고 나와있네요.

* 설명

• 이 메서드는 Component안의 값들의 높이를 설정해주는 메서드로 return값으로 CGFloat으로 리턴을 합니다.
  
  이 리턴값이 해당 value의 높이가 됩니다.

 

* 설명

• 이 메서드는 테이블 뷰의 tableView(:cellForRowAt:)와 성격이 비슷합니다. 이 메서드는 피커뷰 안에 있는 값들의 title을 제공하는 메서드입니다.
• 총 3개의 매개변수를 제공합니다.
  1. pickerView
     - 여러 개의 피커뷰가 있을 때 피커뷰를 구별하기 위한 매개변수 
  2. titleForRow
     - 한 컴포넌트 안에 하나의 열 값의 인덱싱으로 0부터 시작을 합니다.
  3. forComponent
     - 한 피커뷰 안에 여러 개의 Component가 있으면 어느 컴포넌트인지 구분하기 위해 사용합니다. 이 인덱스도 0부터 시작을 하게 됩니다.

※ Component란?

- 하나의 피커뷰에 여러 개의 Component가 들어 있는데요 아래 그림을 보시면 각 한 열이 하나의 컴포넌트가 됩니다.

 

* 설명

• 피커뷰에서 열을 선택했을 때 발생하는 메서드입니다.
• 세 개의 매개변수를 가집니다.
  1. pickerView
     -  한 페이지에 여러 개의 피커뷰일때 구분을 하는 매개변수입니다.
  2. didSelectRow
     - 피커뷰에서 선택한 열이 해당합니다.
     - 인덱싱이 0부터 시작을 하게 됩니다.
  3. inComponent
     - 여러 개의 Component가 있을 때 구분하기 위해 사용하는 매개변수입니다.

구성하기 위해서 가장 핵심적인 델리게이트 메서드는 위와 같습니다.:)

 

그다음으로 데이터를 표현해주는 DataSource에 관련된 메서드를 한번 살펴보겠습니다.

 

 UIPickerViewDataSource

 

• UIPickerViewDataSource 프로토콜은 UIPickerView 객체와 피커뷰를 위한 데이터 뷰 사이에서 중재되어야 하는 프로토콜을 적용합니다
• 이 데이터 소스는 피커뷰의 컴포넌트 개수를 정하고 컴포넌트 안의 열의 갯수를 피커뷰에 보여줍니다.

 

* 설명

• 피커뷰의 컴포넌트 갯수를 정할 때 필요한 메서드로 컴포넌트 개수가 필요한 만큼 return 해주면 됩니다.
  
  당연히 return은 Int값으로 되어 있겠죠?

 

* 설명

• 피커뷰의 컴포넌트 안에 있는 열의 갯수를 정할 때 필요한 메서드로 원하는 열의 개수만큼 return을 해주면 됩니다.
  
  
• 그런데 한 피커뷰는 여러 개의 컴포넌트로 구성을 되어있다고 했죠? 따라서 컴포넌트에 따라 다르게 개수를 구성할 수 있는데 컴포넌트를 식별하는 방법은 두 번째 매개변수에 따라 왼쪽부터 0 , 1 , 2의 인덱싱이 됩니다.

 

이렇게 피커뷰와 관련 델리게이트, 데이터 소스에 대해 공부해 봤습니다. 

 

다음 포스팅에는 이를 활용해서 포스팅해보겠습니다. ㅎㅎㅎㅎㅎㅎ