导航栏分析

2017-06-30 本文已影响192人简_爱SimpleLove

Nav容器本质分析
- 1.1 导航区
- 1.2 内容区
- 1.3 toolbar区
导航区分析

2.1 属性分析
edgesForExtendedLayout
extendedLayoutIncludesOpaqueBars
automaticallyAdjustsScrollViewInsets
translucent
2.2 导航区结构分析
UINavigationBar
UINavigationItem

内容区分析

3.1 内容结构分析
UINavigationTransitionView
内容区容器

其他属性分析

4.1 Hidden
4.2 navigationItem
4.3 topItem（viewDidAppear）
4.4 backBarButtonItem（下一级）

导航条细节处理

5.1 黑色线条
5.2 leftItem左边距
5.3 item间距

导航透明处理

6.1 方式一 alpha
6.2 方式二 image alpha

转场动画处理

7.1 方式一自己写
7.2 方式二修改Sys的
7.3 方式三代理方式

导航控制器的View层次

导航控制器的View层次分析图

如上图，层次结构，总体上是：
UILayoutContainerView(导航条的根视图，因为继承与UIViewCtroller，也有自己的view)的子视图：
一、 UINavigationTransitionView（导航控制器在这里发生转场行为的容器视图）
- 子视图：1.1 UIViewControllerWrapperView (remove WrapperView，系统会重新生成)
1.1.1子视图: 我们的控制器View

二、 UINavigationBar （0，20，屏幕宽度，44）(跳转时刷新, 只针对第一级视图)
- 子视图：1 _UIBarBackground（0，-20，屏幕宽度，64）
1子视图：1.1 UIImageView(导航栏上最下面的黑线)
1.2UIVisualEffectView
1.2子视图：1.2.1 _UIVisualEffectBackdropView()
1.2子视图：1.2.2_UIVisualEffectFilterView()
2 UINavigationItemButtonView - Back
2子视图：UILabel-Back (返回Label)
3 _UINavigationBarBackIndicatorView（返回的箭头）

三、toolbar(默认隐藏，在nav最下面)

Nav容器本质分析

导航区

导航条(IOS7以前默认是不透明的灰黑色，IOS7后是透明的)
导航条两种情况： 1、不透明和 2、透明（iOS7以后默认是透明的）

1.不透明情况
1.1 内容区想从导航条下开始，即64开始(可以简单的认为是一种安全模式，系统对控件没做多余的处理，在IOS7之前，默认是不透明的)
1.2 不透明但想从0开始的话，设置控制器的属性：self.extendedLayoutIncludesOpaqueBars = YES； self.edgesForExtendedLayout = UIRectEdgeAll 但这种情况基本用不到。

 整个区域{
 self.navigationController.navigationBar.translucent = NO; //不透明
 self.extendedLayoutIncludesOpaqueBars = YES; 扩展内容区，即导航条下面也能展示内容，从0开始
 }
 self.extendedLayoutIncludesOpaqueBars = NO;不扩展内容区，即导航条下面不展示内容，从64开始

2.透明情况
2.1 内容区从导航条位置开始，即0开始
2.2 automaticallyAdjustsScrollViewInsets属性针对Scrollview的处理，默认YES，bounds下移64，即y等于-64， NO时正常.
2.3 edgesForExtendedLayout针对本身View的处理,可以配置内容区的开始位置， UIRectEdgeNone从64开始，不扩展， UIRectEdgeAll整个容器范围（另外可以结合extendedLayoutIncludesOpaqueBars使用）
```
  总结：只要内容区位置从0开始，就要注意系统是否偏移了Scrollview， 即2.2提到的属性
```

Nav的本质（多控制管理）

一个控制器管理， 一个导航条管理
@1控制器管理：viewControllers（直接管理）
@2导航条管理：UINavigationBar 管理items
                items 里面是UINavigationItem（UINavigationItem + title／titleView）
                UINavigationItem管理UIBarButtonItem（返回按钮，left，right等按钮）
                UINavigationItem继承自NSObject，UIBarButtonItem继承自UIBarItem，UIBarItem继承自NSObject
                每个控制器和每个控制器上导航栏的UINavigationBar 管理items是一一对应的，即每个控制器都有自己的items

1、管理控制器，   UINavigationTransitionView上管理
2、管理导航条状态，UINavigationBar上管理
从层级上看，UINavigationTransitionView和UINavigationBar是同一级别的，
          动画两个场所：UINavigationTransitionView（控制器上的动画转场）
                     UINavigationBar（导航条的动画转场）


navigationBarHidden和navigationBar.hidden = YES的区别
一个是控制器的方法，操作控制器的，一个是UI自身方法，操作的是自身
一个是removeFromSuperView  一个是对自身进行hidden操作

注意：
    self.navigationItem.backBarButtonItem 是配置下一个控制器的返回按钮

在导航栏上添加东西，要想不影响下一个界面，离开这个界面的时候，要移除

    //要想不影响下个页面，做完了要remove掉，不然就会一直存在在导航栏
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    view.backgroundColor = [UIColor redColor];
    [self.navigationController.navigationBar addSubview:view];

导航控制器最好不要使用addChildViewController

