简易的iOS导航栏颜色渐变方案

不少App首页要作成相似天猫和京东的导航栏，实如今页面滑动过程当中导航栏渐变的效果。笔者以前在项目里用过一个三方，后来更新版本失效了，因而决定结合本身对导航栏的认识来实现一下这个功能。完成一个简易的iOS导航栏颜色渐变方案。

【文末附运行效果及demo】

PS：现有版本对代码进行了重构，经过新增category并利用runtime的method swizzling实现两行代码轻松搞定。详情参考README。

思考与原理

如何给导航栏设置颜色？

//方法一
self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

//方法二
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"red.png"] forBarMetrics:UIBarMetricsDefault];
复制代码

以上两个方法均可觉得导航栏添加颜色，可是方法一的效果并不是此处所需。

缘由在于 UINavigationBar 的结构中添加了 UIView 、 UIImageView 、 UILabel等控件，覆盖了 UINavigationBar 。

方法二的效果符合预期。

如何将颜色转换为图片？

直接贴代码并附上注释：

- (UIImage *)imageWithColor:(UIColor *)color {

    //建立1像素区域并开始绘图
    CGRect rect = CGRectMake(0, 0, 1, 1);
    UIGraphicsBeginImageContext(rect.size);

    //建立画板并填充颜色和区域
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    //从画板上获取图片并关闭图片绘图
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}
复制代码

如何在滑动时为导航栏设置背景？

一般展现信息页面都存放于滑动视图（UIScrollView、UITableView、UICollectionView 等），这就不难想到能够在滑动视图的 scrollViewDidScroll: 这个方法里根据滑动视图纵向偏移量来计算颜色的透明度的。

实现

除了以上的问题思考和基本原理，实际实现过程当中还有一些须要注意的内容。

导航栏的隐藏与显示

当页面下拉时隐藏导航栏，方法有两个:

//方法一：
[self.navigationController setNavigationBarHidden:YES];

//方法二：
self.navigationController.navigationBar.hidden = YES;
复制代码

以上两个方法效果相同，区别在于一个是操做 navigationController 的属性（navigationBar 是 navigationController的一个属性），一个是操做navigationBar的属性。

可是，方法一会出现一个bug，就是当页面初始状态时 setNavigationBarHidden 为 YES，也就至关于 navigationBar 那一刻是不存在的，那么导航栏上的控件也就天然看不到，并且 navigationBar的出现和消失会很突兀。

采用方法二效果会好不少，由于navigationBar自己是存在的，只是作了显示和隐藏的操做，过渡也相对顺滑。

页面切换的处理

导航栏做为的公共区域，咱们能够对它进行自定义，同时也要考虑当前页面的导航栏和其余页面导航栏之间的相互影响。

• 导航栏下面那条线实际上是一张图片，叫作 shadowImage，在 viewWillAppear对其隐藏，又在 viewWillDisappear对其作了还原。
• 为了保证回到该页面时导航栏的颜色和离开时保持一致，在页面即将呈现时手动调了一下 scrollViewDidScroll: 方法来计算当前应该呈现的颜色。

封装

为了方便使用，封装一个 UINavigationBar的category： UINavigationBar+ChangeColor。

//UINavigationBar+ChangeColor.m文件

//核心方法
- (void)changeColor:(UIColor *)color withOffsetY:(CGFloat)offsetY {

    if (offsetY < 0) {

        // 下拉时导航栏隐藏
        self.hidden = YES;
    }else {

        self.hidden = NO;
        // 计算透明度，180为随意设置的偏移量临界值
        CGFloat alpha = offsetY / 180 > 1.0f ? 1 : (offsetY / 180);

        // 设置一个颜色并转化为图片
        UIImage *image = [self imageWithColor:[color colorWithAlphaComponent:alpha]];
        [self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

        self.translucent = alpha >= 1.0f ? NO : YES;
    }
}
复制代码

使用方法：

• star：隐藏导航栏下的横线，将背景色置空，通常在viewWillAppear中调用，；
• changeColor:WithScrollView:AndValue: ：传入颜色、滑动视图、临界值来实现，通常在 scrollViewDidScroll中调用；
• reset：显示导航栏下横线，还原导航栏，通常在 viewWillDisappear中调用。

//VC.m文件

/* 页面即将显示 */
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    [self.navigationController.navigationBar start];

    //该页面呈现时手动调用计算导航栏此时应当显示的颜色
    [self scrollViewDidScroll:_tableview];
}

/* 页面即将消失 */
- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];

    [self.navigationController.navigationBar reset];
}

/* 滑动过程当中作处理 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [self.navigationController.navigationBar changeColor:[UIColor redColor] withOffsetY:scrollView.contentOffset.y];
}
复制代码

完整demo

总结

• 因为系统自带的导航栏常常不能知足需求，所以在开发中导航栏常常须要自定义，哪怕只是修改背景色。
• 了解导航栏的结构处理起来会更容易。
• 自定义导航栏也要考虑和其余页面的导航栏之间的相互影响。