UINavigationController 导航视图控制器

前言

  • Objective-C

    1
    NS_CLASS_AVAILABLE_IOS(2_0) @interface UINavigationController : UIViewController
  • Swift

    1
    @available(iOS 2.0, *) public class UINavigationController : UIViewController
  • UINavigationController:容器视图控制器的一种,称之为导航视图控制器,导航视图控制器固定高度是 44。

  • 导航视图控制器中存放的是视图控制器。

  • 导航条的颜色与状态条相同。

1、navigationController 的创建

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ViewController1 *viewController1 = [[ViewController1 alloc] init];

    // 相当于将 viewController1 对象放到 navigationController 容器中,现在容器中只有一个视图控制器
    UINavigationController *navigationController = [[UINavigationController alloc]
    initWithRootViewController: viewController1];

    // 将 navigationController 添加到 viewController 上
    [self addChildViewController:navigationController];
    [self.view addSubview:navigationController.view];

    // 将 navigationController 做为 window 的根视图控制器
    self.window.rootViewController = navigationController;
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let viewController1 = ViewController1()

    // 相当于将 viewController1 对象放到 navigationController 容器中,现在容器中只有一个视图控制器
    let navigationController = UINavigationController(rootViewController: viewController1)

    // 将 navigationController 添加到 viewController 上
    self.addChildViewController(navigationController)
    self.view.addSubview(navigationController.view)

    // 将 navigationController 做为 window 的根视图控制器
    self.window?.rootViewController = navigationController

2、navigationBar 导航条的设置

  • navigationBar 属性是属于 navigationController 的,不是某个 viewController 的,在一个 viewController 中设置,其他的 viewController 的导航条也会改变。

  • 导航条的设置除 appearance 外都在 viewController 中完成设置。

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    // 设置导航条类型
    /*
    UIBarStyleDefault 白色半透明,默认,不设置时默认为白色半透明
    UIBarStyleBlack 灰色半透明
    */
    self.navigationController.navigationBar.barStyle = UIBarStyleDefault;

    // 设置导航条标题文字的字体和颜色
    /*
    appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
    */
    [UINavigationBar appearance].titleTextAttributes = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:20],
    NSForegroundColorAttributeName:[UIColor yellowColor]};

    // 设置按钮文字颜色
    /*
    设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
    */
    self.navigationController.navigationBar.tintColor = [UIColor redColor];

    // 设置导航条背景颜色
    /*
    默认为白色半透明
    */
    self.navigationController.navigationBar.barTintColor = [UIColor lightGrayColor];

    // 设置导航条的背景图片
    /*
    如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
    如果图片的高不是 44,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
    */
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"pic2"]
    forBarMetrics:UIBarMetricsDefault];

    // 设置是否关闭导航条半透明状态
    /*
    NO:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
    */
    self.navigationController.navigationBar.translucent = NO;

    // 设置是否隐藏导航视图控制器
    /*
    显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
    */
    self.navigationController.navigationBarHidden = YES;
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    // 设置导航条类型
    /*
    Default 白色半透明,默认,不设置时默认为白色半透明
    Black 灰色半透明
    */
    self.navigationController!.navigationBar.barStyle = UIBarStyle.Default

    // 设置导航条标题文字的字体和颜色
    /*
    appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
    */
    UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName:UIFont.boldSystemFontOfSize(20),
    NSForegroundColorAttributeName:UIColor.yellowColor()]

    // 设置按钮文字颜色
    /*
    设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
    */
    self.navigationController!.navigationBar.tintColor = UIColor.redColor()

    // 设置导航条背景颜色
    /*
    默认为白色半透明
    */
    self.navigationController!.navigationBar.barTintColor = UIColor.lightGrayColor()

    // 设置导航条的背景图片
    /*
    如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
    如果图片的高不是 44 ,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
    */
    self.navigationController!.navigationBar.setBackgroundImage(UIImage(named: "pic2"),
    forBarMetrics: UIBarMetrics.Default)

    // 设置是否关闭导航条半透明状态
    /*
    false:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
    */
    self.navigationController!.navigationBar.translucent = false

    // 设置是否隐藏导航视图控制器
    /*
    显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
    */
    self.navigationController!.navigationBarHidden = true

3、navigationItem 导航栏的设置

  • navigationItem 属性不是公有的,是每个 ViewController 都有一个自己 navigationItem,设置自己界面上的 navigationItem 属性不会影响其他的 viewController 界面。

  • 导航栏的设置在 viewController 中完成设置。不设置左侧按钮(leftBarButtonItem)时,系统会自动以上一个视图控制器的标题作为左侧按钮,并自带返回响应事件。

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    // 设置导航栏提示内容
    /*
    导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
    */
    self.navigationItem.prompt = @"hello";

    // 设置标题
    self.navigationItem.title = @"详情页";

    // 设置自定义标题视图
    /*
    x,y,width 设置无效,图片不会自动压缩
    */
    self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo_title.png"]];

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 0, 35)];
    imageView.image = [UIImage imageNamed:@"logo_title.png"];
    self.navigationItem.titleView = imageView;

    // 设置按钮文字颜色
    /*
    需要先设置按钮才能生效,iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
    */
    self.navigationItem.leftBarButtonItem.tintColor = [UIColor redColor];
    self.navigationItem.rightBarButtonItem.tintColor = [UIColor greenColor];

    // 设置导航栏按钮

    // 1、通过设置标题文字设置
    /*
    设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
    */
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回"
    style:UIBarButtonItemStylePlain
    target:self
    action:@selector(leftButtonClick:)];

    // 2、通过系统编辑按钮设置
    /*
    系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
    */
    self.navigationItem.rightBarButtonItem = self.editButtonItem;

    // 系统自带编辑按钮点击响应事件,self.editButtonItem 自带的点击事件
    - (void)setEditing:(BOOL)editing animated:(BOOL)animated {

    // 使用这个方法时,需要让父类也执行一下这个方法
    [super setEditing:editing animated:animated];
    }

    // 3、通过系统提供的样式设置
    /*
    UIBarButtonSystemItemDone, Done
    UIBarButtonSystemItemCancel, Cancel
    UIBarButtonSystemItemEdit, Edit
    UIBarButtonSystemItemSave, Save
    UIBarButtonSystemItemUndo, Undo
    UIBarButtonSystemItemRedo, Redo
    UIBarButtonSystemItemAdd, 加号 图标按钮
    UIBarButtonSystemItemFlexibleSpace, 弹簧 按钮,将 button 推向两边
    UIBarButtonSystemItemFixedSpace, 弹簧 按钮,将 button 推向两边,
    可设间距 fixedSpaceButton.width = 50;
    UIBarButtonSystemItemCompose, 撰写 图标按钮
    UIBarButtonSystemItemReply, 答复 图标按钮
    UIBarButtonSystemItemAction, 详情 图标按钮
    UIBarButtonSystemItemOrganize, 文件夹 图标按钮
    UIBarButtonSystemItemBookmarks, 书籍 图标按钮
    UIBarButtonSystemItemSearch, 搜索 图标按钮
    UIBarButtonSystemItemRefresh, 刷新 图标按钮
    UIBarButtonSystemItemStop, X 号 图标按钮
    UIBarButtonSystemItemCamera, 相机 图标按钮
    UIBarButtonSystemItemTrash, 删除 图标按钮
    UIBarButtonSystemItemPlay, 播放 图标按钮
    UIBarButtonSystemItemPause, 暂停 图标按钮
    UIBarButtonSystemItemRewind, 快退 图标按钮
    UIBarButtonSystemItemFastForward, 快进 图标按钮
    */

    self.navigationItem.rightBarButtonItem =[[UIBarButtonItem alloc]
    initWithBarButtonSystemItem: UIBarButtonSystemItemCamera
    target: self
    action: @selector(rightButtonClick:)];

    // 4、通过图片设置
    /*
    处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
    */
    UIImage *image = [[UIImage imageNamed:@"main_right_nav.png"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]
    initWithImage: image
    style: UIBarButtonItemStylePlain
    target: self
    action: @selector(rightButtonClick:)];

    // 5、通过自定义视图设置
    /*
    前两个坐标设置无效,图片会自动压缩
    */
    UIButton *myView = [UIButton buttonWithType:UIButtonTypeCustom];
    myView.frame = CGRectMake(0, 0, 50, 30);
    [myView setBackgroundImage:[UIImage imageNamed:@"pic1"] forState:UIControlStateNormal];
    [myView addTarget:self action:@selector(rightButtonClick:) forControlEvents:UIControlEventTouchUpInside];

    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myView];
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    // 设置导航栏提示内容
    /*
    导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
    */
    self.navigationItem.prompt = "hello"

    // 设置标题
    self.navigationItem.title = "详情页"

    // 设置自定义视图标题
    /*
    x,y,width 设置无效,图片不会自动压缩
    */
    self.navigationItem.titleView = UIImageView(image: UIImage(named: "logo_title.png"))

    let imageView = UIImageView(frame: CGRectMake(0, 0, 0, 35))
    imageView.image = UIImage(named: "logo_title.png")
    self.navigationItem.titleView = imageView

    // 设置按钮文字颜色
    /*
    需要先设置按钮才能生效,在 iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
    */
    self.navigationItem.leftBarButtonItem?.tintColor = UIColor.redColor()
    self.navigationItem.rightBarButtonItem?.tintColor = UIColor.greenColor()

    // 设置导航栏按钮

    // 1、通过设置标题文字设置
    /*
    设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
    */
    self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "返回",
    style: .Plain,
    target: self,
    action: #selector(ViewController2.leftButtonClick(_:)))

    // 2、通过系统编辑按钮设置
    /*
    系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
    */
    self.navigationItem.rightBarButtonItem = self.editButtonItem();

    // 3、通过系统提供的样式设置
    /*
    Done, Done
    Cancel, Cancel
    Edit, Edit
    Save, Save
    Undo, Undo
    Redo, Redo
    Add, 加号 图标按钮
    FlexibleSpace, 弹簧 空按钮,将 button 推向两边
    FixedSpace, 弹簧 空按钮,将 button 推向两边,可设置间距 fixedSpaceButton.width = 50;
    Compose, 撰写 图标按钮
    Reply, 答复 图标按钮
    Action, 详情 图标按钮
    Organize, 文件夹 图标按钮
    Bookmarks, 书籍 图标按钮
    Search, 搜索 图标按钮
    Refresh, 刷新 图标按钮
    Stop, X 号 图标按钮
    Camera, 相机 图标按钮
    Trash, 删除 图标按钮
    Play, 播放 图标按钮
    Pause, 暂停 图标按钮
    Rewind, 快退 图标按钮
    FastForward, 快进 图标按钮  
    */
    self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Camera,
    target: self,
    action: #selector(ViewController2.rightButtonClick(_:)))

    // 4、通过图片设置
    /*
    处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
    */
    let image = UIImage(named: "main_right_nav.png")?.imageWithRenderingMode(.AlwaysOriginal)

    self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image,
    style: .Plain,
    target: self,
    action: #selector(ViewController2.rightButtonClick(_:)))

    // 5、通过自定义视图设置
    /*
    前两个坐标设置无效,图片会自动压缩
    */
    let myView = UIButton(type: .Custom) myView.frame = CGRectMake(0, 0, 50, 30)
    myView.setBackgroundImage(UIImage(named: "pic1"), forState: UIControlState.Normal)
    myView.addTarget(self, action: #selector(ViewController2.rightButtonClick(_:)),
    forControlEvents: .TouchUpInside)

    self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: myView)

