iOS UITableView 滚动 头图 拉伸放大效果

接着上一篇来讲 头图在向下的滚动拉伸时候有一个放大的效果, 这里就讲讲具体的实现过程.

理解起来也很简单,肯定就是监听了滚动过程,然后 判断滚动位移的相对位置是否满足,满足则需要拉伸处理.

这里的拉伸 一般都是相对图片的等比拉伸,不能让图片比例失调.

监听方法就是

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

首先

这个头图headerView 和 self.tableView的关系

1 可以是 addSubView的关系

2 可以是 setTableViewHead 的关系

区别 不大 1 适合 设计复杂 已经有了setTableViewHeaderView 2 适合经典设计 "headerView + tableView"

(1)设置 这个headerView 高度为 ImageViewHeight 为常亮 比如 200

(2)如果是 关系1

设置 self.tableView.contentInset = UIEdgeInsetsMake(ImageViewHeight, 0, 0, 0); 当 addSubView时候 正好headView在位置从0开始 高度为 ImageViewHeight 的位置.

如果是 关系2

直接设置 [self.tableView setTableHeaderView:headerView];

(3)需要设置 headerView.contentMode = UIViewContentModeScaleAspectFill; //会保证图片比例不变，但是是填充整个ImageView的

(4)监听处理

/**
*  做伸缩处理
*
*  @param scrollView
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{//64  是状态栏 + 导航栏的高度
CGFloat yOffset = self.tableView.contentOffset.y + 64;
//拉伸处理start
if (yOffset < 0 ){
CGRect frame = headerView.frame;
frame.size.height =  -yOffset + 64;
if(frame.size.height <= ImageViewHeight){

}else{
frame.origin.y = yOffset - 64 ;
frame.size.height = - yOffset + 64;
headerView.frame = frame;
}
}
}

效果: