仿简书导航栏图片随着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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • *7月8日上午 N:Block :跟一个函数块差不多,会对里面所有的内容的引用计数+1,想要解决就用__block...
    炙冰阅读 2,554评论 1 14
  • 废话不多说,直接上干货 ---------------------------------------------...
    小小赵纸农阅读 3,441评论 0 15
  • 今天看了一篇文章,说的是当今社会的趋势是,一个人不仅仅将自己的职业局限于特定的一种,而是在自己本职工作之外努力发展...
    给力青春Sophie阅读 275评论 0 0
  • 今天参加老罗发布会,手机神奇地没有网络,看着周遭的人都玩着手机,居然会莫名的惶恐和不安,这就是所谓的离开网络就没有...
    程丸子ca阅读 142评论 0 0
  • 各位亲: 大家好!好多朋友跟我请教护肤方案,希望肌肤更清透细嫩,毛孔细致,皮肤白暂,细纹远离,21天活肤嫩肤...
    胡蝶FS阅读 837评论 3 5