06.07.2011

Программирование iPhone. Часть 11. UINavigationBar и UINavigationController

Navigation bar – это панель, которая отображается вдоль верхнего края окна, прямо под строкой статуса, где показывается время, уровень заряда батареи и уровень антенны.

Панель навигации обычно отображает заголовок, название текущего view. Например, если открыть программу Сообщения, то наверху написано «Сообщения».

Панель навигации помогает удобно переключаться между View. Например на панели навигации можно отобразить кнопку «Назад», чтобы вернуться на предыдущий View.



Сейчас мы создадим приложение, содержащее в себе три view, которые в свою очередь содержат панель навигации. Первый view будет иметь на панели навигации кнопку Next. Нажав на кнопку приложение переместит нас на второй View. Этот второй view будет иметь кнопку Back на панели навигации и обычную кнопку не на панели навигации, нажав на которую мы перейдем на третий view.


1. Создаем приложение Window-based Application и называем его NavBar.
2. В папку классы добавляем три UIViewController и называем их FirstViewController, SecondViewController, ThirdViewController. Создавая эти классы — не забываем сразу создавать xib для них.
3. Открываем каждый xib и изменяем их цвета.
4. Сохраняем и выходим из Interface Builder.
5. Открываем MainWindow.xib и перетаскиваем Navigation Controller из библиотеки в окно документа.



6. Раскрываем Navigation Controller в окне документа и выделяем View Controller (Root View Cintroller). В инспекторе изменяем его класс на FirstViewController и NIB name тоже изменяем на FirstViewController.



7. Сохраняем и закрываем Interface Builder.
8. Открываем в папке Classes NavBarAppDelegate.h Добавляем в него панель навигации и прописываем property.

________________________________________________________________

#import

@interface NavBarAppDelegate : NSObject {
IBOutlet UIWindow *window;
IBOutlet UINavigationController * navController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navController;
@end

________________________________________________________________


9. Добавляем UINavigationController в NavBarAppDelegate.m и добавляем view от UINavigationController к нашему окну. Сохраняем и нажимаем Build.
________________________________________________________________

#import "NavBarAppDelegate.h"
@implementation NavBarAppDelegate
@synthesize window;
@synthesize navController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview: navController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[window release];
[navController release];
[super dealloc];
}
@end
________________________________________________________________

10. Открываем MainWindow.xib. В окне документа кликаем правой кнопкой мыши по Nav Bar App Delegate и присоединяем navController к UINavigationController.



11. Сохраняем и закрываем Interface Builder.
12. Запускаем приложение и видим наш FirstViewController уже с панелью навигации.
13. Полюбовались. Теперь закроем симулятор iPhone и откроем MainWindow.xib и выделяем Navigation Item в окне документа. Изменяем его заголовок — Title в инспекторе на First View.



14. Перетаскиваем Bar Button Item на нашу панель навигации. Переименовываем его на Next.
15. Сохраняем и закрываем Interface Builder.
16. Теперь открываем FirstViewController.h и прописываем новый action, который будет вызываться при нажатии на кнопку Next. Этот action назовем moveToNextView. При этом импортируем SecondViewController и прописываем ему property.

________________________________________________________________

#import
#import "SecondViewController.h"
@interface FirstViewController : UIViewController {
SecondViewController * second;
}
@property (nonatomic, retain) SecondViewController * second;
- (IBAction) moveToNextView: (id) sender;
@end

________________________________________________________________

17. В FirstViewController.m прописываем код нашего action в implementation, который мы объявили в interface.

________________________________________________________________

#import "FirstViewController.h"
@implementation FirstViewController
@synthesize second;
- (IBAction) moveToNextView: (id) sender{ self.second = [[[SecondViewController alloc]
initWithNibName:@"SecondViewController" bundle:nil] autorelease];
[self.navigationController pushViewController:self.second animated:YES];
}
- (void)dealloc {
[second release];
[super dealloc];
}
@end

________________________________________________________________


18. Нажимаем Build.
19. Открываем MainWindow.xib, выделяем FirstViewController и присоединяем наш moveToNextView к нашей кнопе, которую мы добавили.



20. Сохраняем и закрываем Interface Builder.
21. Запускаем наше приложение.

Если мы нажмем на кнопку Next, то перейдем на SecondViewController. Заметим, что попадая на второй view на панели навигации автоматически появляется кнопка First View, чтобы перейти на предыдущий View.

22. Теперь попробуем добавить еще один View. Откроем SecondViewController.h и добавим сюда UIBarButtonItem и назовем его navBut. Также здесь мы сделаем то, что сделали в шаге 16. Мы импортируем ThirdViewController и объявим его view. Еще мы объявим здесь действие, которое будет происходить при нажатии на нашу кнопку.


________________________________________________________________
#import
#import "ThirdViewController.h"
@interface SecondViewController : UIViewController {
ThirdViewController *third;
IBOutlet UIBarButtonItem *navBut;
}

@property (nonatomic, retain) ThirdViewController *third;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *navBut;
@end

________________________________________________________________


23. Теперь пропишем действия кнопки, и поместим ее на панель навигации.

________________________________________________________________

#import "SecondViewController.h"
@implementation SecondViewController
@synthesize third;
@synthesize navBut;
- (void)viewDidLoad {
self.navigationItem.title = @”SecondView”;
self.navigationItem.rightBarButtonItem = navBut;
}
-(IBAction) moveToNextView: (id)sender{
self.third = [[[ThirdViewController alloc]
initWithNibName:@”ThirdViewController” bundle:nil]
autorelease];

[self.navigationController pushViewController: self.third animated: YES];
}
- (void)dealloc {
[third release];
[super dealloc];
}
@end

__________________________________________________


24. Открываем SecondViewController.xib. В окне документа выделяем File's Owner и в инспекторе соединяем наш moveToNextView с кнопкой.
25. Сохраняем и закрываем Interface Builder.
26. Теперь запускаем наше приложение и любуемся. Теперь когда нам открывается FirstViewController -мы нажимаем next и попадаем на SecondViewController, там мы опять нажимаем на кнопку Next и попадаем уже на ThirdViewController.
27. Теперь создадим кнопку на SecondViewController, только не на панели навигации, а прямо на самом view. Просто перетащим из библиотеки Round Rect Button.
28. Теперь в инспекторе соединим событие Touch Up Inside c File's Owner и выбираем наш moveToNextView.
29. Сохраняем и закрываем Interface Builder и запускаем наше приложение.

Теги: iphone sdk, objective c, uinavigation, программирование iPhone, уроки