iOS技术资料程序员iOS

iOS开发 每个界面拥有自己独立的导航栏

2017-04-14  本文已影响3163人  夜凉听风雨

系统导航栏的弊端:

使用系统的UINavigationController是做不到让每个控制器拥有自己独立的导航栏的,它们是共用一个导航栏,在某个控制器中更改了导航栏属性,在其他页面时看到导航栏属性也更改了。

一般情况下使用系统导航栏在页面之间切换是没有什么问题的,但是如果遇到不同页面之间的导航栏样式不同(例如:第一个页面导航栏不透明,第二个页面导航栏透明),这样在页面之间切换时会看到有明显的导航栏切换间的突兀感。

系统导航栏效果:
可以看到系统导航栏在第一个界面不透明的,第二个界面是透明的。但是在从第二个页面往第一个页面切换的过程中导航栏已经变为不透明,所以显得很别扭。

nav2.gif

要想让每个页面都拥有自己独立的导航栏不受其他页面的影响,就需要把系统的导航栏隐藏起来,自己在页面上自定义一个UIView来作为一个假的导航栏。

因为是自定义的view作为导航栏,所以要注意自定义的自定义的导航栏不要被其他的控件遮挡住。这里我用主线程异步创建自定义导航栏,使自定义的导航栏最后创建,这样就显示在最上层不会被其他控件遮挡。

自定义导航栏效果:

nav.gif

在全民K歌app中,可以看到使用的就是这种导航栏效果。而同为K歌软件的唱吧则使用的是系统导航栏。相比之下就觉得唱吧的导航栏滑动效果更加难看。

自定义导航栏代码:

// 创建“导航栏”
- (void)createNav{
    // 在主线程异步加载,使下面的方法最后执行,防止其他的控件挡住了导航栏
    dispatch_async(dispatch_get_main_queue(), ^{
        // 隐藏系统导航栏
        self.navigationController.navigationBar.hidden = YES;
        // 创建假的导航栏
        UIView *navView = [[UIView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, 44)];
        [self.view addSubview:navView];
        // 创建导航栏的titleLabel
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0,44)];
        titleLabel.text = @"第二页";
        [titleLabel sizeToFit];
        titleLabel.frame = CGRectMake([UIScreen mainScreen].bounds.size.width / 2 - titleLabel.frame.size.width / 2, 0, titleLabel.frame.size.width, 44);
        [navView addSubview:titleLabel];
        // 创建导航栏右边按钮
        UIButton *right= [UIButton buttonWithType:UIButtonTypeSystem];
        [right setTitle:@"下一页" forState:UIControlStateNormal];
        right.frame = CGRectMake(300, 0, 100, 44);
        [right addTarget:self action:@selector(nextAction) forControlEvents:UIControlEventTouchUpInside];
        [navView addSubview:right];
        // 创建导航栏左按钮
        UIButton *left= [UIButton buttonWithType:UIButtonTypeSystem];
        [left setTitle:@"上一页" forState:UIControlStateNormal];
        [left addTarget:self action:@selector(preAction) forControlEvents:UIControlEventTouchUpInside];
        [navView addSubview:left];
        left.frame = CGRectMake(0, 0, 100, 44);
    });
}
// 导航栏右边按钮方法
- (void)nextAction{
    SecondViewController *vc = [[SecondViewController alloc] init];
    [self.navigationController pushViewController: vc animated:YES];
}
// 导航栏左边按钮方法
- (void)preAction{
    [self.navigationController popViewControllerAnimated:YES];
}

代码虽然简单,但是简单的思路可以让我们自由地控制导航栏,能够解决一些恶心的产品需求,如:随心所欲地更改导航栏的样式,在导航栏上添加各种奇葩的控件。

如果产品的多个模块中,只有一个模块有自定义导航栏的需求,其他的模块可以选择继续使用系统导航栏。毕竟在每个控制器里复制粘贴那么多代码也很累的。

demo下载地址: https://github.com/jiangbin1993/independentNavigation.git

上一篇 下一篇

猜你喜欢

热点阅读