項(xiàng)目中有卡片效果顯示的樣式餐济，即一個(gè)表格呈卡片狀，有陰影及邊框絮姆。
- 思路：將 UITableView 的每個(gè) section 統(tǒng)一設(shè)置成卡片效果篙悯，即同時(shí)給 UITableView 的 header，footer, cell 添加陰影及邊框鸽照。進(jìn)一步說矮燎，就是給 tableViewHeader 的左上右部分添加 view，給 tableViewFooter 的左下右部分添加 view澜沟，給 cell 的左右部分添加 view峡谊，最后給這些 view 全部添加漸變色。
- 效果圖
卡片效果圖
- 核心代碼：
- (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:@" 組頭%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:@" 組尾%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.endPoint = CGPointMake(0, 1.0);
[bottomV.layer addSublayer:gradientB];
return view;
}
- 自定義的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;
// 漸變色數(shù)組
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;
// 漸變色數(shù)組
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;
}
- demo地址，歡迎各位同行一起交流學(xué)習(xí)馒索。
