Swift 11주차 - 탭 바 컨트롤러를 이용해 여러개의 뷰 넣기

Swift 11주차 - 탭 바 컨트롤러를 이용해 여러개의 뷰 넣기

 

이번 주차에서는 앞에서 만들어 놓았던 예제를 활용해 초기 화면과 세개의 화면을 탭 바 컨트롤러를 이용해 구성해볼 예정이다.

 

 

목차

 

 

탭 바 컨트롤러

 

앞에서 배운 예제들은 해부분 '하나의 뷰'만 보여주었다. 하지만 상황에 따라 하나의 뷰가 아니라 다양한 내용, 즉 여러개의 뷰를 보여줄 때가 더 많다. 이를 위해 여러개의 뷰와 더불어 뷰를 선택해 이동할 수 있게 해주는 컨트롤러가 필요하다.

 

그 역할을 하는 것이 바로 탭 바 컨트롤러이다.

이러한 탭 바를 이용하는 대표적은 앱에는 아이폰의 시계, 음악, 전화 앱 등이 있다.

 

 

 

탭 바 컨트롤러 앱을 위한 기본 환경 구성하기

 

먼저 스토리보드에 탭 바 컨트롤러를 추가하자.

 

스토리보드의 아이폰 화면 상단에 ViewController 버튼을 클릭한 후 메뉴에서 Editor -> Embed In -> Tab Bar Controller 를 선택하자.

 

 

 

그러면 위 화면처럼 처음에는 없던 탭 바 컨트롤러가 추가된 모습을 볼 수 있다.

 

 

오른쪽의 아이폰 화면에서 아래 탭 바 아이콘을 클릭한 후 오른쪽 인스펙터 영역에서 Attributes inspector를 열어보면 System Item이 Custom으로 되어 있다.

 

 

이 System Item을 아래 사진처럼 Top Rated로 바꿔주자.

 

 

그러면 위 사진처럼 탭 바의 아이콘이 변한 것을 확인할 수 있다.

 

 

이제 오른쪽의 뷰 컨트롤러를 선택한 후 드래그하여 위쪽으로 옮겨 놓자.

이는 뷰 컨트롤러를 3개 더 추가하기 위해 공간을 확보하기 위함이다.

 

 

 

탭 바에 뷰 추가하기

 

먼저 이미지 뷰의 이미지를 추가하자.

 

앞으로 추가할 3개의 뷰 컨트롤러는 새로 만들지 않고 앞 장에서 만들어 놓은 예제를 그대로 사용할 것이다.

 

먼저 파인더를 이용하여 3장에서 만든 Image View 폴더를 열자.

 

 

해당 폴더에서 전구 이미지인 'lamp_on.png' 파일과 'lamp_off.png' 파일을 프로젝트에 추가하자.

 

 

 

스위프트 파일도 그대로 사용하자. ViewController.swift 파일을 선택한 후 '⌘ + C' '⌘ + V'를 눌러 파일을 복사 후 같은 자리에 바로 붙여넣어 주자.

 

 

그런 다음 파일명을 ImageViewController.swift로 수정하자.

 

 

ImageViewController.swift 파일을 내비게이터 영역에 추가하자.

 

 

그런데 ImageViewController.swift 파일을 열어보면 아래 사진처럼 에러가 발생한 것을 볼 수 있다.

 

이 에러는 파일명과 클래스명이 다르기 때문에 발생한 것이므로 클래스명을 ImageViewController로 수정하고 잠시 기다리면 에러가 사라진다.

 

 

 

 

 

 

이제 뷰 컨트롤러를 복사해보자.

 

다시 ImageView 폴더로 돌아가서 Base.lproj 폴더 안으로 들어가면 'Main.storyboard' 파일을 볼 수 있다.

 

이 파일을 더블 클릭하여 실행하자.

 

 

 

 

아래 사진처럼 새로운 스토리보드 화면이 나타나면 ViewController 버튼을 클릭한 후 ⌘ + C를 눌러 복사하자.

 

 

 

프로젝트로 돌아와 스토리보드 상에서 스토리보드의 빈 곳을 클릭한 후 ⌘ + V를 눌러 붙여 넣으면 복사한 뷰 컨트롤러가 보이게 된다.

 

그리고 복사한 뷰 컨트롤러를 보기 좋게 오른쪽으로 옮기자.

 

 

뷰 컨트롤러를 선택한 후 인스펙터 영역에서 Identity inspector 버튼을 클릭하면 Class가 ViewController로 되어 있는 것을 것이다.

 

Class를 ImageViewController로 선택하여 뷰 컨트롤러와 ImageViewController.swift 파일을 연결하자.

 

 

이제 뷰 컨트롤러에 탭 바를 적용해보자.

 

Tab Bar Controller라고 적힌 뷰 컨트롤러를 마우스 오른쪽 버튼으로 클릭한 후 방금 복사한 뷰 컨트롤러 안의 빈 공간에 드래그한 후 마우스 버튼에서 손을 때면 아래처럼 검은창이 나타나게 된다.

 

