[iOS/Three20] TTNavigator with UITabBarController

TTNavigator와 UITabBarController, 즉 탭바와 네비게이션 타이틀을 가진 UI를 만들기 위한 기본적인 내용을 정리해 본다. 정확한 소스는 샘플의 TTNavigatorDemo를 참고바란다.

탭바를 만들기 위해 TabBar 프로젝트로 생성할 필요는 없다. 아주 약간의 추가 만으로 TTNavigator 만으로 이루어진 UI에 탭바를 붙일 수 있다. 물론 인터페이스빌더를 이용해서 탭을 구성하는게 편할 수도 있지만 나 처럼 코딩하는게 차라리 편한 사용자도 있다는 것을 염두해 주길 바란다.

탭바를 붙이기 위해선 일단 UITabBarController를 상속받은 클래스를 하나 만들어야 된다. 이름은 예제에서는 TabBarController라고 지었다. 클래스 내용 중 구현해야 될 것은 viewDidLoad를 오버라이드 하는 것 뿐이다.

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setTabURLs:[NSArray arrayWithObjects:
        @"tt://tab1",
        @"tt://tab2",
        @"tt://tab3",
        ...
        nil]];
}

setTabURLs는 UITabBarController에서 정의되어 있지 않기 때문에 빌드 시 warnning이 발생할 수 있지만 무시해도 된다. 소스에서 볼 수 있듯이 차례대로 탭바 아이템 하나 당 연결될 URL을 설정해 주는 것 만으로 끝이다.

다음은 실제로 탭바를 붙여야 한다. 기존에 네비게이션 URL을 등록할 때 처럼 어플리케이션 딜리게이트(샘플에서는 AppDelegate.m) 소스에서 applicationDidFinishLaunching 내용 일부를 수정하고 추가하자.

[map from:@"tt://tabbar" toSharedViewController:
    [TabBarController class]];

tt://tabbar 가 탭바를 가리키도록 설정했다.

이 외에 각 연결된 URL(위 예에서는 tt://tab1 식으로 붙여진 URL)에 각각의 뷰컨트롤러를 연결해 줘야 하지만 이 부분은 이전에 설명한 TTNavigator기초 예제와 동일하니 생략하겠다.

다음은 시작URL을 탭바로 설정한다.

if (![navigator restoreViewControllers]) {
    [navigator openURLAction:[TTURLAction 
        actionWithURLPATH:@"tt://tabbar"]];
}

처음 띄울 URL을 그냥 탭바로 바꾼게 전부다. 이렇게 하기만 하고 앱을 빌드하고 실행시켜보면 탭이 설정한 갯수 만큼의 버튼을 가진 채로 화면 아래에 붙는다. 기본적으로 각 연결된 뷰컨트롤러의 타이틀(title)이 탭 아이템의 제목으로 설정 된다.

다음은 탭의 각 아이템을 설정하는 부분인데, 이 부분은 기존의 UITabBarController를 이용하는 방식대로 각각 연결된 뷰컨트롤러의 소스를 고쳐야 한다. 제목을 설정하는 부분(self.title = 거시기...) 근처에다 만들면 될 것 같지만 적당히 뷰가 만들어지면 불리는 코드에 알아서 붙이자.

UIImage* image = [UIImage imageNamed:@"tabicon.png"];
self.tabBarItem = [[[UITabBarItem alloc] 
    initWithTitle:@"TABTITLE" image:image tag:0] 
        autorelease];

기존에 `UITabBarController`를 쓰던 것과 비슷한 부분 같다. 즉, 나머지는 iOS SDK의 공식 문서에서 탭바에 관련한 부분을 찾아보면 될 것 같다는 의미다.

여기까지가 끝이다. 단순한 몇 줄의 코딩만으로 이런 UI가 나와준다니 기분 좋은 일이다. :-)