NavigationBar Custom

원문1 : http://lambert.tistory.com/355

디자인 적용을 위해 커스텀 컨트롤(Custom Control)을 적용하기 위해서 다음과 같이 세 가지 방법을 사용할 수 있다. 다음의 예는 최대한 간단한 설명을 위해 Naviation Control을 대상으로 하고, Xcode의 Navigation-based Application을 사용했다.

다음 그림과 같이 네비게이션바의 배경 그림을 변경하는 것을 예로 들겠다.

1. 커스텀 클래스를 상속하는 방법

우선 네비게이션바의 배경 그림을 변경할 커스텀 클래스(CustomNavigationBar.h/m)를 작성한다.

[CustomNavigationBar.h]

#import <UIKit/UIKit.h>

@interface CustomNavigationBar : UINavigationBar <UINavigationControllerDelegate> {

}

@end

[CustomNavigationBar.m]

#import "CustomNavigationBar.h"

@implementation CustomNavigationBar

- (id)initWithFrame:(CGRect)frame {

    if ((self = [super initWithFrame:frame])) {

        // Initialization code

    }

    return self;

}

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

    // Drawing code

// 네비게이션바에 배경 이미지 추가.

UIImage *image = [[UIImage imageNamed:@"NavigationBarBackground.png"]retain];

[image drawInRect:rect];

[image release];

}

- (void)dealloc {

    [super dealloc];

}

그리고 MainWindow.xib를 열어 다음 그림과 같이 "도큐먼트 윈도우"에서 Navigation Controller를 선택하고, 하위 계층의 Navigation Bar를 터블클릭하여 Identiy 탭의 Class 항목을 방금 앞에서 작성한 CustomNavigationBar로 변경한다. 이 후 빌드앤런하면, 앞의 그림과 같이 네비게이션바가 변경될 것이다.

2.  카테고리를 사용하는 방법(iOS 5.0 이전)

UINavigationBar에 배경 그림을 적용하는 UINavigation+CustomBar.h/m 클래스를 작성한다.

[UINavigation+CustomBar.h/]

#import <UIKit/UIKit.h>

@interface UINavigationBar (CustomBar)

@end

[UINavigation+CustomBar.h/]

#import "UINavigationBar+CustomBar.h"

@implementation UINavigationBar (CustomBar)

- (id)initWithFrame:(CGRect)frame {

    if ((self = [super initWithFrame:frame])) {

        // Initialization code

    }

    return self;

}

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

    // Drawing code

// 네비게이션바에 배경 이미지 추가.

UIImage *image = [[UIImage imageNamed:@"NavigationBarBackground.png"] retain];

[image drawInRect:rect];

[image release];

}

- (void)dealloc {

    [super dealloc];

}

iOS 5부터 UINavigationBar, UIToolBar, 그리고 UITabBar의 구현 방법이 변경되었다. 서브클래싱을 하지 않는한 이 클래스들의 인스턴스 상에서 drawRect: 메서드가 호출되지 않는다. 그러므로 2. 카테고리를 사용하는 방법 대신, 1.의 커스텀 클래스 상속하는 방법을 사용하자!

3. 해당 뷰 컨트롤러에서 직접 처리하는 방법

1 번 예의 프로젝트에서 배경 그림을 추가하는 코드를 해당 컨트롤러의 구현 파일( 예: RootViewController.m)에 직접 작성하는 방법이다. UIImageView를 사용하여 vidDidLoad나 viewWillAppear: 메소드에 코드를 추가하자. 이 방법을 사용하는 경우 추가되는 뷰 계층에 따라  nvigationItem들이 가려질 수 있으니 주의해서 사용해야 한다. 이 것과 관련해서는 다음 URL을 참고하라.

Making UIToolbar and UINavigationBar’s background totally transparent

- (void)viewDidLoad {

    [super viewDidLoad];

 

    // 네비게이션바에 배경 이미지 추가.

    UIImage *image = [UIImage imageNamed:@"NavigationBarBackground.png"];

    UIImageView *naviBarImageView = [[UIImageView alloc] initWithImage:image];

    naviBarImageView.frame = CGRectMake(0, 20, 

image.size.width, image.size.height);

    [self.navigationController.view addSubview:naviBarImageView];

    [naviBarImageView release];

}

원문2 : http://reysion.tistory.com/15

아이폰이나 안드로이드 프로젝트를 하다보면 처음에 가장 신경쓰이는 부분이 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 메소드도 정의 했습니다.
버튼의 종류나 여러가지 옵션은 상황에 맞게 처리하시면 되겠습니다.

일단 NavigationController 커스터마이징은 여기까지 정리해 놓겠습니다. 

==================================================

배경 이미지 넣기 5.0 이상 코드에서는 다음과 같이 사용 

   if ([_navController.navigationBar respondsToSelector :@selector(setBackgroundImage:forBarMetrics:)]){

        NSLog(@"iPhone 5.0 이상");

        

        UIImage *bgImage = [UIImage imageNamed:@"sw01_a01_bg_top_2.png"];

        [_navController.navigationBar setBackgroundImage:bgImage forBarMetrics:UIBarMetricsDefault];

    }