「神は細部に宿る」らしい。
だもんで、ここ最近はなるべく細部の動きと見た目に気をつけてアプリを開発している（つもりだ）。
で、細部を詰めて見た目を良くしようと思うと、ドカドカと画像を貼込む事になって、気がつけば画像リソースのサイズがエライ事になっている。
なんてことがちょっと有ったり無かったりした。
画像ファイルの場合、小さなものでもキロバイト単位のファイルになる。
これが種類を増してくると、チリも積もればナントやらで、あっという間にメガ単位。
そりゃ、アプリのサイズが大きくなる程度なら、ユーザ様にダウンロード時に我慢していただくだけですむ（か？）のだが、
そのリソースはほぼ確実にUI上に貼込まれる訳で、イコール、貴重な実行時のリソースを単なる画像が喰い潰すという現象が発生する。
という訳で、なるべく画像を使わずに、見た目を良くする方法を模索してみた。
具体的には、CALayerを利用して出来る範囲を模索する。
※ キアイを入れればCALayerで、もっともっとイロイロ出来るらしいが、お手軽に画像を置き換える手段として、コピペでなんとかなるレベルで！ というのが、コンセプト。
まずは、出力結果から
この出力得るためのコードが下記、
※view(n)は、上からの順番になっている。
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// view1
// nothing to do.
// view2
// 角丸め
view2.layer.cornerRadius = 15.0f; // 角Rサイズ
view2.clipsToBounds = YES;
// view3
// 縁取り
view3.layer.borderWidth = 4.0f;
view3.layer.borderColor = [UIColor orangeColor].CGColor;
// view4
// 影付け(外)
view4.layer.shadowColor = [UIColor grayColor].CGColor;
view4.layer.shadowOpacity = 0.8f; // 影透明度
view4.layer.shadowRadius = 4.0f; // ぼかし範囲
view4.layer.shadowOffset = CGSizeMake(4.0f, 4.0f);
// view5
// 影付け(内)
// 影の投影はsubLayerへ
CALayer* subLayer = [CALayer layer];
subLayer.frame = view5.bounds;
subLayer.masksToBounds = YES;
subLayer.shadowColor = [UIColor darkGrayColor].CGColor;
subLayer.shadowOpacity = 1.0f; // 影透明度
subLayer.shadowRadius = 4.0f; // ぼかし範囲
subLayer.shadowOffset = CGSizeMake(4.0f, 4.0f);
// 影生成用のパス構築
CGMutablePathRef pathRef = CGPathCreateMutable();
CGPathMoveToPoint( pathRef, nil, -5, -5);
CGPathAddLineToPoint( pathRef, nil, -5, view5.bounds.size.height);
CGPathAddLineToPoint( pathRef, nil, 0, view5.bounds.size.height);
CGPathAddLineToPoint( pathRef, nil, 0, 0);
CGPathAddLineToPoint( pathRef, nil, view5.bounds.size.width, 0);
CGPathAddLineToPoint( pathRef, nil, view5.bounds.size.width, -5);
CGPathCloseSubpath(pathRef);
subLayer.shadowPath = pathRef;
[view5.layer addSublayer:subLayer];
// view6
// グラデーション
CAGradientLayer* gradetionLayer = [CAGradientLayer layer];
gradetionLayer.frame = view6.bounds;
gradetionLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:1.0f],
nil];
gradetionLayer.colors = [NSArray arrayWithObjects:
(id)[UIColor orangeColor].CGColor,
(id)[UIColor yellowColor].CGColor,
(id)[UIColor greenColor].CGColor,
nil];
[view6.layer addSublayer:gradetionLayer];
// view7
// 角丸＋枠＋グラデーション
{
CAGradientLayer* gradetionLayer = [CAGradientLayer layer];
gradetionLayer.frame = view6.bounds;
gradetionLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
gradetionLayer.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:0.75f green:0.75f blue:0.75f alpha:0.4].CGColor,
(id)[UIColor colorWithWhite:1.0f alpha:0.3].CGColor,
nil];
[view7.layer insertSublayer:gradetionLayer atIndex:[view7.layer.sublayers count]-1];
view7.layer.borderColor = [UIColor grayColor].CGColor;
view7.layer.borderWidth = 0.5f;
view7.layer.cornerRadius = 15.0f; // 角Rサイズ
view7.clipsToBounds = YES;
}
// view8
// 丸ボタン（作例）
{
view8.layer.shadowColor = [UIColor darkGrayColor].CGColor;
view8.layer.shadowOpacity = 0.8f; // 影透明度
view8.layer.shadowRadius = 4.0f; // ぼかし範囲
view8.layer.shadowOffset = CGSizeMake(4.0f, 4.0f);
view8.layer.borderColor = [UIColor blueColor].CGColor;
view8.layer.borderWidth = 4.0f;
view8.layer.cornerRadius = 20.0f; // 角Rサイズ
// view8.clipsToBounds = YES; // <- これが有効だと影が表示されない。
}
}
うん、ざっとこんな感じ。
