iOS监听UIScrollView使导航栏透明度渐变

1、效果展示

1.gif

2、实现原理

实现原理其实就是观察UIScrollView的contentOffset的y值，根据y值的变化来不断的设置导航栏背景色的alpha值，从而使其达到导航栏透明度渐变的效果。

3、细节说明

扩展UINavigationBar

首先，我们发现直接修改UINavigationBar的背景颜色是不行的。因为在UINavigationBar的高度是44，其上面的20px是状态栏，如果单纯的setBackgroundColor只是渐变状态栏下边的44px的颜色，看起来效果像截断了一样。所以，我们需要扩展UINavigationBar这个类，在该类添加一个view，使得该view高度为64px并且是在最上层显示，目的是把状态栏给遮挡住。部分代码如下：

- (void)cnSetBackgroundColor:(UIColor *)backgroundColor
{
    if (!self.overlay) {
        [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
        self.overlay = [[UIView alloc] initWithFrame:CGRectMake(0, -20, [UIScreen mainScreen].bounds.size.width, CGRectGetHeight(self.bounds) + 20)];
        self.overlay.userInteractionEnabled = NO;
        self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
        [self insertSubview:self.overlay atIndex:0];
    }
    
    self.overlay.backgroundColor = backgroundColor;
}

其中，overlay是通过runtime运行时添加的一个关联对象。

设置UIScrollView的contentInset

因为需要根据滚动距离变化来设置导航栏的透明度，所以初始情况下，需要设置好UIScrollView里的contentInset值

监听UIScrollView的contentOffset.y值

根据UIScrollView 的delegate方法scrollViewDidScroll，我们能实时获得contentOffset.y值，根据该值的变化对刚才扩展的UINavigationBar的背景色的alpha值，做相应的变化，具体实现：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    UIColor *color = [UIColor colorWithRed:45/255.0 green:45/255.0 blue:45/255.0 alpha:1];
    CGFloat offsetY = scrollView.contentOffset.y;
    if (offsetY >= - _halfHeight - 64) {
        CGFloat alpha = MIN(1, (_halfHeight + 64 + offsetY)/_halfHeight);
         [self.navigationController.navigationBar cnSetBackgroundColor:[color colorWithAlphaComponent:alpha]];
        
        _descriptionView.alpha = 1 - alpha;
    } else {
        [self.navigationController.navigationBar cnSetBackgroundColor:[color colorWithAlphaComponent:0]];
    }
}

4、补充说明

需要在viewWillAppear方法中去掉导航栏的底边线，也就是那一条区分的横线。

[self.navigationController.navigationBar setShadowImage:[UIImage new]];

为避免返回到其他页面后，还是沿用该导航栏样式，所以需要在viewWillDisappear的时候，还原之前的样式，也就是把overlay给去掉，具体看代码实现。

5、Github代码

GitHub下载

2017/02/27 更新

看到读者评论说，用了后会使得导航栏的Item消失不见的，我自己测试了一下，发现在iOS10上面会出现这个问题，估计UINavigationBar在iOS10上面的布局可能有了变化，我后来想了另外一个更投机的方法去实现这个功能，不需要通过Category多添加UINavigationBar里面的背景View去实现，而是通过

self.navigationController.navigationBar.barTintColor

去设置颜色，而通过使用

[[[self.navigationController.navigationBar subviews] objectAtIndex:0] setAlpha:0];

找到navigationBar的背景view，然后设置alpha值。已经更新到GitHub上了，各位看官可以去下载看看。