[iOS] UINavigationController Customization (title, background color, image, add button)

아이폰이나 안드로이드 프로젝트를 하다보면 처음에 가장 신경쓰이는 부분이 UI구성입니다.

디자인에 따라 배경이나 버튼 이미지, 간격등을 고려해서 구성해야 되는데 책이나 기본 강좌에서는 이런 내용을 잘 다루지 않죠.

기획안에 따라서 기능적으로는 UINavigationController를 사용해야 되는데 화면의 특성에 따라서 UINavigationController를 숨기거나 수정해야되는 경우가 생깁니다. 

UINavigationController에서 배경색을 바꾸고 배경이미지를 넣고 상황에 따라 타이틀을 바꾸고 하는 등의 작업을 간단히 정리해 보도록 하겠습니다.

1. 코드를 이용해 UINavigationController 만들기

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {     

 RootViewController * rootViewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:nil];

 UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];

 [self.window addSubview:navigationController.view];
 [self.window makeKeyAndVisible];

 return YES;
}

이것은 코드를 통해 만들수 있다는 한가지 예일 뿐이고 실제 interface builder를 이용해서 만드셔도 상관 없죠.

 

2.Title 바꾸기

- (void)viewDidLoad 
{
    [super viewDidLoad];

    self.title = @"My Title";
}

화면별로 각각의 ViewController에 따라서 Title을 변경해야 될 떄 사용 되겠죠.

3.Navigation Bar 숨기기 & 보이기

- (void)viewDidLoad 
{
    [super viewDidLoad];

     self.title = @"My Title";
     self.navigationController.navigationBarHidden = YES; //YES : 숨기기, NO : 보이기
}

위 코드는 Navigation Bar를 숨기는 코드 입니다. 이처럼 ViewController에 따라서 보여줄수도 있고 숨길수 있습니다.
다시 보이게 하려면 self.navigationController.navigationBarHidden값을 NO로 하시면 되겠습니다.

4. Navigation Bar 배경색 바꾸기 (Background Color) 

- (void)viewDidLoad 
{
    [super viewDidLoad];
    self.title = @"My Title";
    self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:255.0/255 
                                                                                  green:10.0/255 blue:100.0/255 alpha:1];
}

5. Navigation Bar Style 바꾸기

- (void)viewDidLoad 
{
   super viewDidLoad];
   self.title = @"My Title";
   self.navigationController.navigationBar.barStyle = UIBarStyleBlack; //스타일 적용
   self.navigationController.navigationBar.translucent = YES; // 반투명 효과 주기
}

스타일에는 기본적으로 UIBarStyleBlack, UIBarStyleBlackOpaque, UIBarStyleBlackTranslucent, UIBarStyleDefault이 있죠.

6. Navigation Bar 배경이미지 넣기 (Background image)

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawRect:(CGRect)rect
{
   UIImage *bgImage = [UIImage imageNamed:@"background.png"];
   [bgImage drawInRect:rect];
}
@end

UInavigationBar 서브클래스를 만들어서 구현합니다.

7. Navigation Bar Back 버튼의 Text 변경 하기

- (void)viewDidLoad 
{
    [super viewDidLoad];

    self.title = @"My title";
    self.navigationController.navigationBar.backItem.title = @"뒤로가기";
}

본래 "Back"이라는 Text가 들어가는데 "뒤로가기" 라고 바꿔 주었습니다.
위 코드는 상황에 따라 적용되지 않을 수 있습니다. 
가령 UITabbarController와 UINavigationController를 같이 사용하면서 pushViewController를 이용해 뷰를 이동할 때 안되더군요.

이때는 다음과 같이 해결 합니다.

UIBarButtonItem *backButton = [[UIBarButtonItem alloc]
                                    initWithTitle: @"Back"
                                    style: UIBarButtonItemStyleBordered
                                    target:nil action:nil];
[[self navigationItem] setBackBarButtonItem: backButton];

UINavigationController *homeNav = self.navigationController;
LoginView * loginView = [[LoginView alloc] initWithNibName:@"LoginView" bundle:nil];
[homeNav pushViewController:loginView animated:YES];

위 코드는 이동하고자 하는 뷰(LoginView)를 push하는 뷰 컨트롤러에서 백버튼을 재설정한 후에 뷰를 push하는 방법 입니다.
즉 뷰를 이동하고 나서 처리하는 것이 아니라 이동하기 전에 백버튼을 설정하고 이동하는 처리 입니다.

여기서 하나 더 알아봅시다.
NavigationController에서 화면 전환시 이전 화면으로 이동하고자 할 때 바로 이전 화면이 아닌 자신이 원하는 이전 화면으로 이동하고 싶을 때 처리는 어떻게 할까요. 

다음을 보시죠

[self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIndex:0] animated:YES];

위처럼 objectAtIndex값을 설정해서 이전의 원하는 컨트롤러로 이동할 수 있습니다.

8.Navigation Bar 오른쪽의 버튼 아이템 추가하기

- (void)viewDidLoad 
{
    [super viewDidLoad];

    self.title = @"My Title";

    UIBarButtonItem *loginButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Log in" 
                                                            style:UIBarButtonItemStylePlain target:self  
                                                            action:@selecter(ActLogin)];
    self.navigationItem.rightBarButtonItem = loginButtonItem;
    [loginButtonItem release];
}

//버튼을 눌렀을 때 이벤트 처리
-(IBAction) ActLogin:(id)sender
{

     NSLog(@"Log-in Action");
}

Navigation Bar 오른쪽 영역에 버튼을 추가하는 코드 입니다. 여기서는 버튼을 눌렀을 때 이벤트 메소드 ActLotin 메소드도 정의 했습니다.
버튼의 종류나 여러가지 옵션은 상황에 맞게 처리하시면 되겠습니다.

출처 : http://reysion.tistory.com/15