4、toolBar 工具条的设置

  • navigationController 自带的 toolbar 属性是所有添加在 navigationController 上的视图所共用的,是属于 navigationController 的,不是属于每个 ViewController 的,但 toolbar 上显示的内容的是每个 ViewController 的,需要在每个 ViewController 上单独设置。

  • toolbar 的显示状态会被带到已经显示过的 ViewController 上,跳转到未显示过的 ViewController 时,toolbar 再次被隐藏。

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 显示 toolBar
    /*
    toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
    */
    self.navigationController.toolbarHidden = NO;

    // 向 toolBar 添加按钮
    /*
    往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
    */
    self.toolbarItems = buttonArray;
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 显示 toolBar
    /*
    toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
    */
    self.navigationController!.toolbarHidden = false

    // 向 toolBar 添加按钮
    /*
    往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
    */
    self.toolbarItems = buttonArray

5、NC 中 viewController 页面设置

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 设置标题
    /*
    标题会显示在导航视图控制器中根视图的导航条中
    */
    viewController1.title = @"vc1 title";
    viewController1.navigationItem.title = @"vc1";

    // 隐藏分栏视图控制器
    /*
    导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
    */
    viewController1.hidesBottomBarWhenPushed = YES;
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 设置标题
    /*
    标题会显示在导航视图控制器中根视图的导航条中
    */
    viewController1.title = "vc1 title"
    viewController1.navigationItem.title = "vc1"

    // 隐藏分栏视图控制器
    /*
    导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
    */
    viewController1.hidesBottomBarWhenPushed = true

