iOS開発 - UITableViewのヘッダー、フッター、行にシャドウを追加しながらUITableViewのカード効果を表示する

このプロジェクトでは、カード効果の表示スタイル、つまり、影と境界線を持つカードの形をしたテーブルを採用しています。

• アイデア：UITableViewの各セクションをカード効果に統一します。つまり、UITableViewのヘッダー、フッター、セルにシャドウとボーダーを追加します。さらに、tableViewHeaderの左上と右側にビューを追加し、tableViewFooterの左下と右側にビューを追加し、セルの左側と右側にビューを追加し、最後にこれらすべてのビューにグラデーションカラーを追加します。

• レンダリング

• コアコード

- (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;
}

• セル内のカスタムデモ

- (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;
 // グラデーションカラー配列
 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;
}

• 、交流し、共に学ぶ仲間を歓迎します。