现在很多电商类的软件Table顶部上面的图片都可以下拉放大例如口袋购物、微店
下面是自己写的一个小demo,效果图如下
为了方便直接用storyboard拖界面了,在navigationController的右边添加了个按钮跳转到下拉放大图片的那个界面
实现原理很简单,就是在UITableview上边添加一个子视图,在TableView拖动的时候动态的改变图片的Y和高,就可以实现这个效果。
步骤如下:
1. 布置UITableview
UITableview的设置和正常一样,没有什么需要注意的地方,代码如下:
2. 准备顶部视图
这里我们的图片高度暂定为200 所以我创建了一个宏
#define kHeaderHeight 200
然后我创建了一个View,View的高度直接使用宏,然后在View上面添加一个ImageView 代码如下:
需要注意的是,图片的contentMode必须设置为UIViewContentModeScaleAspectFill, 这样才能保证图片在放大的过程中高和宽是同时放大的,设置了UIViewContentModeScaleAspectFill发现在侧滑放回上一个界面的时候图片的多余的部分还在影响美观
加上_headerImageView.clipsToBounds=YES;就好了
3. 拖动事件的处理
在TableView滑动的时候,一旦判定是下拉状态并且是从大于图片高度的地方下拉的,那么我们就要动态的改变图片的纵向位置和图片的高度(由于设置了contentMode,所以宽度自己会变化),最终实现所需要的效果。在scrollViewDidScroll方法里实现 代码如下:
最后剩下的就是navigationController了
大致就是这样