iOS개발하기 #9. Tab View 만들어보기

오늘의 주제

1.Tab View 기반 어플리케이션 만들어보기

아홉 번째 시간입니다.

지난번에는 아이폰 화면에 이미지를 띄워 보았습니다~!

오늘은 약간 응용하여 탭뷰를 만들어 봅시다...ㅎㅎ

자 이제 본론으로 고고 ^^

# MyFirstTabbedApp

지난 번 이미지 띄운 것을 조금 응용해 볼게요~
일단 뭘 시작하려면 프로젝트를 하나 생성해야 겠지요?
이제 프로젝트 정도는 혼자 생성할 줄 아셔야 해요~ㅋㅋ
잘 모르시면 지난 포스팅 한 번 보시고~
참고로 새 프로젝트 만들기 단축키는 커맨드+Shift+N입니다.
이번에는 Tabbed Application 템플릿을 이용해 보겠습니다~

이번 프로젝트명은 MyFirstTabbedApp입니다~!

기본 세팅 해 주시구요~

일단 무작정 실행시켜 봅시다 ㅋㅋ
커맨드 + R
우왕ㅋ 그냥 잘 되네용ㅋㅋㅋ

이것저것 눌러봅시다~
아래 탭 눌러서 화면전화 해봐용~

자.. 이제 본격적으로 초큼 바꿔 보도록 하겠습니다~!
우리 지난번에 썼던 이미지들 한 번 다시 끌어와 볼까요?
짜잔~ 다시 두 이미지 끌어와 봤습니다~

좌측 네비게이션 영역에서 FirstViewController.xib 파일을 클릭하여 아래 IB화면으로 이동합니다.
이미지 뷰 하나를 끌어 넣어서 자신이 가져온 이미지를 화면에 넣어줍시다~

SecondViewController.xib에서도 마찬가지로 이미지를 넣어줍니다~!

그리고 또 한번 실행 ㅋㅋ
커맨드 + R 
어휴~ 이렇게 이쁘게 또 나왔네요 ㅋ

하..지..만... 탭이 두개밖에 없으니 쓸쓸해 보이지 않나요?
탭을 하나 더 추가해 봅시다~!
프로젝트 폴더에서 오른쪽 버튼을 누르고 New File 클릭!
또는, 커맨드+N 입니다!

아래 그림처럼 새 파일 템플릿이 나오면 UIViewController subclass 를 선택합니다.
이말인 즉슨 새로운 뷰 컨트롤러 녀석을 하나 생성하겠단 뜻이겠죠?

Class명은 ThirdViewController 입니다.
subclass of 에는 UIViewController 라고 기입해 줍니다.
UIViewController에서 상속받는 ThirdViewController라는 클래스를 생성한다는 뜻입니다.

이렇게 파일이 저장될 위치를 설정해 준 후(그냥 기본적으로 잘 되어있으니 바꾸지 않으셔도 됩니다) Create !!

짜잔~ 네비게이션 영역에 보면 파일들이 생성이 됩니다.
보기좋게 위치정렬 해주시고~ ThirdViewController.xib파일을 클릭해 줍니다.

저는 이미지 하나와 Label하나를 집어 넣어 보았습니다~
마음껏 하나 꾸며보세요 ㅎ

그리고 실행 해 봅시다~!
커맨드 + R
어...? 그런데 왜 세번째 탭이 안생겼죠? 

당연히 프로그램은 우리가 말해주지 않으면 모릅니다...ㅋㅋㅋ
프로그램에게 새 뷰컨트롤러를 만들어 줬고, 거기에 넣고 싶다고 말해줍시다.
우선 AppDelegate.m이라는 파일로 가 봅시다.
AppDelegate라는 녀석은 어플리케이션 전체를 총괄 관리하는 녀석이라고 생각해 주시면 됩니다.
긴 설명은 차후에 하도록 하고, 일단 코드를 봅시다..!
드디어 코드..!? 두둥!
겁먹지 마세요~ㅋㅋ
아주 간단하게 할거예요.

복사 붙여넣기 신공을 펼쳐 봅시다.
화면에서
-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
라는 메소드로 이동해 봅시다.
이게 뭐냐구요? 메소드가 뭐냐구요?
뭐... 다음에 설명합니다 ㅋㅋㅋ
뭐 이런 날림이 다 있어 하지만 걱정마세요ㅋㅋㅋ
거기서 viewController2에 해당하는 줄을 복사해서 아래줄에 붙여 넣어 봅시다.
뭔가 뻘건게 눈에 띕니다.
뭐가 불만이냐...?
Redefinition of 'viewController2' 라고 나오네요.
같은 이름이 중복선언 되었다고 나와요~
이 세계에서는 이름이 같으면 안되나 봅니다.

