iOS UITableView滑动使导航栏透明度渐变

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

//给导航条设置一个空的背景图 使其透明化
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    //去除导航条透明后导航条下的黑线
    [self.navigationController.navigationBar setShadowImage:[UIImage new]];

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

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat reOffset = scrollView.contentOffset.y + (kScreenH - 64) * 0.2; 
    CGFloat alpha = reOffset / ((kScreenH - 64) * 0.2);
    if (alpha <= 1)//下拉永不显示导航栏
    {
        alpha = 0;
    }
    else//上划前一个导航栏的长度是渐变的
    {
        alpha -= 1;
    }
    // 设置导航条的背景图片 其透明度随  alpha 值 而改变
    UIImage *image = [self imageWithColor:[UIColor colorWithRed:0.227 green:0.753 blue:0.757 alpha:alpha]];
    [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}
/// 使用颜色填充图片
- (UIImage *)imageWithColor:(UIColor *)color
{
    // 描述矩形
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    // 开启位图上下文
    UIGraphicsBeginImageContext(rect.size);
    // 获取位图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(context, [color CGColor]);
    // 渲染上下文
    CGContextFillRect(context, rect);
    // 从上下文中获取图片
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
    return theImage;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、效果展示 2、实现原理 实现原理其实就是观察UIScrollView的contentOffset的y值,根据y...
    大尾巴熊Johnny阅读 18,864评论 19 49
  • 最近想到实现tableview下拉实现headerView图片根据偏移值放大,上推实现导航栏根据偏移值计算导航栏透...
    哭与行阅读 986评论 0 3
  • 让阳光从指缝间流淌 在这明媚的午后 我听见时光清浅的低唱 我看见你的笑语嫣然 如果下一刻就迎来黄昏 如果从此都不再...
    亦远亦进阅读 206评论 1 0
  • 一条路上的路边 车子移动得无比透明 两条小小的狗 谙熟陪伴的真谛 至于一头牛,临水而卧 反刍去日的样子 我放弃描摹...
    李榆阅读 418评论 5 11
  • 看完书就觉得伤感,又告别了一个挚爱,不知余生是否再见?渴望又不舍的痴痴,朋友说,我攒了最后一个故事,迟迟不愿意结束...
    子皿似梦阅读 305评论 1 0