[iOS] UIPickerView구현하기 & ToolBar추가 - HoonIOS

안녕하세요, HoonIOS입니다.

 

저번 포스팅에는 UIPickerView와 UIPickerViewDelegate, UIPickerViewDataSource에 대해 포스팅을 하였습니다.

< 피커뷰 뽀개기! >

 

이제 이 포스팅을 통하여 배운 델리게이트를 사용하여 구현을 해보겠습니다.

 

 UIPickerView구현하기

 

ㅎㅎ 우선 어떤 피커뷰를 구현할지 결과부터 한번 봐보겠습니다.

구현 결과

 

텍스트 필드를 누르면 UIPicker가 등장하게 되고 그 value값을 선택하고 Done 버튼을 누르면 선택된 value가 아래에 있는 label에 들어가게 만들어 주겠습니다.

 

1. 우선 제일 먼저 스토리보드를 통해 UI를 구성해 주겠습니다.

 

* 설명

• 테이블 뷰의 타입을 Static Cell로 설정을 해주겠습니다. 왜냐하면 이번 실습에서는 테이블 뷰 셀을 딱 2개만 필요로 하기 때문이죠 ㅎㅎ
• Who?, Label은 UIlabel로 설정해주고 첫 번째 테이블 뷰 셀에서 맨  오른쪽에는 텍스트 필드를 추가해줍니다.

이제 UI 설정은 모두 해줬습니다.

 

2.  텍스트 필드와 UILabel을 모두 아웃렛 변수에 설정해줍니다.

 

 

3. 피커뷰 객체를 생성해주고 텍스트 필드에 넣어줍니다.

 

* 설명

• UIPickerView객체를 picker에 넣어줍니다.
• 텍스트 필드의 inputView는 텍스트 필드가 최초 응답자가 되었을 때 cusomView를 보여주는 것으로 여기서는 inputView에 UIPickerView을 넣어준 것으로 텍스트 필드를 클릭하게 되면 UIpickerView를 등장하게 됩니다.
• .delegate는 추후에 델리게이트 함수를 사용하게 하기 위해서 설정한 것입니다.

 

※ UITextFiled의 inputView란?

 

- 애플 공식 문서에 따르면 텍스트 필드에 최초 응답자가 되면 해당 프로퍼티에 들어간 커스텀 뷰를 띄어주게 됩니다.

 

 

4. 피커 뷰에 툴바를 작성하고 적용해 줍니다.

 

* 설명

• toolbar 변수에 UIToolBar객체를 넣어줬습니다. 이제 이 UIToolBar의 위치와 배경화면 색깔을 다 잡아주겠습니다.
• toolBar의 frame을 잡아줬지만 위치 좌표 값을 큰 의미가 없습니다.
  
  왜일까요??
  
  그 이유는 액세사리 뷰 영역은 시스템에 의해서 동적으로 좌표가 정해지기 때문에 툴바에 잡아주는 위치 좌표값은 큰 의미가 없습니다. 어차피 잡아줘 봤자 랜더링 할 때 재설정되기 때문입니다.
  
  따라서 툴바를 programmacllay 해서 ToolBar에 넣어줄 거면 height인 높이만 잡아넣어주면 됩니다.

※ inputAccessoryView란?

- 텍스트 필드에 최초응답가 있을 때 커스텀 accessory View가 보이게 됩니다.
- 여기서는 피커뷰 위의 액세서리 영역에 추가가 되게 됩니다.

 

5. UIToolBar영역에 버튼 객체를 생성해 줍니다.

 

* 설명

• UIToolBar영역에 버튼을 추가하기 위해서 UIBarButtonItem을 생성해줬습니다.
  .title, target, action을 통해 버튼의 이름, target, action을 설정해줬습니다.
• 아직 action 메서드의 메서드를 작성해주지 않았으니 빨간색 오류가 발생을 할 것입니다... 잠시 후에 작성을 해줄 테니 우선을 오류가 발생했다고 해도 넘어가겠습니다. :)

6.  툴바에 바버튼 아이템을 추가해줍니다.

 

* 설명

• space라는 상수에 UIBarButtonItem 객체를 넣어줬는데 이것은. flexibleSpace로 툴바에 버튼을 맨 오른쪽으로 밀어주기 위해 공간을 넣어 준 것입니다.
• . setItems은 툴바에 버튼을 추가하기 위한 메서드로 위에서 만들어준 space와 BarButton 아이템을 추가해줬습니다.

※. flexibleSpace,. fiexedSpace 구별하기

