tableView头部图片在拖动时放大效果的实现

2016-09-08  本文已影响0人  xhwASS
主要步骤:

1、在显示tableView的controller中定义顶部图片的headerImageView和图片原始高度imageOriginalHeight
2、在创建UI时创建头部图片,并添加到tableView上。这里需要注意的是:将headerImageView的frame的纵坐标(y)设为负的imageOriginalHeight
3、将tableView的内容向下偏移imageOriginalHeight
4、最后scrollViewDidScroll方法中,根据scrollView的偏移量来改变ImageView的frame
(1)获取scrollView的纵向偏移量
(2)如果scrollView的纵向偏移量小于负的iamgeOriginalHeight,就改变imageView的frame

感觉上面说了半天,没太说明白,算了直接上代码

主要代码如下:
1、在显示tableView的controller中定义顶部图片的headerImageView和图片原始高度imageOriginalHeight

//图片的原始高度
let imageOriginalHeight: CGFloat = 200
//顶部图片
var headerImageView = UIImageView()  

2、在创建UI时创建头部图片,并添加到tableView上,将tableView的内容向下偏移imageOriginalHeight

//创建头部图片
self.headerImageView = FactoryUI.createImageView(CGRectMake(0, -imageOriginalHeight, screenW, imageOriginalHeight), imageName: "welcome1")
self.tableView.addSubview(self.headerImageView)
    
//将tableView的内容向下偏移imageOriginalHeight
//UIEdgeInsetsMake表示的是相对值
self.tableView.contentInset = UIEdgeInsetsMake(imageOriginalHeight, 0, 0, 0)  

3、最后scrollViewDidScroll方法中,根据scrollView的偏移量来改变ImageView的frame

//头部图片的效果
//实现原理:根据scrollView的偏移量来改变imageView的frame    
func scrollViewDidScroll(scrollView: UIScrollView) {
    if scrollView == self.tableView {
        //获取scrollView的纵向偏移量
        let yoffset = scrollView.contentOffset.y
        //获取scrollView的横向偏移量,横向偏移量的变化而变化
        let xoffset = (imageOriginalHeight + yoffset) / 2
        if yoffset < -imageOriginalHeight {         
           //记录原来imageView的frame
           var rect = self.headerImageView.frame
           //纵坐标
           rect.origin.y = yoffset
           //高度
           rect.size.height = -yoffset
           //横坐标
           rect.origin.x = xoffset
           //宽度,fabs()求绝对值
           rect.size.width = screenW + fabs(xoffset) * 2
           self.headerImageView.frame = rect  
        }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读