关于头部 NavBar 的显示和隐藏处理

Tip

今天我要给大家分享一个关于在实际开发中对NavBar的显示和隐藏处理：
首先我们来看一下效果图：

12345.gif

像这种效果我们在很多的 APP 中都可以见到，尤其是在个人中心的模块当中，接下来我就来讲解一下具体是如何实现的：

实现思路

给 NavBar 的背景颜色设置成透明色，来后把底部的这条分割线去掉，接着自已写一个 VIew 放到上面，最后监听滚动

具体步骤

第一步：
项目的基本搭建,如下图这样，这没什么好说的， so easy...

Snip20160924_4.png

设置背景颜色设置成透明色：

  /**  1.0 给 nav 设置透明颜色的背景图片 */
[self.navigationController.navigationBar setBackgroundImage:[self createImageWithColor:[UIColor clearColor]] forBarMetrics:UIBarMetricsDefault];

- (UIImage *)createImageWithColor:(UIColor *)color {
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return theImage;
}

效果如下：

Snip20160924_1.png

第二步：去掉底部这条分割线

 /**  2.0 去掉底部的那条分割线 */
self.navigationController.navigationBar.shadowImage = [UIImage new];

效果如下：

Snip20160924_2.png

第三步：自定义 view 放到上面去

/**  3.0 添加一个自定义的 view */
UIView *navView = [[UIView alloc] init];
[self.view addSubview:navView];
navView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 64);
navView.backgroundColor = [UIColor orangeColor];
self.navView = navView;

效果如下：

Snip20160924_3.png

第四步：监听滚动 scrollview 的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offsetY = scrollView.contentOffset.y;

if (offsetY > 0 ) {
    self.navView.alpha = 1;
    self.navigationItem.title = @"zwl";
} else {
    self.navView.alpha = 0;
    self.navigationItem.title = @"";
}

}

到了这里，就大功告成了，其实只要搞清楚实现思路就一点都不难。。。

自已曾爬过的坑

一开始在接到这个需求的时候没有想到这种实现方案，而是直接对 NavBar 设置背景色或是 hidden 属性来控制，这样一来的话当你跳转到二级界面或是从二级界面再跳转回来会有很多问题。。。。。而当采取上面这种方案时所有的问题都迎刃而解了。。。