6、NC 中 viewController 页面跳转

  • 跳转到未设置背景颜色(包含 clearColor)的 ViewController 界面时,会发生卡顿的现象。

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // 跳转到新页

    // 推出新页
    /*
    自动将 otherViewController 添加到 navigationController 容器中
    */
    [self.navigationController pushViewController:otherViewController animated:YES];

    // 跳转到已添加页

    // 返回上一页
    [self.navigationController popViewControllerAnimated:YES];

    // 返回到指定页
    /*
    viewController 添加在容器视图中的顺序已知
    */
    [self.navigationController popToViewController:self.navigationController.viewControllers[1]
    animated:YES];

    // 返回到指定页
    /*
    viewController 添加在容器视图中的顺序未知
    */
    for (UIViewController *viewController in self.navigationController.viewControllers) {

    if ([viewController isKindOfClass:[ViewController3 class]]) {

    // 回到指定的某一页
    [self.navigationController popToViewController:viewController animated:YES];
    }
    }

    // 返回到根视图
    [self.navigationController popToRootViewControllerAnimated:YES];
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // 跳转到新页

    // 推出新页
    /*
    自动将 otherViewController 添加到 navigationController 容器中
    */
    self.navigationController!.pushViewController(otherViewController, animated: true)

    // 跳转到已添加页

    // 返回上一页
    self.navigationController!.popViewControllerAnimated(true)

    // 返回到指定页
    /*
    viewController 添加在容器视图中的顺序已知
    */
    self.navigationController!.popToViewController(self.navigationController!.viewControllers[1],
    animated: true)

    // 返回到指定页
    /*
    viewController 添加在容器视图中的顺序未知
    */
    for viewController in self.navigationController!.viewControllers {

    if viewController.isKindOfClass(ViewController3.self) {

    // 回到指定的某一页
    self.navigationController!.popToViewController(viewController, animated: true)
    }
    }

    // 返回到根视图
    self.navigationController?.popToRootViewControllerAnimated(true)

