iOSアプリケーションのレイヤーまとめ
前回までに
・iOS Developer登録(申請篇、アクティベート篇、完結篇)
・iOSアプリで部品を作る・・・①
ということをやってきました。
①で部品の静的な配置(単に置く)
②で部品を動的な配置(動かす)
というイメージです。
おさらいですが、
②の動かすという方法には
・animateWithDuration
・CABasicAnimation
・CATransaction
の３種類があることを学びましたが、
特に２番目と３番目の方法では
[viewBlue.layer addAnimation:animation forKey:@"move-layer”];
のようにlayerというキーワードが出てきます。
このレイヤーについて今回学びましたので書いていこうと思います。
参考にしたのはコチラです
どうやら部品の最小構成単位がUIViewだと思っていたんですが、
さらにそれを構成するものがあって、それがCALayerというものらしいです。
今までは以下のように
・アプリ＝フルーツバスケット
・UIViewController＝(バスケットの中の)リンゴ
・UIViewImage＝(リンゴを構成する)分子
・UIView＝(分子を構成する)原子
のように思っていたんですが(例えがめちゃくちゃ下手って声は置いといて)
それが実は以下のように
・UIView＝原子
・CALayer＝原子核
のようだということが分かってきました。
リンゴを料理するにはそんな細かいレベルまで見る必要はなさそうですが、
アニメーションを試すにはそのレベルまで理解しておいたほうが良さそうです。
上記サイトではCALayerのクールなところとして
・レイヤーのサイズやポジション
・レイヤーの背景色
・“Core Graphics”で描かれた画像やImageを設定できる(画像や Core Graphicsで描写したイメージ)
・レイヤーの角を思い通りに丸くできる
・レイヤーにドロップシャドウを加える事が出来る
・レイヤーの枠線を設定できる
・他にもたくさん！
が挙げられています。
え？！サイズとかポジションって
UIView.frame
UIView.center
とかで変えられるんじゃないのって思っていたんですが、下の方を読んでいくと、
角を丸くしたり、背景に影を挿れたりするにはCALayerで実現できるらしいです。
早速コードを書いてみました。
今回の目標は影が付いた赤い丸角のCALayerを作ることです。
CALayer *sublayer = [CALayer layer];//CALayerの作成
sublayer.backgroundColor = [UIColor redColor].CGColor;//赤い色にする
sublayer.cornerRadius = 20.0;//丸角：円の半径は20px
sublayer.shadowOffset = CGSizeMake(10, 3);//右方向に10、下方向に３の強さで影を作る
sublayer.shadowRadius = 5.0;//影の角の丸さ(円半径)
sublayer.shadowColor = [UIColor blackColor].CGColor;//影の色
sublayer.shadowOpacity = 0.8;//影の濃さ
sublayer.frame = CGRectMake(30, 30, 150, 200);
[self.view.layer addSublayer:sublayer];
影の濃さは元記事だとつまらないので
左上20度(適当)から強い光源に放射された時の影を描きました。
実行結果は以下です。
できました。
それだけではつまらないので
せっかくならちょっと工夫して丸い円自体を描いてみようと思います。
変更するのは二カ所(二行)だけです。
layerのcornerRadiusは角を丸くする時の(仮想的な)円の半径ですので
作りたい円の半径を定義してcornerRadiusとして設定した上で
layer自体の幅と高さを(直径だから)半径の２倍に設定してあげればよいだけです。
今度は青い円を描いてみました。
簡単ですね。
段々色んなことができそうです。
次回はこのレイヤーを使って少し複雑なアニメーションに挑戦してみようと思います。
続きます。
