The project has a card effect display style, that is, a table in the shape of a card, with shadows and borders.

  • Add a shadow and a border to the header, footer, and cell of the UITableView. Further, add a View to the top left and right parts of the tableViewHeader, add a view to the bottom left and right parts of the tableViewFooter, add a View to the left and right parts of the cell, and finally add gradients to all of these views.

  • rendering

  • Core code:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, headerViewHeight)]; view.backgroundColor = [UIColor whiteColor]; UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(2, 4, 6, headerViewHeight-4)]; [view addSubview:leftView]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, headerViewHeight)]; Label. text = [NSString stringWithFormat:@" group header %ld", section+1]; [view addSubview:label]; CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = leftView.bounds; gradient.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].cgcolor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, nil]; gradient.startPoint = CGPointMake(0, 0); gradient.endPoint = CGPointMake(1, 0); [leftView.layer addSublayer:gradient]; UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - 8, 4, 6, headerViewHeight-4)]; [view addSubview:rightView]; CAGradientLayer *gradientR = [CAGradientLayer layer]; gradientR.frame = rightView.bounds; gradientR.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradientR.startPoint = CGPointMake(0, 0); gradientR.endPoint = CGPointMake(1, 0); [rightView.layer addSublayer:gradientR]; UIView *topV = [[UIView alloc] initWithFrame:CGRectMake(6, 2, kScreenWidth - 12, 2)]; [view addSubview:topV]; CAGradientLayer *gradientT = [CAGradientLayer layer]; gradientT.frame = topV.bounds; gradientT.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradientT.startPoint = CGPointMake(0, 1); gradientT.endPoint = CGPointMake(0, 0); [topV.layer addSublayer:gradientT]; return view; } - (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section { UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, footerViewHeight)]; view.backgroundColor = [UIColor whiteColor]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, footerViewHeight)]; Label. text = [NSString stringWithFormat:@" end %ld", section+1]; [view addSubview:label]; UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(2, 0, 6, footerViewHeight-4)]; [view addSubview:leftView]; CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = leftView.bounds; gradient.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradient.startPoint = CGPointMake(1, 0); gradient.endPoint = CGPointMake(0, 0); [leftView.layer addSublayer:gradient]; UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - 8, 0, 6, footerViewHeight-4)]; [view addSubview:rightView]; CAGradientLayer *gradientR = [CAGradientLayer layer]; gradientR.frame = rightView.bounds; gradientR.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradientR.startPoint = CGPointMake(0, 0); gradientR.endPoint = CGPointMake(1, 0); [rightView.layer addSublayer:gradientR]; UIView *bottomV = [[UIView alloc] initWithFrame:CGRectMake(6, footerViewHeight-4, kScreenWidth - 12, 2)]; [view addSubview:bottomV]; CAGradientLayer *gradientB = [CAGradientLayer layer]; gradientB.frame = bottomV.bounds; gradientB.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradientB.startPoint = CGPointMake(0, 0); GradientB. The endPoint = CGPointMake (0, 1.0); [bottomV.layer addSublayer:gradientB]; return view; }Copy the code
  • Custom cell demo:
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(2, 0, 6, cellHeight)]; [self addSubview:leftView]; CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = leftView.bounds; // Array gradient.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradient.startPoint = CGPointMake(1, 0); gradient.endPoint = CGPointMake(0, 0); [leftView.layer addSublayer:gradient]; UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - 8, 0, 6, cellHeight)]; [self addSubview:rightView]; CAGradientLayer *gradientR = [CAGradientLayer layer]; gradientR.frame = rightView.bounds; GradientR. Colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.12].CGColor, (id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) Blue :(0/255.0) alpha:0.0].CGColor, nil]; gradientR.startPoint = CGPointMake(0, 0); gradientR.endPoint = CGPointMake(1, 0); [rightView.layer addSublayer:gradientR]; self.testLabel = [UILabel new]; [self addSubview:self.testLabel]; self.testLabel.frame = self.frame; } return self; }Copy the code
  • Demo address, welcome peers to exchange and study together.