淘宝详情界面的头部视图被覆盖的效果

Posted 2022-11-24 ZHZMAREN

效果图：

代码：

- (void)viewDidLoad
    [super viewDidLoad];
    
    self.title = @"测试";
    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:@"1.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",(long)indexPath.row];
    
    return cell;