[Xcode] Tabbar Controller - Summary

 

 

Tab Bar Controller 

말 그대로 하단에 탭바가 있어서 터치 선택하면

해당 세그로 이어진 뷰가 위로 push? 되는 것?

 

first input = 들어오는 걸 push

last out = 나가는 걸 pop이라고 함.

 

RootViewController > Root View를 기본화면으로 갖고 있고

그 Root View가 기본화면으로 보임.

기본 화면 위에 다른 ViewController가 쌓여있고..

 

빼가면 ViewControllerC가 RootView에 보이고…

 

 

---

 

* Create New Project \ iOS \ App \

 

 

 

* ViewController.swift   \ 우클릭 'delete'

* Main.storyboard  \  Document Outline \ All View 최상위 선택 후, delete 버튼으로 삭제

- 디폴트로 설정되어있던 Entry Point(시작 화살표) 는 나중에 Tab Bar Con이 가져야함

- 기존 디폴트로도 써도 되지만 실무 가면 전부 커스텀해서 쓰니까 대충...

 

* Main.storyboard \ Show Library '+'

Object : 'Tabbar Controller'   선택해서 Storyboard로 드래그.   Tabbar Con 1개 & item1,2 생성 완료.

 

* Document Outline : 'item1,2'  최상위 선택 후, delete 버튼으로 삭제

 

* Show Library '+'

Object : View Con 1개, Table Con 1개, View Con 1개 -  순서대로 추가

 

* Storyboard

3번째 View Con WebKit 무시

 

 

 

* Tabbar Con 선택 후 우클릭 드래그해서 순차적으로 Controller 마다

'Relationship Segue : view controllers' 걸기   ( Manual Segue : Show 말고!)

* 이때 가장 처음으로 연결한 View Con이 Run하면 가장 먼저 뜨는 View가 됨.

3번째 View Con WebKit 무시

 

 

 

* View Con 배경색 줘서 구분하기

해당 Con 적당히 상위 누르고, 우측 Attribute Inspector 보면

가장 큰 Section인 'View'의 'Background'를 변경해줘야함.

3번째 View Con WebKit 무시

 

 

* Table Con 같은 경우, 상단에 다른 설정 Section들이 먼저 올라와있으니 

Table View - Background 말고

꼭 하단의 View의 Background를 변경해야 Stroyboard에도 보임. (쓰면서도 Table View \ bg 바꾸고 있었음)

 

3번째 View Con WebKit 무시

 

 

 

* Run 하면 Entry Point(시작 화살표)가 없어서 오류.

Storyboard \ Tab Bar Con \ Attribute Inspector \ ☑️ Is Initial View Controller 선택

 

 

Run

주황색 View Con을 가장 먼저 연결했으니까 주황색 화면이 떠야함.

tab bar를 선택하면 시뮬 스샷에선 이런 느낌.

 

 

 

Tab bar 쓰는게 좀 더 보이도록 세팅

(현재까진 아무런 ViewController.swift 없어서 연결된 소스도 없는게 맞음)

 

1) View Con 여러개 더 추가해서 Tab Bar Con과 Segue 연결

2) Tab Bar item 제목,icon 변경

Image는 'SF Symbols' 에서 가져다 사용.

 

 

3) 첫번째 View Con에 UIImageView, UILabel 추가

4) 두번째 TableView Cell 에 커스텀해서 UIImageView, UILabel 추가

5) 네번째 Navigation Con 추가해서 버튼 누르면 다른 화면 뜨도록 추가

 

 

 

(두번째 Table Con의 custom cell은 소스에서 setting하지 않으면 Run해도 안 뜨는게 맞음.)

5) Navi Con 추가하기 직전, 다른 건 추가된 Storyboard

 

 

일단 Run하고 시뮬 스샷

 

 

5) 4번째 View Con (with 'Button Another')을 선택.

    Xcode 메뉴바 \ Editor \ Embed in \ Navigation Controller 선택.

(Library에서 추가하고 연결하고 뭐 글케 할 수도 있고...)

 

 

 

* Tab Bar Con과   Sub1 Con 사이에 Navi Con이 추가됨.

Sub1 Button을 누르면 띄울 View Con 추가

 

 

* Button 우클릭 드래그해서 Action Segue로 View Con 연결. 

 - Show : View가 [좌측←우측] 슬라이드 조회.

 - Show Detail

    Present Modally

   Present As Popover : View가 [하단↑상단으로] 슬라이드 조회.

label에서 줄바꿈은 속성 Line : 2 주고,

작성 시 control(^) + Enter 치면 개행 (실무에선 이렇게 안하겠지..)

 

 

 

* Run하고 작동 영상

로컬에서 시뮬 녹화본은 정상적으로 잘 보이는데

티스토리 업로드 후엔 영상 자체가 뚝뚝 끊겨보인다. 몰룸;

아무튼 Tab Bar 정상 작동!

 

 

 

 

 

까먹고 미래에서 왔을 나에게

TabbarApp.zip

0.03MB