最好不要使用addChildViewController这个方法给self.navigationController添加子控制器，因为会很有可能和self.navigationController.viewControllers冲突

替换self.navigationController.viewControllers

可以替换掉替换self.navigationController.viewControllers这个数组，或者删除其中的某个控制器，从而进行跳转，达到自己想要的结果

    //替换self.navigationController.viewControllers
    NSMutableArray *tmpAry = [NSMutableArray array];
    [tmpAry addObjectsFromArray:self.navigationController.viewControllers];
    [tmpAry removeLastObject];
    self.navigationController.viewControllers = tmpAry;
    [self.navigationController popViewControllerAnimated:YES];

导航条透明处理

iOS7以后导航栏默认是毛玻璃效果，要想设置为完全透明，有以下几种方法
方法一：

    //设置导航栏背景图片为一个空的image，这样就透明了
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
    //去掉透明后导航栏下边的黑边
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
    //设置状态栏为白色
    self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
    self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor]};

方法二：
这种方法是给navigationBar的背景添加一张透明的图片

- (void)navBarAlpha:(float)alpha{
    //设置导航栏为透明，以下两种都可
    [self.navigationController.navigationBar setBackgroundImage:[self imageAlphaZore:CGSizeMake([UIScreen mainScreen].bounds.size.width, 64) alpha:alpha] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
//        [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
}
//制作一张透明的图片
- (UIImage*)imageAlphaZore:(CGSize)size alpha:(float)alpha{
    UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
    UIColor *color = [[UIColor whiteColor] colorWithAlphaComponent:alpha];
    [color setFill];
    UIRectFill(CGRectMake(0, 0, size.width, size.height));
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

方法三：
这种方法需要先在viewDidLoad方法中，设置下面两个属性

    self.navigationController.navigationBar.translucent = NO;  //设置导航栏不透明
    //1.针对自身控制器，对下个控制器没有影响，扩展内容区，即导航条下面也能展示内容，从0开始
    //2.如果不设置下面这个属性，self.view会是从64开始的
    self.extendedLayoutIncludesOpaqueBars = YES;

然后只能在viewDidAppear方法中调用下面的方法，找到那个控件，并将其设置为透明

- (void)viewDidAppear:(BOOL)animated{
    
    [super viewDidAppear:animated];
    [self alpSubView:self.navigationController.navigationBar alpha:0];

- (void)alpSubView:(UIView*)targetView alpha:(float)alpha{
    targetView.backgroundColor = [UIColor clearColor];
    for (int i = 0; i < [targetView subviews].count; i++) {
        UIView *view = [targetView subviews][i];
        if ([view isKindOfClass:NSClassFromString(@"_UIBarBackground")]) {
            view.backgroundColor = [UIColor colorWithWhite:1 alpha:alpha];
        }
    }
}
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.navigationController.navigationBar.translucent = YES;   //要还原，防止对别的页面产生影响
}

注意使用前两个方法不能将透明度设置为不透明，即self.navigationController.navigationBar.translucent = NO;,否则无效果。
使用第三个方法，必须要在viewDidLoad方法中加上self.navigationController.navigationBar.translucent = NO;self.extendedLayoutIncludesOpaqueBars = YES;这两句代码。而且可以实现QQ空间那种效果，根据tableView的偏移量，来改变导航栏的透明度，从透明到完全不透明。

导航条下边黑色线条处理

那条黑线其实就是一个UIimageView
方法一：
遍历控件，直至找到再隐藏(这种也是最常用)

    UIImageView *imageView = [self findBlackLineImageV:self.navigationController.navigationBar];
    imageView.hidden = YES;

- (UIImageView*)findBlackLineImageV:(UIView *)view{
    if ([view isKindOfClass:[UIImageView class]] && view.frame.size.height <= 1.0) {
        return (UIImageView*)view;
    }else {
        for (UIView *subV in view.subviews){
            UIImageView *imageV = [self findBlackLineImageV:subV];
            if (imageV) {
                return imageV;
            }
        }
    }
    return nil;
}

方法二：
self.navigationController.navigationBar.clipsToBounds = YES;
使用上面这句代码，之所以可是生效是因为，黑线是在navigationBar范围外的0.33的高度，如图：

黑线图

但是这个方法也会使状态栏变成透明色，如图：

状态栏图

方法三：
和上面设置导航透明度一样，直接将整个导航栏设置为透明，但是这只是适用于，将整个导航栏设置为透明的情况

//UIBarPositionAny整个区域，设置导航栏透明
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];

设置导航栏上item的间距

self.navigationController.navigationBar.items 管理Items，在viewDidAppear自身的navigationItem加入到管理队列里;

    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStylePlain target:nil action:nil];

    UIBarButtonItem *itemGap = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    itemGap.width = 80;
    
    UIBarButtonItem *itemT = [[UIBarButtonItem alloc] initWithTitle:@"返回2" style:UIBarButtonItemStylePlain target:nil action:nil];
    
    self.navigationItem.leftBarButtonItems = [NSArray arrayWithObjects:item, itemGap, itemT, nil];

剩下的更多导航栏内容请看下一篇文章：
导航的相关问题