피커뷰 (PickerView)
피커뷰는 웹(Web)의 셀렉트 <select/>, 콤보박스 <option/> 등과 유사한 기능하는 input을 위한 View 이다.
이미지 피커뷰와는 완전 다르니 유사품에 주의하자!
아까 피커뷰를 input을 위한 View라고 했는데, input의 범위를 제한하고, 하나를 고르도록 하고 싶을때 사용하는 View이다.
오잉? Segment Control 도 비슷한 역할하지 않나요? 라고 할 수 있는데,,, 피커뷰는 매우 많은 항목을 나열할 수 있다.!
주로 화면 아래 입력용 가상 키보드 자리나 화면 설계에 따라 별도의 고정된 영역을 사용하기도한다.
피커뷰 종류
피커뷰는 크게 두 가지로 나눌 수 있음.
- 데이트 피커 (DatePicker) : 날짜 입력 전용
- (일반) 피커뷰 (Picker View) : 일반 데이터를 입력 받는데 사용
아래와 같이 스토리보드 인터페이스 빌더에서 오브젝트 라이브러리에서 피커뷰를 검색해보면,
데이트 피커와 일반 피커뷰가 따로 있음을 확인할 수 있다.
뭐가 다른가욧?
일반 피커 뷰의 입력 범위가 더 넓지만, 날짜만 fit하게 받고 싶은 경우 데이트 피커를 제공한다고 생각하면 된다.
UIPickerView
이제 (일반) 피커뷰를 피커뷰로 부르고 살펴보자.
헷갈릴수 있는데,,, 데이트피커 사진을 가지고 예시를 들어버렸다. 데이트피커도 까고 보면 피커뷰에서 파생된거라 그냥 데이트피커 사진으로 설명하려고 한다.
피커뷰에는 컴포넌트(component)와 행(row) 두 가지 요소가 있다.
- 컴포넌트: 피커뷰가 나타내는 목록의 가짓수
- 행: 특정 목록의 한 요소
0번째 컴포넌트의 0번째 행은 "오전" 이다
0번째 컴포넌트의 1번째 행은 "오후" 이다
피커뷰는 Delegate 패턴을 바탕으로 동작한다.
아래 2가지 프로토콜을 모두 채택하여 필요에 따라 메서드를 구현해야한다.
- UIPickerViewDelegate -> 액션 처리를 위한 녀석
- UIPickerViewDataSource -> 화면에 출력하기 위한 녀석
데이터 소스용 메서드를 미리 구현해두면, 코코아 터치 프레임워크가 적당한~ 시점에 메서드를 호출하고 받은 응답을 이용해 피커뷰의 형태와 내용을 구성한다.
피커뷰 구현에 필요한 기본적인 데이터 소스 메서드 및 델리게이트 메서드는 아래 호출되는 순서로 나열했다.
1. 생성할 컴포넌트의 갯수를 정의한다.
numberOfComponents
2. 지정된 컴포넌트가 가질 목록의 길이를 정의한다.
numberOfRowsInComponent: Int
3. 지정된 컴포넌트의 목록 각 행에 출력될 내용을 정의한다.
titleForRow: Int, forComponent: Int
4. 지정된 컴포넌트의 목록 각 행을 사용자가 선택했을 때 실행할 액션을 정의한다.
didSelectRow: Int, inComponent: Int
UITextFieldView 의 inputView 를 피커뷰로?
피커 뷰는 일반 컨트롤처럼 자신만의 고유한 영역을 차지할 수도 있지만, 텍스트필드와 함께 잘 조합해서 사용하면 화면 하단 가상 키보드 영역을 빌려 나타날 수도 있다.
Input View 라고 불리는 영역을 이용하는 방식인데, 나타났다 사라지는 가상키보드 처럼, 필요할때만 피커 뷰가 나타나 입력을 돕고 사라지므로 화면 공간을 효율적으로 사용할 수 있다.
// 텍스트 필드 입력 방식을 가상 키보드 대신 피커 뷰로 설정한다.
self.textFieldView.inputView = pickerView
UIDatePicker
[공식문서] The UIDatePicker class uses a custom subclass of UIPickerView to display dates and times.
You use a date picker only for handling the selection of times and dates. If you want to handle the selection of arbitrary items from a list, use a UIPickerView object.
데이트 피커는 피커뷰에서 시간이랑 날짜만 표시하기 위해 커스텀한 서브클래스를 이용해 정의된다.
그 외 데이터를 다루고 싶으면, UIPickerView 로 썩 꺼지 사라지라고 한다.
참고:
https://developer.apple.com/documentation/uikit/uidatepicker
UIDatePicker | Apple Developer Documentation
A control for inputting date and time values.
developer.apple.com
https://developer.apple.com/documentation/uikit/uipickerview
UIPickerView | Apple Developer Documentation
A view that uses a spinning-wheel or slot-machine metaphor to show one or more sets of values.
developer.apple.com
https://meerkat9.tistory.com/3
셀렉트박스 , 콤보박스 <select> / <option> / <optgroup> 태그
- select box, combobox, drop-down list, pull-down menus 라고도 함- multiple 속성 : shift, ctrl을 이용한 다중선택을 가능하게 함- size 속성 : 보여줄 option의 개수를 설정함 .설정할 경우 list box 처럼 사용 - 콤
meerkat9.tistory.com