해당 창에서 Relationship Segue의 view controllers를 선택하자.

 

 

 

 

이렇게 하면 뷰 컨트롤러가 화살표로 연결되게 된다.

 

 

이것은 세그웨이(Segue)가 제대로 추가되었다는 의미이다.

 

이렇게 화살표가 제대로 표시되면 화면 전환이 잘 이루어질 것이다.

 

 

 

다음으로 데이트 피커의 스위프트 파일을 추가해보자.

 

앞에서 수행한 방법과 동일하게 ViewController.swift 파일을 복사 붙여넣기 한 후 파일명을 DateViewController.swift로 수정하고 프로젝트에 추가하자.

 

 

 

앞에서와 마찬가지로 파일명과 클래스명이 다르기 때문에 에러가 발생한다.

 

클래스명을 DateViewController로 수정한 후 잠시 기다리면 에러가 사라진다.

 

(아래 selector 부분의 클래스명도 DateViewController로 수정해야 한다.)

 

 

 

 

이제 다시 뷰 컨트롤러를 복사해보자.

 

DatePicker 폴더 안의 Base.lproj 폴더로 들어가면 'Main.storyboard' 파일이 있는데 이 파일을 더블클릭하여 실행하자.

 

스토리보드 화면이 나타나면 ViewController 버튼을 클릭한 후 ⌘ + C를 눌러 복사하자.

 

 

프로젝트로 돌아와 빈 곳을 클릭한 후 ⌘ + V를 눌러 붙여 넣은 후 복사한 뷰 컨트롤러를 아래쪽으로 옮기자.

 

이 뷰 컨트롤러를 선택한 후 Identity inspector 버튼을 클릭하여 Class를 DateViewController로 선택하여 뷰 컨트롤러와 DateViewController.swift 파일을 연결하자.

 

 

 

이제 뷰 컨트롤러에 탭 바를 적용해보자. Tab Bar Controller라고 적힌 뷰 컨트롤러를 마우스 오른쪽 버튼으로 클릭한 후 방금 복사한 뷰 컨트롤러 안의 빈 공간에 드래그한 후 마우스 버튼에서 손을 때면 아래처럼 검은창이 나타나게 되는데 여기서 view controllers 를 선택하자.

 

 

 

 

위와 같은 방법으로 PickerView 스위프트 파일과 스토리보드를 가져오자.

 

(방금 했던 작업 그대로이기 때문에 따로 설명하지는 않겠다.)

 

 

 

이제 탭 바의 아이콘 모양을 수정해보자.

 

이미지 뷰 컨트롤러의 탭 바 아이콘을 클릭한 상태에서 오른쪽 인스페터 영역의 Attributes inspector 버튼을 클릭한 후 System Item을 Bookmarks로 수정하자.

 

 

 

마찬가지로 데이트 피커 뷰 컨트롤러의 탭 바 아이콘을 클릭한 상태에서 System Item을 Recents로 수정하자.

 

피커 뷰는 Search로 수정했다.

 

(본인이 원하는 다른 것을 선택해도 된다.)

 

 

 

시뮬레이터를 실행해보면 아직 아무런 작업을 하지 않아 첫 화면은 흰 화면이 나타나게 된다.

 

 

화면 아래 탭 바 아이콘을 클릭해보면 각각의 기능들을 실행할 수 있다.

 

 

 

 

첫 화면을 위한 스토리보드 수정하기

 

이제 초기 화면을 구성해보려고 한다.

 

이미지를 사용할 예정이므로 먼저 이미지 파일을 추가하자.

 

 

 

필자는 대학교 로고 사진을 가져왔다.

 

 

초기 화면의 뷰 컨트롤러에 이미지 뷰를 추가하자.

 

그리고 오른쪽의 인스펙터 영역에서 Attributes inspector 버튼을 클릭한 후 image를 방금 추가한 이미지 파일로 선택하자.

그러면 코드 수정 없이 이미지 뷰에 이미지를 나타낼 수 있다.

 

 

이번에는 화면 상단에 각각의 항목으로 이동할 수 있는 버튼들을 추가하자.

 

 

 

 

 

버튼으로 뷰 전환을 위한 함수 추가하기

 

이제 각각의 버튼에 대한 액션 함수를 추가하자.

 

 

 

액션 함수의 이름은 각각 btnMoveImageView, btnMoveDatePickerView, btnMovePickerView로 설정하고 타입은 모두 UIButton으로 설정하자.

 

 

위 사진처럼 각각의 액션함수가 생성된 것을 확인할 수 있다.

 

 

 

버튼으로 뷰 전환하기

 

마지막으로 각 버튼을 클릭하면 뷰가 전환될 수 있도록 위에서 추가한 함수를 수정해보자.

 

 

위 사진처럼 간단하게 버튼을 클릭했을때 탭 바 컨트롤러의 인덱스를 수정하게 하면 된다.

 

 

시물레이터를 실행하보면 아래처럼 모든 기능들이 정상적으로 작동하는것을 확인할 수 있다.