iOS tableview头部视图下拉放大

近期,公司做一个功能需求,tableView头部视图下拉放大+navigationBar动态隐藏效果,特整理如下,方便以后查找,如有错误,希望批评指正,如有更好的思路,不吝赐教,共同进步。

1.tableview.tableHeaderView = headerView 

iOS tableview头部视图下拉放大_第1张图片
图一 默认bar是透明的

按照常规方法创建默认状态

tableview创建->headerView创建->navigationBar的透明设置

代码如下:

iOS tableview头部视图下拉放大_第2张图片
图二 
iOS tableview头部视图下拉放大_第3张图片
图三

这些写完之后运行出来就是图一的状态,头部下拉放大本质就是改变的imageView1的frame,根据scrollView的contentOffSet来判断视图view的原点对于scrollView的原点的距离,我们这个方法中self.automaticallyAdjustsScrollViewInsets没有设置,默认就是YES,实现的效果是下拉视图放大,上推改变的是navigationBar的动态隐藏效果,代码如下

iOS tableview头部视图下拉放大_第4张图片
图四

我是分了三个阶段来进行判断,其中y > -64(64默认是navigationBar 的高度) 变化的是navigationBar动态隐藏效,y<-64 下拉放大事宽高等比例扩大,在实际开发中大家可以根据需要分,运行出来的效果如下

iOS tableview头部视图下拉放大_第5张图片
图五 下拉放大效果图
iOS tableview头部视图下拉放大_第6张图片
图六 navigationBar 动态效果

在实现navigationBar 动态效果的时候我的做法是将一个带有透明度的color对象转化成image对象,这个及时美工没有给图,咱们自己就能实现想要的颜色,透明度的背景图,具体代码如下:

iOS tableview头部视图下拉放大_第7张图片
图七 UIColor 转 UIImage

到此基本的就能实现头部视图下拉放大的效果以及navigationBar的动态效果了,重点是图四。

2.[tableview addSubView:headerView];

将headerview添加到tableview上,下拉放大的原理跟1中的方式是一样的,还是改变imageView1的frame,headerView.frame 和tableview.frame 并没有发生变化。区别在于利用了tableview.contentInset属性来决定现实的位置

iOS tableview头部视图下拉放大_第8张图片
图八 

这个方式中设置self.automaticallyAdjustsScrollViewInsets=NO,那y的分阶段还是比较容易分的

iOS tableview头部视图下拉放大_第9张图片
图九

以上就是两种简单的方式实现上述需求,如有错误,希望批评指正!

你可能感兴趣的:(iOS tableview头部视图下拉放大)