iPhone / iOSでUIViewの下に影（シャドウ）を描画する方法

iOS開発において、UIを魅力的に仕上げるためには、さまざまな属性を工夫して組み合わせることが欠かせません。Viewの周囲や下部に影（シャドウ）を描画したい場合には、LayerとViewを適切に操作する必要があります。

ここでは、UIViewに影をつけるための2つの方法を紹介します。

方法1：必要な箇所に直接コードを記述する

最もシンプルなのが、影を表示したい場所でCALayerのプロパティを直接設定する方法です。以下のコードのように、マスク解除・角丸・オフセット・ぼかし半径・不透明度を指定します。

self.layer.masksToBounds = NO;
self.layer.cornerRadius = 2;
self.layer.shadowOffset = CGSizeMake(-5, 10);
self.layer.shadowRadius = 3;
self.layer.shadowOpacity = 0.3;

ポイントとして、masksToBounds = NO を設定しないと影がクリップされて表示されないため注意が必要です。また、shadowOffset の値を変えることで、影の落ちる方向や距離を自由に調整できます。

方法2：IBDesignable・IBInspectableを作成し、Storyboardで使う

もう1つは、@IBDesignable と @IBInspectable を活用して、StoryboardのAttributes Inspectorから直接影のプロパティを設定できるようにする方法です。まず、次のようなUIViewの拡張（extension）を定義します。

@IBDesignable
class DesignableView: UIView { }
extension UIView {
   @IBInspectable
   var shadowRadius: CGFloat {
       get {
           return layer.shadowRadius
       }
       set {
           layer.shadowRadius = newValue
       }
   }
   @IBInspectable
   var shadowOpacity: Float {
       get {
           return layer.shadowOpacity
       }
       set {
           layer.shadowOpacity = newValue
       }
   }
   @IBInspectable
   var shadowOffset: CGSize {
       get {
           return layer.shadowOffset
       }
       set {
           layer.shadowOffset = newValue
       }
   }
   @IBInspectable
   var shadowColor: UIColor? {
       get {
           if let color = layer.shadowColor {
               return UIColor(cgColor: color)
           }
           return nil
       }
       set {
           if let color = newValue {
               layer.shadowColor = color.cgColor
           } else {
               layer.shadowColor = nil
           }
       }
   }
}

このようなextensionを用意しておけば、これらの影関連のプロパティをすべてのStoryboardから利用できるようになります。さらに、@IBDesignable を付与したクラスを使うことで、コードを実行して実機やシミュレータで確認しなくても、Storyboard上で変更結果がリアルタイムに反映されるのが大きなメリットです。デザイナーとの協業時にも、見た目の微調整が格段に効率化されます。

以下は、実際にStoryboardで影を設定した例です。