在项目中往往有的时候需要导航栏的状态是变化的，有的时候需要隐藏，为的是显示更多的页面，有的时候需要显示出来，给用户以提示，所以就需要隐藏和显示导航栏。正如下面的示意图所示：

示意图

分析

本个项目中，展示的是一个导航控制器，其中导航控制器中有个UIViewController或者是UITableviewController为根控制器的这么一个结构。

实现

因此在storyboard中我们将之前控制器删除，然后拖一个导航控制器出来，然后试着先绑定一个UITableviewController为根控制器。

导航栏的设置

为了让我们的header view所展示的位置是在左上角的圆点位置，我们需要把自动偏移设置关掉。

    self.automaticallyAdjustsScrollViewInsets = NO;

下面就需要隐藏导航栏操作了，我们都知道导航栏有一个隐藏的属性，下面试试

    self.navigationController.navigationBar.hidden = YES;

这种方法虽然能够让导航栏消失隐藏掉，但是如果我们要进行滚动tableview的时候，就不能让导航栏渐变的显示出来，所以这种方法不能满足要求。
这种方法行不通那么用透明度的方案来试试：

    self.navigationController.navigationBar.alpha = 0;

截图如下：

导航栏没有消失掉

因此上面的方案不能实现功能。
可以使用设置导航栏背景图片进行设置，这样就可以设置导航栏的背景有个透明度的变化。

    [self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];

当传入的图片为nil的时候，会自动的创建一个半透明的图片作为导航栏的背景。所以这种方案是可行的，但是导航栏下面的那一根线我们是希望不显示的：

    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

这样一来，导航栏的那根线就取消掉了。
以上导航栏的基本实现方案已经确定了，但是下面的列表的显示还有些疑问，到底是用的tableview显示，利用tableview的headerView；还是用UIViewController进行展示头部的控件，下面的部分就用tableview进行展示。

UITableviewController 方案

我们先试着作出示意图的效果，一个tableview上放置一个headerView。

    UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 200)];
    header.backgroundColor = [UIColor redColor];
    self.tableView.tableHeaderView = header;

运行下，看效果：

tableview header方案

看示意图，我们可以看到整个tableview都在移动，而不是我们效果图那种的样式，在往下滚动的时候，头部的控件是不会网下移动的，但是利用tableview的headerView进行布局的方案是不成功的。

UIViewController 方案

我们首先在view上放置一个tableview和UIView（放置头部的那些图片）。

页面的层级

以上都是在storyboard中操作的。

UIViewController方案添加header

以上的效果图中可以看到头部的headerView没有类似于tableview的headerView那种滚动的时候出现下移的情况。所以这种方式是可行的。
但是我们还需要设置tableview的偏移量，因为图片的显示，遮挡住了我们的列表，所以需要设置一个偏移量：

    self.tableView.contentInset = UIEdgeInsetsMake(244, 0, 0, 0);

导航栏的一些细节处理

导航栏的文字，在刚开始出现的时候是需要隐藏掉的，

    //设置标题
    UILabel *title = [[UILabel alloc] init];
    title.text = @"个人主页";
    [title sizeToFit];
    // 开始的时候看不见，所以alpha值为0
    title.textColor = [UIColor colorWithWhite:0 alpha:0];
    self.navigationItem.titleView = title;

虽然我们已经把文字隐藏掉了，但是已进入到控制器，我们还是能看到导航栏，所以我们需要在进入到控制器的时候隐藏掉，就在storyboard中进行设置就可以了，选中控制器：

隐藏导航栏

把top Bar的设置改为None就可以了。

实现滚动隐藏或显示导航栏

我们知道tableview是继承自scrollView的，所以有个-scrollViewDidScroll:方法中可以拿到tableview的滚动。而且当调用contentInset会自动调用-scrollViewDidScroll:。
我们可以这个方法中监听到scrollView的偏移量：

#pragma mark - scrollview
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    NSLog(@"%f", scrollView.contentOffset.y); //  原始偏移的位置是-244
}

所以导航栏的一些控制操作就在这个方法中进行实现。
我们需要注意到的是，当整个页面上移到一定的位置的时候，就不在上移了，因为需要留够64的位置给导航栏进行显示。也就是说这个显示图片这部分上移到一定的位置就不在移动了。
我们需要改变这个控件的高度，那么就需要修改这个控件高度的约束，所以就需要拖个约束到控制器中。

// 头部展示高度约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *imageHeight;

计算头部的高度：

    CGFloat offset = scrollView.contentOffset.y - oriOfftY;
    CGFloat imgH = oriHeight - offset;
    if (imgH < 64) {
        // 当上移到距离顶部小于64的时候，就不在移动了。
        imgH = 64;
    }
    self.imageHeight.constant = imgH;

上移、下移

到此我们就需要处理透明度渐变的问题了。

由效果图可以知道，整个页面上移到一定的距离，就会完全显示出导航栏，下移一定的距离，导航栏就会消失掉。

    //透明度
    //找最大值/
    CGFloat alpha = offset * 1 / 136.0;   // (200 - 64) / 136.0f
    if (alpha >= 1) {
        // 透明度最大值
        alpha = 0.99;
    }

设置文字：

    //拿到标题 标题文字的随着移动高度的变化而变化
    UILabel *titleL = (UILabel *)self.navigationItem.titleView;
    titleL.textColor = [UIColor colorWithWhite:0 alpha:alpha];

最后一步就是修改导航栏的背景的渐变效果：

    //把颜色生成图片
    UIColor *alphaColor = [UIColor colorWithWhite:1 alpha:alpha];
    //把颜色生成图片
    UIImage *alphaImage = [UIImage imageWithColor:alphaColor];
    //修改导航条背景图片
    [self.navigationController.navigationBar setBackgroundImage:alphaImage forBarMetrics:UIBarMetricsDefault];

-imageWithColor :这个方法是UIImage的一个分类中的方法，专门就是把颜色转换成图片的方法：

// 颜色转为图片
+ (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0, 0, 1.0f, 1.0f);
    // 开启位图上下文
    UIGraphicsBeginImageContext(rect.size);
    // 开启上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(ref, color.CGColor);
    // 渲染上下文
    CGContextFillRect(ref, rect);
    // 从上下文中获取图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
    return image;
}

以上基本完成了想要的效果图的功能了。
代码传送门，如果有帮助你的话，GitHub上给个赞呗！

iOS之导航栏的渐变隐藏及显示