그래서 이름을 살짝 바꿔줍니다. viewController3로 바꿔주시구요~
안에 적혀있는 [SecondViewController alloc ]도 ThirdViewController alloc으로.. 뒤에 @"SecondViewController"도 @"ThirdViewController"로 변경해줍니다.
여튼 화면에 보이는 것처럼 바꿔주세요 ㅋㅋ
그런데도 빨간놈이 안없어진다구요?
예... 안없어집니다. 코드 상단에 보면 #import라는 녀석이 보일텐데요, 이녀석도 한 줄 추가해 줍니다. 화면에 보이는 것처럼요~
import는 말 그대로 데려오는건데요~
여기서 이 클래스를 사용하겠다는 의미입니다.
우리가 어렵사리(?) 만들어 놓은 ThirdViewController 클래스를 데려와줍니다 ㅋ

그러고 나서도 뭔가 누런게 우리보고 지껄입니다...
viewController3 라는 녀석이 쓰이지 않았다는 waring 메세지 입니다.
왜 만들어놓고 쓰지 않느냐는 뜻입니다.
우리가 탭에 새로 만든 녀석을 넣어줘야 하므로...
아래에 
self.tabBarController.viewControllers에 우리가 만든 녀석을 살포시 하나 더 넣어줍니다.

그러면 이렇게 말끔한 화면이 탄생할거예요~
두구두구두구두...
실행해 봅시다~!

우왕 ㅋ 새탭이 나타났어요~

 그런데 새로만든 탭에 아무것도 없어요..ㅠㅠ

화면은 나오는데 탭에 이름도.. 그림도 없네요!!
넣어봐 주어야 겠지요?


탭에 넣어줄 이미지를 가져와 줍니다.
투명 바탕을 사용하는 이미지여야 해요~!
png파일로 가져와야 해요.ㅎ
그런데 여기서 파일을 보면 제가 star.png와 star@2x.png 두개를 가져왔지요?
그냥 이름은 아이폰 3GS이하의 기종에서 지원하는 이미지, @2x를 붙이는 것은 아이폰4 이상의 기종(현재 기준)을 지원하는 이미지 입니다.
사실 iOS는 기종별로 지원하는 해상도가 다르기 때문에 좀 더 깨끗한 이미지를 원한다면 좀 더 높은 해상도의 이미지를 넣어주어야 한답니다.
하지만 굳이 그럴 필요없이 고해상도 이미지만 넣어도 큰 무리는 없습니다.
다만 좀 더 느린 사양의 기기에서 구동속도가 조금 느려지는 정도!?
어떻게 하시든간에 선택은 자신의 몫입니다.
저는 그냥 주로 아이폰4 기준의 이미지를 넣는 편입니다.
하나의 이미지만 넣어도 어플 내에서 알아서 인식하고 이미지 크기나 해상도 조절을 합니다.
하나의 이미지만 넣고 싶으면 @2x등을 붙일 필요없이 지난번에 넣었던 것처럼 이미지를 그냥 끌어다 넣으면 됩니다~

일단 제가 이번에 넣은 이미지는 star.png가 30*30의 크기, star@2x.png는 60*60의 크기를 갖습니다. 딱 2배 크기예요~ @2x는 두배 크기라는 말씀..^^

추가된 2개의 파일은 첨부파일로 올려놓았습니다.
여튼 두 파일을 끌어다 놓습니다~

stars.zip

그리고 FirstViewController.m 파일로 와서 빨간색으로 표시된 영역의 두줄을 복사해둡시다.

그리고 우리가 만든 세번째 뷰컨트롤러 ThirdViewController.m에 와서 붙여넣고 아래 스크린샷처럼 내용을 살짝 바꿔줍시다~!

그리고 에러가 없다면 실행-!!
짜잔~!
드디어 나왔네요 ㅋㅋㅋ 이름과 그림 ㅋㅋ 

후아후아~
여기까지 잘 따라오셨나요?
다음에는 무슨 이야기를 해볼까요?
사실 여기서 다음에 다음에 한다~
이렇게 써놓은거...
귀찮아서 그런거 절대 아닙니다 ㅋㅋㅋ
여기서 쓰면 한도없이 길어져서 따로 챕터를 만들까 하는데, 먼저 필요한 부분 댓글로 남겨주시면 하루이틀 내로 포스팅 해드릴게요~
소통에 게을리 하지 않겠습니다 ㅋㅋㅋ
 
그럼 다음에 뵙도록해요~!

by yagom

p.s 제 포스팅을 RSS 피드로 받아보실 수 있습니다.

RSS Feed 받기 

↓↓↓저 열심히 썼는데 추천 한방 꾹 눌러주고 가시는 건 어떨까요? ^~^ 사랑합니다~ ↓↓↓