【iOS UI】UINavigationController

1.UINavigationController介紹

1.1簡介

UINavigationController能夠翻譯爲導航控制器，在iOS裏常常用到。

下面的圖顯示了導航控制器的流程。最左側是根視圖，當用戶點擊其中的General項時 ，General視圖會滑入屏幕；當用戶繼續點擊Auto-Lock項時，Auto-Lock視圖將滑入屏幕。相應地，在對象管理上，導航控制器使用了導航堆棧。根視圖控制器在堆棧最底層，接下來入棧的是General視圖控制器和Auto-Lock視圖控制器。能夠調用pushViewControllerAnimated:方法將視圖控制器推入棧頂，也能夠調用popViewControllerAnimated:方法將視圖控制器彈出堆棧。

1.2UINavigationController結構組成

看下圖，UINavigationController有Navigation bar  ,Navigation View ,Navigation toolbar等組成。

2.UINavigationController簡單使用

2.1

• 新建一個空項目UINavigationControllerDemo
• 新建一個UIViewController,並在UIViewController.xib中添加一個Button設置名字爲Goto SecondView
• 打開AppDelegate.h，添加屬性

#import <UIKit/UIKit.h>

@interface MLKAppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong,nonatomic) UINavigationController *navController;

@end

AppDelegate.mdidFinishLaunchingWithOptions

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    MLKRootViewController *rootController=[[MLKRootViewController alloc]init];
    rootController.title=@"Root View";
    
    self.navController=[[UINavigationController alloc]init];
    [self.navController pushViewController:rootController animated:YES];
    //
    [self.window addSubview:self.navController.view];
    //
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

運行

2.2 添加UIBarButtonItem

bar ButtonItem分左右UIBarButtonItem。咱們把左右的都添加上去。

在RootViewController.m中添加代碼以下：

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    //添加UIBarButtonItem
    UIBarButtonItem *leftButton=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(selectLeftAction:)];
    //
    self.navigationItem.leftBarButtonItem=leftButton;
    
    UIBarButtonItem *rightButton=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(selectRightAction:)];
    //
    self.navigationItem.rightBarButtonItem=rightButton;
}

UIBarButtonSystemItemAction的風格，這是系統自帶的按鈕風格，系統自帶的按鈕有下面這些

2.3響應UIBarButtonItem的點擊事件

//響應UIBarButtonItem事件的實現
-(void)selectLeftAction:(id)sender{
    UIAlertView *alert=[[UIAlertView alloc] initWithTitle:@"提示" message:@"你點擊了導航左按鈕" delegate:self cancelButtonTitle:@"肯定" otherButtonTitles:nil, nil];
    
    [alert show];
}

-(void)selectRightAction:(id)sender{
    
    UIAlertView *alert=[[UIAlertView alloc] initWithTitle:@"提示" message:@"你點擊了導航右按鈕" delegate:self cancelButtonTitle:@"肯定" otherButtonTitles:nil, nil];
    
    [alert show];
    
}

 

3.UINavigationController實現頁面切換

3.1建立一個新的UIViewController SecondViewController

3.2爲RootViewController的Button設置點擊方法

-(void)goToSecondView:(id)sender{
    MLKSecondViewController *secondView=[[MLKSecondViewController alloc]init];
    [self.navigationController pushViewController:secondView animated:YES];
    secondView.title=@"Second View";
}

SecondViewController頁面

4.在導航欄中使用SegmentedControl

 如何在導航欄中實現這種效果呢

這就是SegmentedControl

在SecondViewController.m的viewDidLoad添加以下代碼

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    NSArray *array = [NSArray arrayWithObjects:@"雞翅",@"排骨", nil];
    UISegmentedControl *segmentedController = [[UISegmentedControl alloc] initWithItems:array];
    
    segmentedController.segmentedControlStyle = UISegmentedControlSegmentCenter;
    
    [segmentedController addTarget:self action:@selector(segmentAction:) forControlEvents:UIControlEventValueChanged];
    self.navigationItem.titleView = segmentedController;

}

設置點擊事件

-(void)segmentAction:(id)sender
{
    switch ([sender selectedSegmentIndex]) {
        case 0:
        {
            UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你點擊了雞翅" delegate:self  cancelButtonTitle:@"肯定" otherButtonTitles:nil, nil];
            [alter show];
            
        }
            break;
        case 1:
        {
            UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你點擊了排骨" delegate:self  cancelButtonTitle:@"肯定" otherButtonTitles:nil, nil];
            [alter show];
        }
            break;
            
        default:
            break;
    }
}

左上角的返回上級View的barButtonitem的名字是上級目錄的Title，若是title或者適合作button的名字，怎麼辦呢？咱們能夠本身定義

在RootViewController viewDidLoad方法

    //自定義backBarButtonItem
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleDone target:nil action:nil];
    self.navigationItem.backBarButtonItem=backButton;

5.ToolBar

5.1顯示ToolBar

在SecondViewController的viewDidLoad方法中添加下面的代碼這樣ToolBar就顯示出來了

    [self.navigationController  setToolbarHidden:NO animated:YES];

在ToolBar上添加UIBarButtonItem

    UIBarButtonItem *one = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil];
    UIBarButtonItem *two = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:nil action:nil];
    UIBarButtonItem *three = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:nil action:nil];
    UIBarButtonItem *four = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemEdit target:nil action:nil];
    UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    [self setToolbarItems:[NSArray arrayWithObjects:flexItem, one, flexItem, two, flexItem, three, flexItem, four, flexItem, nil]];

注意：用   [self.navigationController.toolbar setItems:(NSArray *) animated:<#(BOOL)#>]這個方法添加item是不起效果的。下面我動態本身添加Toolbar時，這個才起效果。

5.2動態添加ToolBar

SecondViewController.h文件中添加屬性

@property UIToolbar *toolBar;

   //先隱藏ToolBar
    [self.navigationController  setToolbarHidden:YES animated:YES];
    UIBarButtonItem *searchButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self action:@selector(goToThirdView:)];
    self.toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0, self.view.frame.size.height - _toolBar.frame.size.height - 44.0, self.view.frame.size.width, 44.0)];
    [_toolBar setBarStyle:UIBarStyleDefault];
    _toolBar.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
    [_toolBar setItems:[NSArray arrayWithObject:searchButton]];
    [self.view addSubview:_toolBar];

響應UIBarButtonItem的點擊事件，跳轉到第三個頁面去

-(void)goToThirdView:(id)sender{
    MLKThirdViewController *thirdView=[[MLKThirdViewController alloc]init];
    [self.navigationController pushViewController:thirdView animated:YES];
    thirdView.title=@"Third View";
}