iOS 常用个人中心页面样式的快速实现方案

下面这种个人中心的UI样式，是一种常见的个人中心UI样式，我们这里提供一种比较通用的，也比较完善的快速实现方案

页面分四个部分

页面顶部固定大图

- (UIImageView *)backgroundImgView
{
    if (!_backgroundImgView) {
         _backgroundImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH * 500 / 375 )];
         _backgroundImgView.image = getImageWithName(@"bg_375x500_rendahao");
    }
    return _backgroundImgView;
}

页面头部个人信息视图

- (TPPersonalHeaderView *)headerView
{
    if (!_headerView) {
        _headerView  = [[TPPersonalHeaderView alloc] init];
    }
    return _headerView;
}

主题内容tableView

        self.tableView = [[HeaderInsetTableView alloc] initWithFrame:CGRectMake(0, 0, width, height) style:[self returmCustomTableViewStyle]];
        
        self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        self.tableView.delegate = self;
        self.tableView.dataSource = self;
        self.tableView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin |UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleBottomMargin;
        self.tableView.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0);
        //这里设置成透明色的原因是为了让底部的背景视图能够透出来
        self.tableView.backgroundColor = [UIColor clearColor];
        self.tableView.delaysContentTouches = NO;
        if (@available(iOS 15.0, *)) {
            self.tableView.sectionHeaderTopPadding = 0;
        }

底部footerView

- (void)dealWithWhiteBottom{
/*
这里设置 footerView 的目的就是防止tableView内容过少的时候，底部的背景视图露出来
*/
   UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    view.backgroundColor = PaperColor_FFFFFF;
    self.tableView.tableFooterView = view;
    self.tableView.showsVerticalScrollIndicator = NO;
    /*这里要设置 self.tableView.contentInset，是为了正常滚动
    的时候，不让底部的空白视图展示出来
    */
    self.tableView.contentInset = UIEdgeInsetsMake(self.tableView.contentInset.top, 0, -SCREEN_HEIGHT, 0);
}

设置视图层级关系

    self.view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.backgroundImgView];
    [self.view insertSubview:self.backgroundImgView belowSubview:self.tableView];
    [self.view insertSubview:self.navigatinBar aboveSubview:self.tableView];
    /*当然，这里 也可以直接 
    使用 [self.tableView addsubView: self.headerView]*/
    self.tableView.tableHeaderView = self.headerView;
    self.tableView.backgroundColor = [UIColor clearColor];
    [self.tableView registerClass:[TPPersonDetailListCell class] forCellReuseIdentifier:NSStringFromClass([TPPersonDetailListCell class])];
    [self.tableView registerClass:[TPUserDetailEmptyCell class] forCellReuseIdentifier:NSStringFromClass([TPUserDetailEmptyCell class])];
    [self dealWithWhiteBottom];

给内容设置圆角

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    if (self.dataList.count == 0) {
        TPUserDetailEmptyCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([TPUserDetailEmptyCell class])];
        CAShapeLayer *layer = [[CAShapeLayer alloc] init];
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, ScreenWidth, SCREEN_HEIGHT - CGRectGetHeight(self.headerView.frame)) byRoundingCorners: UIRectCornerTopRight cornerRadii:CGSizeMake(12 * PLUS_SCALE, 12 * PLUS_SCALE)];
        layer.path = path.CGPath;
        cell.layer.mask = layer;
        return cell;
    }
    listContObjectVO *list = self.dataList[indexPath.row];
    NSString *identifier = [TPPersonDetailListCell getTableViewCellIdentiferWithIndexpath:indexPath channelData:list];
    TPPersonDetailListCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (!cell) {
        cell = [[TPPersonDetailListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
    if (indexPath.row == 0) {
        CAShapeLayer *layer = [[CAShapeLayer alloc] init];
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, ScreenWidth, 400) byRoundingCorners: UIRectCornerTopRight cornerRadii:CGSizeMake(12 * PLUS_SCALE, 12 * PLUS_SCALE)];
        layer.path = path.CGPath;
        cell.layer.mask = layer;
    } else {
        cell.layer.mask = nil;
    }
    [cell updateWithModel:list];
    return cell;
}