iOS-淘宝天猫商品详情页顶部图片覆盖效果和下拉图片放大效果

gif03.gif

这种效果，注意上面的图片，当tableView往上滑动的时候，图片也跟着往上滑动，但是不同步，图片滑动的比较慢，tableView逐渐覆盖住上面的图片。
这里上面的图片并不是tablView的tableFooterView属性。
由于tableView是ScrollView子类，这种效果是通过ScrollView的contentInset 和 contentOffset 这两个属性，来实现的。

• 关于 ScrollView 的 contentInset 和 contentOffset 两个属性
  http://blog.csdn.net/lvxiangan/article/details/46276563

• 既然不是tableFooterView属性，顶部图片和tableView是怎么一种关系添加的呢？先看下sendSubviewToBack这个属性
  http://blog.csdn.net/chengyingzhilian/article/details/7946835

• 具体实现

  #define TOP_Distan 64 宏定义顶部的navigationbar高度

  - (void)viewDidLoad
  {
    [super viewDidLoad];

    self.tableView.backgroundColor  = [UIColor whiteColor];
    self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, TOP_Distan, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height - TOP_Distan) style:UITableViewStylePlain];
    [self.view addSubview:self.tableView];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    self.tableView.showsVerticalScrollIndicator = NO;
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
    self.tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - 200, self.view.frame.size.width, 200)];
    self.imageView.image = [UIImage imageNamed:@"cat.png"];
    [self.tableView addSubview:self.imageView];

    //sendSubviewToBack  将 image 放在 tableview 的最后面
    //bringSubviewToFront 将 image 放在 tableview 的最上面
    [self.tableView sendSubviewToBack:self.imageView];
  }

// 利用scrollView的代理滚动事件
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGRect targetFrame = self.imageView.frame;
    
    CGFloat y = scrollView.contentOffset.y;
    
    CGFloat offset =  - scrollView.contentOffset.y - scrollView.contentInset.top;
    
    if (offset < 0) {  // 说明image正在被遮盖
      //上推中....
        offset *= -3.0f;
        targetFrame.origin.y = - scrollView.contentInset.top + offset/4;
        self.imageView.frame = targetFrame;
        
    }else{
     //下拉中....
        if (y + scrollView.contentInset.top <= 0) { // 说明image完全显示
            self.imageView.frame = CGRectMake(y + 200, y , self.view.frame.size.width - (y + 200) * 2, -y);
        }
    }
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    cell.textLabel.text = [NSString stringWithFormat:@"下拉，上推----%ld",indexPath.row];
    
    return cell;
}

• 恩，就这些，看效果

gif02.gif