导航栏透明效果，UIScrollView滚动渐变

前言

目前市面上大部分APP使用导航栏透明的效果，并且通常下面跟随着UIScrollView或UITableView，或者两者的结合。笔者根据这种效果实现了一个例子。

效果

效果图

实现细节

由于导航栏UINavigationBar的分层结构，只设置其barTintColor发现不起作用。需要设置backgroundImage（背景）和shadowImage（下面的线）才会改变颜色。

- (void)setNavColorWithAlpha: (CGFloat)alpha {
    [self.navigationController.navigationBar setShadowImage: [UIImage new]];
    
    [self.navigationController.navigationBar setBackgroundImage:
     [UIImage imageWithColor: [COLOR_NAV colorWithAlphaComponent: alpha]]
                                                  forBarMetrics: UIBarMetricsDefault];
}

setShadowImage为去掉导航下面的线，setBackgroundImage为设置背景（生成特定颜色值的一张图UIColor -> UIImage）
随着UIScrollView的滚动，导航栏的透明度会发生变化，即在UIScrollView的代理方法中编写

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offsetY = scrollView.contentOffset.y;
    
    if (offsetY < 0.0)
        offsetY = 0.0f;
    
    CGFloat bottomGradualY = self.topBannerIV.frame.size.height / 2 - NAVBAR_HEIGHT;
    CGFloat alpha = 1.0f;
    
    if (offsetY < bottomGradualY) {
        alpha = 1.0f - (bottomGradualY - offsetY) / bottomGradualY;
    }
    
    [self setNavColorWithAlpha: alpha];
}

滚动到顶端时，设置offsetY为0。在这里顶部为一张banner图，设置导航过其1/2时alpha变为1。

代码

代码托管至github中，添加了MJRefresh下拉刷新示例。

https://github.com/njim3/NavScrollDemo.git