7、创建假导航

  • 由假导航跳转到已经存在的 ViewController 界面时,需要在要跳转到的 ViewController 界面中打开显示原生导航。

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    // 隐藏原生导航
    /*
    从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
    */
    - (void)viewWillAppear:(BOOL)animated {
    self.navigationController.navigationBarHidden = YES;
    }

    // 显示原生导航
    /*
    退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
    */
    - (void)viewWillDisappear:(BOOL)animated {
    self.navigationController.navigationBarHidden = NO;
    }

    // 创建假导航
    - (void)createCustomNavigationController {

    UIImageView *imageView = [[UIImageView alloc]
    initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
    imageView.image = [UIImage imageNamed:@"pic1"];
    imageView.userInteractionEnabled = YES;

    UIButton *lastButton = [UIButton buttonWithType:UIButtonTypeCustom];
    lastButton.frame = CGRectMake(10, 7, 60, 30);
    [lastButton setTitle:@"上一页" forState:UIControlStateNormal];
    [lastButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [lastButton addTarget:self action:@selector(lastClick:)
    forControlEvents:UIControlEventTouchUpInside];
    [imageView addSubview:lastButton];

    UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
    nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30);
    [nextButton setTitle:@"下一页" forState:UIControlStateNormal];
    [nextButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [nextButton addTarget:self action:@selector(nextClick:)
    forControlEvents:UIControlEventTouchUpInside];
    [imageView addSubview:nextButton];

    // 添加自定义视图
    [self.view addSubview:imageView];
    }
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    // 隐藏原生导航
    /*
    从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
    */
    override func viewWillAppear(animated: Bool) {
    self.navigationController!.navigationBarHidden = true
    }

    // 显示原生导航
    /*
    退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
    */
    override func viewWillDisappear(animated: Bool) {
    self.navigationController!.navigationBarHidden = false
    }

    // 创建假导航
    func createCustomNavigationController() {

    let imageView = UIImageView(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
    imageView.image = UIImage(named: "pic1")
    imageView.userInteractionEnabled = true

    let lastButton = UIButton(type: .Custom)
    lastButton.frame = CGRectMake(10, 7, 60, 30)
    lastButton.setTitle("上一页", forState:UIControlState.Normal)
    lastButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
    lastButton.addTarget(self, action: #selector(ViewController5.lastClick(_:)),
    forControlEvents: UIControlEvents.TouchUpInside)
    imageView.addSubview(lastButton)

    let nextButton = UIButton(type: .Custom)
    nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30)
    nextButton.setTitle("下一页", forState:UIControlState.Normal)
    nextButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
    nextButton.addTarget(self, action: #selector(ViewController5.nextClick(_:)),
    forControlEvents: UIControlEvents.TouchUpInside)
    imageView.addSubview(nextButton)

    // 添加自定义视图
    self.view.addSubview(imageView)
    }

8、设置转场动画

  • 添加上一个页面 push 到本页面的动画效果。

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // 创建动画
    CATransition *animation = [CATransition animation];

    // 设置动画时间
    animation.duration = 1;

    // 设置动画方向
    /*
    四种预设,某些类型中此设置无效:

    kCATransitionFromRight
    kCATransitionFromLeft
    kCATransitionFromTop
    kCATransitionFromBottom
    */
    animation.subtype = kCATransitionFromTop;

    // 设置动画类型
    /*
    基本型:
    kCATransitionFade 交叉淡化过渡
    kCATransitionMoveIn 新视图移到旧视图上面
    kCATransitionPush 新视图把旧视图推出去
    kCATransitionReveal 将旧视图移开,显示下面的新视图

    用字符串表示的类型:
    fade moveIn push reveal 和系统自带的四种一样
    pageCurl pageUnCurl 翻页
    rippleEffect 滴水效果
    suckEffect 收缩效果,如一块布被抽走
    cube alignedCube 立方体效果
    flip alignedFlip oglFlip 翻转效果
    rotate 旋转
    cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
    */
    animation.type = kCATransitionMoveIn;

    animation.type = @"pageCurl";

    // 添加动画效果
    /*
    向导航视图控制器上添加动画效果,添加完后再进行跳转
    */
    [self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // 创建动画
    let animation = CATransition()

    // 设置动画时间
    animation.duration = 1

    // 设置动画方向
    /*
    四种预设,某些类型中此设置无效:

    kCATransitionFromRight
    kCATransitionFromLeft
    kCATransitionFromTop
    kCATransitionFromBottom
    */
    animation.subtype = kCATransitionFromTop

    // 设置动画类型
    /*
    基本型:
    kCATransitionFade 交叉淡化过渡
    kCATransitionMoveIn 新视图移到旧视图上面
    kCATransitionPush 新视图把旧视图推出去
    kCATransitionReveal 将旧视图移开,显示下面的新视图

    用字符串表示的类型:
    fade moveIn push reveal 和系统自带的四种一样
    pageCurl pageUnCurl 翻页
    rippleEffect 滴水效果
    suckEffect 收缩效果,如一块布被抽走
    cube alignedCube 立方体效果
    flip alignedFlip oglFlip 翻转效果
    rotate 旋转
    cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
    */
    animation.type = kCATransitionMoveIn

    animation.type = "pageCurl"

    // 添加动画效果
    /*
    向导航视图控制器上添加动画效果,添加完后再进行跳转
    */
    self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")

9、Storyboard 中设置

9.1 在 Storyboard 场景中设置

9.1.1 Navigation Controller

Navigation1

Bar Visibility 可见性
– Shows Navigation Bar 显示导航条
– Shows Toolbar 显示工具条
Hide Bars
– On Swipe 滑动时隐藏导航条
– On Tap 点击时隐藏导航条
– When Keyboard Appears 键盘显示时隐藏导航条
– When Vertically Compact 垂直滑动时隐藏导航条

9.1.2 Navigation Item

  • 要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item

Navigation2

Title 导航条标题
Prompt 导航条提示信息
Back Buttom 自定义导航条返回按钮

9.2 在 Storyboard 场景绑定的 Controller 中设置

1
2
3
4
5
6
7
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/

self.navigationController.navigationBar.tintColor = [UIColor redColor];

self.navigationItem.title = @"主页";
文章目录
  1. 1. 前言
  2. 2. 1、navigationController 的创建
  3. 3. 2、navigationBar 导航条的设置
  4. 4. 3、navigationItem 导航栏的设置
  5. 5. 4、toolBar 工具条的设置
  6. 6. 5、NC 中 viewController 页面设置
  7. 7. 6、NC 中 viewController 页面跳转
  8. 8. 7、创建假导航
  9. 9. 8、设置转场动画
  10. 10. 9、Storyboard 中设置
    1. 10.1. 9.1 在 Storyboard 场景中设置
      1. 10.1.1. 9.1.1 Navigation Controller
      2. 10.1.2. 9.1.2 Navigation Item
    2. 10.2. 9.2 在 Storyboard 场景绑定的 Controller 中设置
隐藏目录