微博个人主页下拉时图片产生放大/位移效果

微博个人主页下拉时图片产生放大/位移效果

文章同步在个人主页~
一直以来都发现很多App的信息展示页中,上部分是图片的话,都会带有这样的一个效果:

新浪微博个人页gif

所以自己也写了个Demo,分别用手写代码和xib两种方式实现了这个效果,供大家参考,写的不好的地方还望大家指正.
关于这个效果,其实只要了解了原理,实现起来非常简单:
1.上部分的图片,在下拉的时候没有跟随TableView一起往下走,所以这个头部不是TableView.tableHeaderView,而是TableView的contentInset.top=X,即内容往下偏移了头部视图的高度;
2.这个HeaderView视图要添加到tableView上,并且放在下面[tableView insertSubview:headerView atIndex:0];
3.headerView中ImageView的contentMode要设置成UIViewContentModeScaleAspectFill,这样在下拉上啦的时候,只要动态改变容器的宽高,那里面的视图就会随之产生形变;

知道了原理,实现起来就比较方便了,新浪微博这个我使用的xib实现的,建议这样比较简单;

代码在这里:TableViewHeaderImageEffect