效果如下
![]()
image
image
分析
1胖笛、由于第一個(gè)cell和header有疊加效果，但是cell單獨(dú)設(shè)置clipsToBounds為NO并不能達(dá)到效果，所以這種方案行不通芋类；
self.contentView.clipsToBounds = NO;
2、考慮到還要兼容header下拉放大的效果界阁，所以將背景圖和第一個(gè)cell作為單獨(dú)的header能夠?qū)崿F(xiàn)效果侯繁，但需要單獨(dú)處理數(shù)據(jù)源，將列表中的第一條取出來填充到header里面泡躯，有點(diǎn)麻煩但能達(dá)到效果贮竟；
image
3丽焊、最后說說我實(shí)現(xiàn)的方式：
/// 需要遮罩header部分的高度
static NSInteger kNeedMaskHeaderHeight = 60;
/// 需要占位假header的高度
static NSInteger kFakeHeaderHeight = 180;
// 1.創(chuàng)建一個(gè)空白且透明的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咕别，否則會(huì)阻擋交互
[self.tableView.tableHeaderView removeFromSuperview];
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
// 4.將真正的header置于tableView視圖層級(jí)最底下
[self.tableView sendSubviewToBack:self.headerView];
}
Demo鏈接
總結(jié)
積極總結(jié)UI技巧技健，能夠幫助我們快速完成業(yè)務(wù)。
