티스토리 뷰

Mobile/ios

[ios] ios 9: Tab Bar

춘햄 2022. 12. 17. 14:14

iOS 에서 하나의 앱에 여러 화면(View)를 넣을 때 일반적으로 많이 사용하는 것이 Tab Bar 다. 탭 바는 하단에 각각의 탭이 존재하고 이를 클릭할 때마다 다른 View를 보여주는 객체이다.

 

이번 포스팅에서는 DatePicker와 ImageView를 실습할 때 사용했던 스토리보드와 View를 가져와서 Tab Bar에 삽입하여 3가지의 View를 가진 어플을 만들어보려고 한다.

 

바로 들어가보자.


우선, 아무 객체도 추가하지 않은 빈 스토리보드 화면에서 아이폰 객체 하나를 전부 드래그 하여 선택한 후, editor -> embed in -> Tab Bar Controller 를 선택한다.

 

선택하고 나면 아래와 같이 처음에는 없던 탭 바 컨트롤러가 하나 추가되면서 자동으로 존재하던 뷰가 탭으로 추가된다.

 

이제 이전에 만들었던, Image View 와 Date Picker 프로젝트 폴더에 가서 각 프로젝트의 ViewController.swift 파일을 구분할 수 있는 이름으로 변경하여 Tab Bar 프로젝트에 추가한다.

 

또한 각 프로젝트 폴더 -> Base.lproj 폴더 내부의 스토리보드 파일을 Open 하여 해당 객체들을 모두 선택 후 복사하여 Tab Bar 프로젝트의 스토리보드에 아래와 같이 추가한다.

각 아이폰 뷰를 추가했으면 반드시 해당 뷰가 올바른 swift 소스파일에 링크되어 있는 지 확인해주고, 만약 링크되어 있지 않다면, 해당 뷰를 클릭 -> Custom Class 의 Class를 아래와 같이 알맞게 맞춰주어야 한다.

 

마지막으로 Tab Bar Controller가 추가된 View들을 가지도록 Command 키를 누르고 연결시켜주기만 하면, 굉장히 간단하게 탭 바에 연결시켜 하나의 앱에서 각 뷰를 전환할 수 있게 된다.

 

이전 실습에서 사용했던 View들을 연결시킨 것이 전부이기 때문에 이번 포스팅에서는 딱히 코드를 적을게 없다. 

 

그래도 아쉬우니, 처음에 보여질 원래 View에 이미지 뷰를 하나 추가하고 이미지를 넣어줬다.


 

끝!

'Mobile > ios' 카테고리의 다른 글

[ios] ios 11: Table View Controller  (0) 2022.12.20
[ios] ios 10: Navigation Controller  (0) 2022.12.19
[ios] ios 8: Page Control  (0) 2022.12.17
[ios] ios 7: MapView  (0) 2022.12.15
[ios] ios 6: webView  (0) 2022.12.15
Comments