iOS导航栏背景透明渐变

重点分析：

1.隐藏导航的最下面的线。

2.设置导航背景的不透明度(ios7.0以上不用设置,translucent默认的就是Yes不用修改，但如果别人修改了或出现那种情况，需要设置为Yes)。

3.页面消失时导航恢复原样。

4.滚动时调用方法设置alpha来控制导航背景的渐变（也是核心，重点在这里）。

核心代码如下：

1.将颜色转换为图片

- (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;
}

2.滚动时调用改变导航渐变

- (void)changeColor:(UIColor *)color withScrollView:(UIScrollView *)scrollView andValud:(CGFloat)value{
/**    if (scrollView.contentOffset.y < 0) { 慎重选择这个，只适用于固定的导航栏，如果是自定义view效果会不一样
        //下拉时导航隐藏
        self.hidden = YES;
    }else{
*/
        self.hidden = NO;
        //计算透明度
        CGFloat alpha = scrollView.contentOffset.y /value > 1.0f ? 1 : scrollView.contentOffset.y/value;
        //设置颜色改为图片
        UIImage *image = [self imageWithColor:[color colorWithAlphaComponent:alpha]];
        [self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
        self.translucent = alpha >=1.0f ? NO : YES;
  /*  }*/
}

3.隐藏导航栏下的线

- (void)start{
    UIImageView *shawImage = [self findNavLineImageOn:self];
    shawImage.hidden = YES;
    self.translucent = YES;
}

4.页面消失后重置

（适用于导航栏不适用于自定义view）
UIImageView *shawImage = [self findNavLineImageOn:self];
 shawImage.hidden = NO;
  [self setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
  self.translucent = NO;

5.参考文章：https://www.jianshu.com/p/10c71cb19b5e　

iOS导航栏背景透明渐变

猜你喜欢