效果如下

image

分析

1、由于第一個cell和header有疊加效果，但是cell單獨設置clipsToBounds為NO并不能達到效果，所以這種方案行不通；

self.contentView.clipsToBounds = NO;

2、考慮到還要兼容header下拉放大的效果，所以將背景圖和第一個cell作為單獨的header能夠實現效果，但需要單獨處理數據源，將列表中的第一條取出來填充到header里面，有點麻煩但能達到效果；

image

3、最后說說我實現的方式：

/// 需要遮罩header部分的高度
static NSInteger kNeedMaskHeaderHeight = 60;
/// 需要占位假header的高度
static NSInteger kFakeHeaderHeight = 180;


// 1.創建一個空白且透明的header，用來占位
UIView *fakeHeader = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, kFakeHeaderHeight)];
fakeHeader.backgroundColor = UIColor.clearColor;
self.tableView.tableHeaderView = fakeHeader;
[self.tableView reloadData];

// 2.將真正的header添加到tableView上面
[self.tableView addSubview:self.headerView];
[self.headerView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.tableView);
    make.width.equalTo(self.tableView);
    make.height.equalTo(@(kFakeHeaderHeight + kNeedMaskHeaderHeight));
}];

// 3.移除透明的空白占位header，否則會阻擋交互
[self.tableView.tableHeaderView removeFromSuperview];

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    // 4.將真正的header置于tableView視圖層級最底下
    [self.tableView sendSubviewToBack:self.headerView];
}

Demo鏈接

• Github示例

總結

積極總結UI技巧，能夠幫助我們快速完成業務。