[Swift/iOS] 기본 알람어플 만들기(1) - Tab Bar, Table View, Tab bar Title, Tab bar image, Tab bar Color, Main Interface

Tab Bar, Table View, Collection Veiw, DateFormatter를 연습을 위해 아이폰 기본 어플을 따라서 만들어보려고 한다

 

 

 

 

메뉴구성부터 보면 하단 Tab bar가 "세계 시계", "알람", "스톱워치", "타이머"로 되어 있다

테이블 뷰가 하단까지 도달하지 않으면 검은 바탕으로 투명해보이지만, 하단까지 도달하면 불투명한 모습을 확인할 수 있다

선택된 뷰는 orange 컬러(?)로 설정 되어 있다

 

 

 

어플리케이션 실행 시 보여줄 스토리보드 설정하기

프로젝트 생성 후 기본으로 설정되어 있는 Main 스토리보드 말고, 새로운 스토리보드를 생성해서 시작을 해보려고 한다

Command + N 또는 File - New - File 메뉴를 통해서 새로운 파일 생성창을 띄워준다

iOS - User Interface - Storyboard를 클릭한 후 'Next',
경로와 이름을 적절하게 정해준 후 생성해준다 (파일명은 Intro로 설정했음, 자유롭게 설정)

 

파일을 생성했으면, 어플리케이션을 실행했을 때 처음으로 보여줄 스토리보드를 변경해주어야 한다

Project Navigator(command + 1)에서 최상단 project명을 클릭한 후 메인 화면 왼쪽의 project and target list에서 targets의 프로젝트 명을 클릭해준다

그 다음 Deployment Info의 Main Interface에서 새롭게 변경할 스토리보드의 파일명을 입력해준다

대소문자를 구분하니 유의하지 주의하자

 

여기서 끝이 아니다..

Project Navigator 최하단에 있는 Info.plist파일을 열고 트리를 다 열면 마지막으로 StoryBoard Name이라는 key를 볼 수 있다

여기서도 value를 스토리보드 이름으로 바꿔주자

 

Tab Bar Controller 만들기

스토리보드를 선택한 후 기본으로 생성되어 있는 View controlle를 삭제하고,

그 다음 Object Library에서 Tab Bar Controller를 Interface Builder로 드래그 앤 드랍해서 생성해주자

 

아래와 같이 Root View controller와 2개의 child View가 기본적으로 생성된 것을 볼 수 있다

Root View controller의 Attributes inspector에서 Is Initial View Controller에 체크해주자

체크해주지 않으면 시뮬레이터에서 빈화면만 볼 수 있다

 

child view controller 연결하기

알람 어플은 4개의 탭을 가지고 있는데, 2개는 기본 view, 2개는 table View형태를 가지고 있다

그래서 기본 view는 그대로 두고 table view 2개를 더 생성해주어야 한다

Tab Bar Controller를 만든 것 처럼, Table View Controller를 2개 더 만들어주자

그 다음 Tab Bar Controller에서 새롭게 connect할 Controller로 control을 누른채 드래그 앤 드랍을 해보자

옵션 창에서 view controllers(Relationship Segue)를 클릭하면 3번째 탭으로 이어진 것을 볼 수 있다

같은 작업을 반복해서 4개의 tab을 만들어주자

 

편의를 위해서 각 child View Controller의 Attributes Inspector에서 title을 "world"(Table View), "alram"(Table View), "stopwatch", "timer"로 설정해주었다

 

tab bar의 title 설정하기

각 child view의 하단 tab bar를 클릭한 후 Attributes Inspector에서 Title을 각각 "세계 시계", "알람", "스톱워치", "타이머"로 설정해주자

시뮬레이터로 확인해보면 아래와 같이 순서가 다를 수 있는데, Root View Controller에서 드래그로 순서를 쉽게 변경할 수 있다

 

Tab Bar에 icon 이미지 설정하기

별도의 이미지를 넣을 수도 있겠지만 기본으로 제공하는 SF symbol을 사용해보자

각 child의 Tab Bar Attributes Inspector에서 Image를 설정해주면 된다

globe, alarm.fill, stopwatch.fill, timer를 사용하면 아래와 같이 기본 어플의 탭바 구성을 만들 수 있다

 

선택된 Tab Bar의 title, image 색상 설정하기

기본 어플에서 선택된 탭의 색깔이 오렌지 색깔인 것으로 보인다
Root View의 Tab Bar를 클릭한 후 Tab Bar Attributes Inspector에서 Image Tint를 System Oragne Color로 바꾸면 위의 이미지처럼 색깔을 바꿔 줄 수 있다

 

 

다음 포스팅에는 세계 시계 탭에 table View를 설정해보려 한다

(목표....)