仿简书导航栏图片随着UIScrollView的滚动放大缩小

一.前言

今天我们就来实现简书的导航栏图片随着UIScrollView的滚动来改变的效果，简书的效果图如下：

简书效果图

二.思路

下面我就说一下我的实现思路，其实思路很简单，主要就是2步：

• 在UINavigationBar上添加图片
• 实现UIScrollView的代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView

下面就具体说一下这2步是如何实现的。

1.在UINavigationBar上添加图片

这一步其实很简单，但是我在做的时候也踩了一个坑，最开始我是将UIImageView赋值给navigationBar的titleView，让UIImageView替代titleView，结果整个UIImageView被拉的很长，就像下面一样：

UIImageView替代titleView

所以不能这样做，要将UIImageView添加到UINavigationBar上，即：

[self.navigationController.navigationBar addSubview:self.imageView];

NOTE：
因为navigationBar是所有的ViewController共享的，这样做就会有一个问题，那就是当你push或pop到其他页面时，这个图片仍然在navigationBar上，这不是我们所希望的，所以我们要啦解决这个问题。
解决这个问题其实很简单，就是隐藏系统的navigationBar，然后自定义一个navigationBar即可。

1. 将系统导航栏隐藏，这个在storyboard或是代码里都可以隐藏；
2. 将[self.navigationController.navigationBar addSubview:self.imageView];改成[self.navigationBar addSubview:self.imageView];，此处的navigationBar是我们自定义的，通过IBOutLet拖出来的；
3. 在viewWillAppear里面隐藏系统的navigationBar，在viewWillDisappear里面显示系统的navigationBar。

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:animated];
}
- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    [self.navigationController setNavigationBarHidden:NO animated:animated];
}

2.实现UIScrollView的代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView

这一步是关键，要根据UIScrollView滚动的Y值进行计算，具体代码如下：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat contentOffsetY = scrollView.contentOffset.y;
    CGFloat scale = 1 - contentOffsetY / 300.0;
    if (scale < 0.5) {
        scale = 0.5;
    } else if (scale > 1.0) {
        scale = 1.0;
    }
    self.imageView.transform = CGAffineTransformMakeScale(scale, scale);
}

ok，搞定了！🙃🙃🙃。
效果如下图：

最终效果图

最后上一个Demo