PickerView이용하기

PickerView는 여러 문자열 중에 하나를 선택하는 컴포넌트 객체입니다. 
DatePicker는 날짜에 특화되어 있으며, PickerView는 문자열, 이미지 등을 선택지로 넣을 수 있습니다.

1.먼저 프로젝트를 생성합니다.

2. iOS Platform에서 Single View App으로 생성한뒤 프로젝트의 이름을 넣어줍니다. 

Product Name: 앱의 이름을 말합니다.

Team: 개발자프로그램에 등록된 ID또는 팀을 입력합니다. 개발자 인증서에 등록해야 개인 디바이스에서 앱을 테스트 할 수 있습니다. 추후에 다루도록 하겠습니다. 여기서는 그냥 None으로 놔둬주세요.

Organization Name: 개발자의 이름을 적어주시면 됩니다.

Organization Identifier: 앱을 배포할 때 이용되는 Bundle Identifier를 만들때 이용되며,  일반적으로 도메인 네임을 역순으로 적는것이 관례입니다.

Bundle Identifier: 자동으로 생성되는 식별자로. 각종 API를 이용할 때도 이 식별자를 이용하게 됩니다.

Language: 앱 개발에 사용될 언어로 Swift와 Objective-C중 하나를 선택할 수 있습니다. 저는 Swiftf로 앱을 생성합니다.

User Core Data: iOS에서 제공하는 데이터 관리 툴킷의 사용 여부를 선택합니다.

Include Unit Tests, Include UI Tests: 애앱의 동작등을 자동으로 테스트할 때 사용합니다.

3. 프로젝트를 생성하면 가장 먼저 Main.storyboard에서 UI작업을 진행합니다.
저는 PickerView를 다룰 것이기 때문에 컴포넌트 객체를 스트로보드에 드래그하여 놓습니다.

4. PickerView에서 선택된 아이템을 확인하기 위해 컴포넌트 객체에서 Label을 끌어다 스토리보드에 놓습니다.
Label을 복사하거나 컴포넌트 객체에서 하나 더 끌어다 놓고, 앞에 만들어진 라벨을 더블 클릭해 Select로 바꾸어줍니다.  

 

5. Assistant Editor(opt + cmd + enter)를 눌러 화면을 분할해 줍니다. 화면 오른쪽 위쪽에 동그라미가 겹친 모양입니다.

아래의 그림 처럼 나오면 PickerView객체를 오른쪽 클릭으로 드래그 하거나 ctrln을 누른채로 왼쪽 드래그를 하면 저렇게 파란색 선이 생기면서 객체에 Oult변수 선언이나 Action을 줄 수 있습니다.

 

6. Connection을 Outlet으로 하고 Name에는 pickerView를 적고 연결해줍니다.

Connection에는 Outlet과 Action이 있습니다.

Oultet은 아웃렛 변수라고 하며, 객체에 접근하여 객체에 값을 저장하여 앱에서 화면으로 보여줄 때 이용됩니다.

Action은 액션함수라고 하며, 객체가 특정 동작을 할때 연결해주는 방식입니다.

두번째로 생성한 Label도 아웃렛 변수를 적당한 이름으로 선언해줍니다.

7. PickerView객체를 오른쪽 클릭하여 다음과 같이
View Controller에 드래그 하면 data Source, delegate가 나오는데 둘다 연결해 줍니다.

여기서 data Source는 PickerView가 나타내는 정보를 알려주며, 몇개의 아이템으로 구성 되었는지의 정보를 알려줍니다.

delegate는 직접적으로 뷰에서 처리하지 못하는 것을 다른 곳에서 처리하도록 설정해 줍니다.

ViewController 클래스는 UIViewController클래스를 상속하고 있습니다. Swift에서는 단일 상속원칙으로 하나의 클래스만을 상속받을 수 있습니다. 하지만 프로토콜들은 무한히 상속받을 수 있습니다. 제가 사용할 UIPickerViewDataSource와 UIPickerViewDelegate는 프로토콜입니다.

UIPickerViewDataSource를 상속받은뒤에 func picker를 입력하면 자동완성이 실행되는데, 빨간 칸에 있는 두개의 함수가 기존과 다르게 뜨는 것을 볼 수 있습니다. 이 두개의 함수가 PickerView의 아이템 갯수를 뷰에게 전달해 주는 역할을 합니다.

numberOfComponents는 PickerView의 Column갯수를 표시해주고 다른 하나는 Column에 나타내는 아이템의 갯수를 나타냅니다.

8. 아이템을 추가하기 위해 임의로 배열을 추가합니다. 

이제 실행을 한번 시켜보면 (앱을 실행시키는 방법은 cmd + r 또는 위에 재생버튼을 누르면 됩니다.)

값들이 잘 들어간것을 확인 할 수 있습니다.

마지막으로 Label에 현재 PickerView가 선택한 값을 표시하는 것을 하고 마무리 짓겠습니다.
Label에 값을 처음 글자 1로 하기 위해서는 viewDidLoad()에 설정해 줍니다.
그리고 PickerView에서 변경되는 값을 설정하기 위해서 didSelectRow를 가진 함수를 불러와 다음과 같이 입력해 줍니다.

이상으로 PickerView를 다루는 방법을 정리해 보았습니다.

기초적인 Outlet변수, Action함수를 보았고, Delegate와 Data source를 이용해 컴포넌트의 값들을 이용하는 방법을 알아봤습니다.

읽어주셔서 감사합니다.

소스는 깃허브에 올리겠습니다 깃허브가기