Customizing UITabBarController & TabBar 숨기기

UIKit의 UITabBarController는 분명 아주 편리한 Controller임에 틀림이 없다.

하지만 그라데이션이 적용된 검은 바(Bar)를 다른 색상으로 변경할 수 없고 이쁘게 디자인한 이미지는 음각처리를 해버리며, 글자 크기는 고정되어 있다는 단점이 있다. 디자이너들은 분명 이런 부분이 불만일테고, 개발자는 쉽게 쓸 수 있는 UITabBarController를 포기하거나 힘들게 Customizing 할 수 밖에 없다.

더욱이 UITabBarController의 tabBar에 addSubview나 insertSubview 하는 방법은 iOS4까지 유효하였으나 iOS5에서는 아래와 스크린샷과 같이 적용한 이미지는 사라지고 TabBar만 덩그러니 보여지게 되는 문제점이 있다. 실제로 여러 앱들이 이런 현상이 있었고 아직도 고쳐지지 않은 앱들이 많이 존재한다.

그럼 방법이 없는 것일까? 이 때문에 ‘UITabBarController를 내 손으로 만들어야하는가?’ 라는 생각에 한숨만 나올 것이다.
하지만 아래와 같이 구현하면 UITabBarController를 사용할 수 있으며 이미지도 올릴 수 있어 쉽게 사용이 가능할 것이다.

1. UITabBarController를 상속받는 Class를 생성한다.

2. UITabBarController는 UIViewController를 상속받기 때문에 일반적으로 사용하는 ViewController와 같은 구조를 가지고 메소드가 호출된다.

따라서 loadView나 viewDidLoad에서 TabBar 영역을 대신할 View를 하나 생성하여 self.view에 addSubview한다. TabBar의 높이는 49 픽셀이다.

- (void)loadView    {
    [super loadView];

    _tabBarBackView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 480.0f - 49.0f, 320.0f, 49.0f)];
    _tabBarBackView.backgroundColor = [UIColor clearColor];

    [self.view addSubview:_tabBarBackView];
    [_tabBarBackView release];
}

3. 위와 같이 addSubview한 View에 버튼 혹은 이미지를 addSubview 하고 이벤트를 정의하면 Customizing TabBar의 구현은 끝이다. (너무 간단한가;)

4. 이제 가장 중요한 탭바 숨기기다. 일단 탭바 숨기기 로직을 수행할 메소드를 선언한다. 필자는 편하게 이를 구현하기 위해 BOOL 형식의 전역변수를 선언하고 이를 또 property에 정의하여 getter, setter가 구현되도록 하였다. (“.” 연산자가 정말 편하긴하다..) 중요한 부분은 빨간색의 글자 부분이다. UITabBarController의 subview 중 UITabBar class를 찾아서 그 자체가 아닌 그 다음 index에 위치한 subview의 frame을 조절하는 것이다. 이유는 subview 들의 Log를 출력해보면 쉽게 알 수 있을 것이다. 코드는 아래와 같다.

// interface
@interface YBTabBarController : UITabBarController  {
    BOOL _isHideenTabBar;
}

@property (nonatomic, assign) BOOL isHideenTabBar;

@end

// implementation
- (void)setIsHideenTabBar:(BOOL)isHideenTabBar  {
    _isHideenTabBar = isHideenTabBar;

    UIView *tabBarView = nil;
    for (UIView *view in self.view.subviews)    {
        if ([self.view.subviews count] < 2) {
             return;
        }

    tabBarView = ([[self.view.subviews objectAtIndex:0] isKindOfClass:[UITabBar class]])? [self.view.subviews objectAtIndex:1] : [self.view.subviews objectAtIndex:0];
    }

    if (tabBarView != nil) {
       CGRect rect = _tabBarBackView.frame;
       CGFloat pointY = (_isHideenTabBar)? 480.0f : 480.0f - 49.0f;

       tabBarView.frame = (_isHideenTabBar)? self.view.bounds : CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y, self.view.bounds.size.width, self.view.bounds.size.height - self.tabBar.frame.size.height);
       _tabBarBackView.frame = CGRectMake(rect.origin.x, pointY, rect.size.width, rect.size.height);
    }
}

5. 이제 UITabBarController에 포함된 ViewController에서 아래와 같은 코드로 TabBar를 숨길 수도 나타낼 수도 있게 된다.

[(YBTabBarController *)self.tabBarController setIsHideenTabBar:YES/NO];

6. 추가적으로 UITabBarController를 이용할 때 해당 탭을 code로 선택하게 하기 위해서는 selectedIndex를 이용하면 됩니다.

쉬운 팁이지만 이로 인해 머리 아픈 분들이 있을 것 같아서 공유하며, 나타나고 숨겨질 때 애니메이션이 적용되도록 한 간단한 프로젝트를 파일로 첨부한다. 유용하게 사용하시길~

Download Customized TabBarController Demo Project(ZIP)