- flexibleSpace는 아이템끼리의 빈 공간을 추가하기 위한 것입니다. 다른 아이템 사이의 동등한 공간을 만들어 줍니다.

- fixedSpace는 다른 아이템과 공간을 두는 것은 flexibleSpace와 같지만 width변수에 설정한 value값만큼 옆에 있는 아이템과 거리가 멀어집니다.

 

7. UIBarButtonItem에 설정해준 action 메서드를 정의해주겠습니다.

 

* 설명

• Done버튼을 누르면 띄어져 있는 피커 뷰를 닫아주도록 메서드를 작성했습니다. :)

 

이제 UI 구성을 모두 마무리했습니다. ㅎㅎ 이제 델리게이트와 데이터 소스를 통해서 UIPickerView를 제대로 된 PickerView를 구현해주겠습니다.

 

8. 피커뷰에 띄어줄 데이터 값을 구성해주겠습니다.

 

* 설명

• 피커뷰에 이 값들을 띄어 주겠습니다.

9. UIPickerView의 데이터 소스를 선언해주기 위해서 extension으로 프로토콜을 선언해주었습니다.

 

* 설명

• 프로토콜을 선언했더니 오류가 발생을 했네요, 이것은 바로 required 메서드를 선언 안 해줘서 그렇습니다. 
  
  다음에 설정을 해줄 것이니 우선 넘어가시죠

 

10. 에러를 눌러 fixed를 통해 에러를 잡아주면 아래와 같은 두 개의 메서드가 생기게 됩니다.

 

* 설명

• 피커뷰를 구성하기 위한 데이터 소스입니다. 이 두 개의 프로토콜 메서드는 required 메서드 이므로 꼭 필수로 구현을 해줘야 합니다.
• numberOfComponents 메서드는 PickerView에 들어갈 component개수를 원하는 만큼 return 하는 것입니다.
• pickerView(_:numberOfRowsInComponent:)는 한 component안에 들어갈 value의 개수입니다.

11.  데이터 소스의 필수 메서드들을 작성해 주겠습니다.

 

* 설명

• 컴포넌트의 개수는 1개, 피커뷰 의 컴포넌트 안의 아이템 갯수는 위의 데이터 값의 개수만큼 동적으로 변활수 있게 작성을 해주었습니다.

12. 피커뷰의 델리게이트 프로토콜을 extension을 통해서 구현해주겠습니다.

 

* 설명

• 이 프로토콜에는 필수 프로토콜이 없어서 구현해줄 메서드가 없습니다.

13. 피커뷰를 선택했을 때 사용하는 데이터 델리게이트를 작성해주겠습니다.

 

* 설명

• pickerView(:didSelectRow:) 메서드는 피커 뷰를 선택하게 되었을 때 발생하는 메서드로 선택되면 해당하는 row의 값을 이용해 UIlabel에 해당하는 데이터의 값을 넣어주겠습니다.
  
  여기서 참고하실 것은 피커뷰는 첫번째가 0부터 시작을 합니다.

14. 피커뷰 아이템끼리의 높이를 설정해주는 메서드를 구현해주겠습니다.

 

* 설명

• return값을 통해 높이를 설정해주는 것입니다.

 

60일 때와 30일 때를 한번 비교해보겠습니다.

 

 

- 왼쪽이 60이고 오른쪽은 30이 됩니다. 확실히 높이의 차이를 보이실 겁니다.

 

 

이제 이렇게 아 다됐구나 하고 실행시키면 안 됩니다. 실행시켜 보시면?로 나와있는 것을 보이실 겁니다. 

 

위에는 잘 나오는데 왜 내껀 안 나오지... 하실 수 있지만 저는 이미 목록을 이미 구성해주는 델리게이트 메서드를 설명하기 위해 미리 구현을 해주었습니다....ㅎ

 

15. 피커뷰의 목록을 구성하기 위한 델리게이트 메서드를 한번 구성해주겠습니다.

 

* 설명

• pickerView(_:titleForRow:) 델리게이트 메서드는 피커뷰의 아이템을 설정해주는 메서드로 각 피커뷰의 아이템 값들에 row을 통해 index를 설정하게 됩니다.

이제 이렇게 data Array을 통해 설정해준 값들을 index를 통해 return 하게 되면 값들이 나오는 것을 확인할 수 있습니다.

 

pickerView를 구현하는 방법을 구성해 보았습니다.

 

공부를 하면서 느낀 것이 UITableView와 상당히 비슷하다고 생각을 하였습니다. :)

 

많은 앱에서 사용하고 있는 만큼 중요하게 넘어가야 될꺼같습니다.