yo_waka's blog

418 I'm a teapot

UITableViewCellでお手軽に背景グラデーション

テーブルビューのセルにちょっとだけグラデーションかけて立体感を出したい。
いろんなやり方があるっぽくて、どういうやり方が一番いいのか分からないけど、とりあえずdrawRectでCAGradientLayerに色配列を設定してやることにした。

上から下に向けて少しだけ暗くなるグラデーションを繰り返すと真ん中が少しふくらんだように見えて立体感が出る。
昨日ズルいデザインのスライド見ていいね!と思ったので、セルの背景にズルいグレーを使ってみました。

@implemention MyTableViewCell

- (void) drawRect: (CGRect)rect
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.bounds;
    gradient.colors = @[
        (id)[[UIColor hexToUIColor: @"FFFFFF" alpha: 1.0] CGColor],
        (id)[[UIColor hexToUIColor: @"E8E8E8" alpha: 1.0] CGColor]
    ];
    [self.layer insertSublayer: gradient atIndex: 0];
}

@end

色指定に16進数が使いたいので定番ぽいユーティリティをUIColorのカテゴリに定義して使っています。

+ (UIColor*) hexToUIColor: (NSString *)hex alpha: (CGFloat)a
{
	NSScanner *colorScanner = [NSScanner scannerWithString: hex];
	unsigned int color;
	[colorScanner scanHexInt: &color];
	CGFloat r = ((color & 0xFF0000) >> 16) / 255.0f;
	CGFloat g = ((color & 0x00FF00) >> 8) / 255.0f;
	CGFloat b =  (color & 0x0000FF) / 255.0f;
	return [UIColor colorWithRed: r green: g blue: b alpha: a];
}