平面なデザインで画面ができてくると、何か影を付けて締めたくなってきました。
UIとして動かせるところに影を付ければ、
触れる感も出せるだろうと思い、各ボタンと時計の文字盤に使っているCALayerに影を付けることにしました。
早速、ググってみました。
まず、UIButtonの影の付け方については、こちらのサイトで紹介されていました。
それを参考に、自分のコードへ以下のように組み込んでみました。
|
1 2 3 4 5 6 |
button_toHelp.frame =CGRectMake(5, 5, 90, 50); [button_toHelp setImage:[UIImage imageNamed:@"button_toMenu.png"] forState:UIControlStateNormal]; [button_toHelp addTarget:self action:@selector(switchHelp) forControlEvents:UIControlEventTouchUpInside]; button_toHelp.layer.shadowOpacity = 0.5f;//shadow button_toHelp.layer.shadowOffset = CGSizeMake(2, 2);//shadow [self.view addSubview:button_toHelp]; |
UIButtonの名前に続けて、.layer.shadow〜ってやれば良いようです。
|
1 2 |
ボタン名.layer.shadowOpacity = X.Xf;//影の透明度 ボタン名.layer.shadowOffset = CGSizeMake(2, 2);//影のボケ足 |
透明度は、floatingでも整数でも大丈夫でした。
影のボケ足は、距離と方向を表すようです。
2,2とすれば、右下に2pxのボケ足が伸びます。
また、参考にしたサイトにも載っていましたが、表示される画像の通りに影が付いてくれました。
続いて、CALayerへの影付けですが、UIButtonとほとんど変わらないことが、こちらのサイトの紹介で分かりました。
自分のコードに組み込んだら、以下のようになりました。
|
1 2 3 4 5 6 7 8 |
layer_clock_plate =[CALayer layer]; layer_clock_plate.bounds =CGRectMake(0, 0, 300, 300); layer_clock_plate.position =CGPointMake(160, 180); layer_clock_plate.contents =(id)[UIImage imageNamed:@"oboeyo_clock_plate2.png"].CGImage; layer_clock_plate.zPosition =25; layer_clock_plate.shadowOpacity = 0.5f;//shadow layer_clock_plate.shadowOffset = CGSizeMake(3, 3);//shadow [baseLayer addSublayer:layer_clock_plate]; |
UIButtonのに比べて、レイヤーの名前の後に「.layer」が無いだけです。
UIButton同様、こちらも表示される画像の通りに影が付いてくれました（コードで円を描くのが面倒だったので、透過png画像を使用しています）。
|
1 2 |
レイヤーの名前.shadowOpacity = 0.5f;//影の透明度 レイヤーの名前.shadowOffset = CGSizeMake(3, 3);//影のボケ足 |
CALayer（中央の文字盤）とUIButton（画面隅のボタンとカニ）に影を付けた結果が以下です。
これで、UIには影が付き、少し画面が締まって奥行きが出てきた気がします。
さらに、参考にしたサイトには、影のボケ具合など、もっと様々なオプションが紹介されていました。
機会があったら、使ってみたいと思います。
★★★自作iPhoneアプリをAppStoreでリリースするまでの道のり★★★