TabBar와 NavigationBar의 조합

아이폰 어플리케이션의 상당 수가 UITabBarController 와 UINavigationViewController를 이용합니다.

UITabBarController는 메인 메뉴를 선택하는 역할을 주로 담당하고

UINavigationViewController는 해당 기능 안에서의 하위 기능으로의 뷰간 전환 시에 주로 이용됩니다.

필자 또한 리딩워치를 개발하면서 TabBar와 NavigationBar를 이용하여 구현하였습니다.

필자가 아이폰 프로그래밍 초보시절 (지금도 초보이긴 마찬가지이긴 합니다만) 바로 이 TabBar와 NavigationBar의 조합 방법을 몰라서 약간 해맨 기억이 있습니다. 애플의 가이드와 구글링을 통해 방법을 찾았었는데, 여러가지 방법이 있겠지만, Interface Bulder를 최대한 이용하는 방법으로 소개해 볼까 합니다.

우선 필자가 이 글에서 샘플로 사용할 뷰의 구조는 다음과 같습니다.

Tab1	NavView1_1	touch button	NavView1_2
Tab2	NavView2_1	touch button	NavView2_2
Tab3	NavView3_1	touch button	NavView3_2
Tab4	NavView4_1	touch button	NavView4_2

구조는 간단합니다. 탭바가 하나 있고 탭바의 아이템으로 4개의 탭이 있습니다.

Tab1을 선택하면 NavView1_1이 실행되도록 합니다. NavView1_1에는 버튼을 하나 두고 그 버튼을 클릭하면 NavView1_2로 Navigation되도록 합니다.

Tab2을 선택하면 NavView2_1이 실행되도록 합니다. NavView2_1에는 버튼을 하나 두고 그 버튼을 클릭하면 NavView2_2로 Navigation되도록 합니다.

Tab3을 선택하면 NavView3_1이 실행되도록 합니다. NavView3_1에는 버튼을 하나 두고 그 버튼을 클릭하면 NavView3_2로 Navigation되도록 합니다.

Tab4을 선택하면 NavView4_1이 실행되도록 합니다. NavView4_1에는 버튼을 하나 두고 그 버튼을 클릭하면 NavView4_2로 Navigation되도록 합니다.

애플의 가이드에 의하면 네비게이션뷰컨트롤러 보다 탭바컨트롤러를 상위에 두도록 권고하고 있습니다.

나중에 알게 되었지만 뷰컨트롤러의 구조상 그렇게 밖에 될 수 없습니다. 

구현의 순서는 다음과 같이 진행해 보겠습니다.

1. 프로젝트 생성

2. 필요한 뷰클래스 생성 및 구현 (4개 뷰 모두)

3. Interface Bulder를 이용하여 탭바에 연결

4. 빌드 앤 런

그럼 프로젝트 생성을 먼저 시작하겠습니다.

1. Xcode를 실행하여 Fie에서 New Project를 선택합니다.

2. iPhone OS Application의 Tab Bar Application을 선택합니다.

3. 적당한 폴더를 선택하고 프로젝트 이름을 TabNav로 입력하고 프로젝트를 생성합니다.

다음은 각 탭에 연결될 네비게이션뷰 클래스 8개를 우선 만들어 보겠습니다.

1. Groups & Files의 Classes 에서 마우스 오른쪽 버튼 클릭하여 New File을 선택합니다.

2. UIViewController subclass 를 선택하고 With XIB for user interface 체크를 확인하고 Next버튼을 클릭합니다.

3. 파일이름을 NavView1_1.m을 입력하고 헤더파일 포함 체크를 확인 후 OK 버튼 클릭합니다.

4, 위 1~3과정을 반복하여 NavView1_2, NavView2_1, NavView2_2, NavView3_1, NavView3_2, NavView4_1, NavView4_2를 각각 생성합니다.

5. 위에서 생성된 Class 안의 xib 파일 8개를 모두 Resources로 드래그드롭합니다.

여기까지 필요한 뷰클래스는 모두 생성하였습니다.

NavView1_1, NavView2_1, NavView3_1, NavView4_1에서 버튼을 터치하면 실행될 Instance Method pushView를 다음과 같이 각 소스 파일에 선언과 정의합니다.

// NavView1_1.h

#import <UIKit/UIKit.h>

@interface NavView1_1 : UIViewController {

}

-(IBAction)pushView:(id)sender;

@end

#import "NavView1-1.h"

@implementation NavView1_1

-(IBAction)pushView:(id)sender
{
NavView1_1 *subview = [[NavView1_1 alloc] init];
subview.title = @"NavView1-1";
[self.navigationController pushViewController:subview animated:YES];
[subview release];
}

위와 같은 방법으로 NavView2_2, NavView2_3, NavView2_4에 대해 pushView 메서드를 선언 및 정의합니다.

수정된 모든 파일이 저장되도록 빌드를 한 번 해줍니다.

그리고 이제 부터 Interface Builder 작업을 해보겠습니다.

먼저 Groups & Files의 Resources 에서 MainWindow.xib를 더블클릭하여 Interface Builder를 실행합니다.

1. MainWindow.xib 창에서 Tab Bar Controller를 선택합니다.

2. Command+1 키를 눌러 Attribute Inspector 를 띄워 탭 항목을 아래와  같이 구성합니다.

  Class 를 Navigation Controller로 변경하는 것을 잊지 마시기 바랍니다.

3. 다시 MainWindow.xib 창에서 View Mode를 as Columns로 변경합니다.

4. 각 탭에 대해 네비게이션컨트롤러의 View Controller를 선택하고 Command+1를 눌러 Attribute Inspector를 띄웁니다.

5. NIB Name을 NavView1_1로 설정합니다.

6. Command+4를 눌러 Identity Inspector를 띄워 해당 Navigation View Controlloer의 Class를  NavView1_1로 변경합니다.

7. 위 5~6번 항목을 반복하여 각 탭의 NIB Name과 Navigation View Controlloer의 Class를  각각 NavView2_1, NavView3_1, NavView4_1로 변경합니다.

8. 수정된 MainWindow,xib를 저장합니다.

이제 실제 뷰 작업을 진행하겠습니다.

1. Xcode로 돌아가서 NavView1_1.xib를 더블클릭합니다.

2. 해당 뷰가 무엇인지를 알기 위해 뷰의 이름을 나타내는 레이블과 버튼하나를 추가합니다.

3. Touch me 버튼에 대해 Touch up inside를 File's Owner로 컨트롤 드래그 드롭하여 pushView 메소드와 연결합니다.

4. 변경된 내용을 저장합니다.

5. 위 1~4과정을 반복하여 NavView2-1.xib, NavView3-1.xib, NavView4-1.xib 에 대해 구분 레이블과 버튼을 추가하고 버튼에 대해 pushView 메소드와 연결한 다음 저장합니다.

6. 다시 Xcode로 돌아가서 NavView1_2.xib를 더블클릭합니다.

7. 해당 뷰가 무엇인지를 알기 위해 뷰의 이름을 나타내는 레이블 하나를 추가합니다.

8. 변경된 내용을 저장합니다.

9. 위 6~8과정을 반복하여 NavView2-2.xib, NavView3-2.xib, NavView4-2.xib 에 대해 구분 레이블을 추가한 다음 저장합니다.

여기까지 모두 끝났습니다.

계획대로 작업되었는지 Xcode로 돌아가서 Build And Run를 해봅니다.