UIKit) UIPickerView
PickerView
피커뷰는 슬롯머신 형태의 UI를 가지고있고, 휠을 돌려서 값을 선택한다.
cocoa tuch framework는 두가지의 슬롯머신을 제공한다.
- Date Picker - 날짜나 시간 선택
- Picker View - 범용적으로 사용 (다양한 데이터를 자유롭게 구현)
두 피커는 동일한 방식으로 동작하지만 구현에는 큰 차이가 있다.
데이터피커는 원하는 모드를 선택하기만 하면 UI와 데이터는 자동으로 구성된다.
피커에서 항목을 선택하면 valueChanged 이벤트가 전달되고
선택한 값을 가져올 때에는 Date값을 사용한다.
반면, 피커뷰는 표시할 값을 직접지정하며 경우에 따라 필요한 뷰를 직접 구성해야 한다.
선택이벤트는 델리게이트패턴으로 처리해야한다.
라이브러리에서 인터페이스 빌더로 피커뷰를 끌어다 놓게되면
이렇게 기본 데이터가 표시되어 있는데 실제로 표시되는 데이터는 아니다.
피커뷰의 속성을 보게되면 View 속성 이외에는 다른 특화된 속성이 없다.
피커뷰를 구현 할 때에는 모든 부분을 코드로 구현한다.
피커뷰의 구현에 있어서 이 두가지가 핵심요소이다.
천천히 한번 알아보도록 하자.
라이브러리에서 뷰로 끌어다 놓은 피커뷰에 마우스 오른쪽 클릭을 하면 위와같은
커넥션패널이 뜨는데 dataSource와 delegate 두가지를 연결해준다.
동그라미 부분을 누르고
뷰의 윗부분에서 왼쪽의 아이콘으로 드래그해주면 된다.
스위프트파일의 해당 클래스 코드로 들어가서
extension을 통해 dateSource를 구현하고 필수매서드를 입력한다.
그리고 새로운 extension으로 Delegate를 구현한다.
짜잔!!!!!
간단한 메서드들을 구현하게 되면 해당 배열의 문자열이 피커뷰표시되고 휠로 선택할 수 있다.
회색으로 표시된 셀렉션 인디케이터는 선택된 항목을 강조한다.
인디케이터를 숨기는 방법은 제공하지 않으므로 위의 사진처럼 항상 표시되고 커스터마이징도 불가능하다.
이번에는 선택된 항목을 표시하는 메서드를 델리게이트를 통해 구현해 보자.
델리게이트를 통해서 해당 배열을 확인하는 방법은 사용자가 항목을 직접 선택해야 메서드가 호출된다.
그래서 특정 시점에 선택되어있는 항목을 확인하는 것은 어렵다.
UIPickerView가 제공하는 메서드로 선택한 항목을 확인해보자.
스토리보드에 버튼을 추가하고 피커와 버튼을 각각 아울렛, 액션으로 연결한 후 코드를 작성하였다.
선택한 항목이 없다면 “not found”를 출력하고, 항목이 있다면 그 항목을 콘솔에 출력하는 코드이다.
따란~~ Report버튼을 누르면 선택한 항목이 출력되는 것을 볼 수 있다.
보통 휠의 선택과 동시에 바로 사용해야한다면 위에서 했던 Delegate의 메서드 중
didSelectRow 메서드를 사용하고, 나머지 경우에는 뒤의 방식으로 구현한다.
이번에는 컴포넌트를 한개 더 추가하고 새로운 배열을 넣어보자.
해당 메서드의 리턴값을 2로 바꿔주고
switch-case를 이용하여 해당 컴퍼넌트가 나타나도록 분기해야한다.
같은 배열을 다른 컴포넌트로 사용하는 경우에는 처음처럼 구현해도 되지만
다른 배열을 통해 다른 값을 보여주고 싶다면 이렇게 구현해야 한다.
다른 메서드들도 변경해주도록 한다.
코드를 실행해 보면
두개의 컴포넌트가 생기고 각각 선택된 항목을 출력하는 것을 볼수있다!! 👏👏
참고 자료
- UIPickerView
- KXCoding 강의
Comments