【iOS/Swift】UIViewに境界線・角丸・影を設定する2つの方法を徹底解説

はじめに

この記事では、iOSアプリ開発においてUIViewに境界線（ボーダー）や影（シャドウ）を追加する方法を解説します。実装アプローチは2つあります。

• 方法1： コードを直接記述して設定する方法
• 方法2： @IBInspectableを使ったUIViewの拡張を作成し、ストーリーボード上で直接編集できるようにする方法

方法1：シンプルなコードで境界線を作成する

境界線は、UIViewが描画される土台となるlayer（CALayer）のプロパティとして定義されています。主な設定項目は「境界線の色（borderColor）」と「境界線の幅（borderWidth）」の2つです。

self.view.layer.borderColor = colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
self.view.layer.borderWidth = 5.0

ビューの角丸（コーナー半径）を設定したい場合は、以下のコードを使用します。

self.view.layer.cornerRadius = 5

上記のコードをシミュレーターで実行すると、次のような結果になります。

影（シャドウ）を設定するには

影を作成する場合は、以下のプロパティを組み合わせて使用します。

• shadowPath：影の形状を定義
• shadowColor：影の色
• shadowOffset：影の位置オフセット
• shadowOpacity：影の不透明度
• shadowRadius：影のぼかし具合

方法2：IBInspectableでストーリーボードから編集可能にする

@IBInspectableを使用すると、これらのプロパティをストーリーボードのAttribute Inspectorから直接編集できるようになります。毎回コードを書く手間が省け、デザインの確認もリアルタイムに行えるため非常に便利です。

以下は、UIViewの拡張（extension）を使って境界線まわりのプロパティをカスタマイズ可能にする例です。

extension UIView {
    @IBInspectable
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
        }
    }
    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    @IBInspectable
    var borderColor: UIColor? {
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set {
            if let color = newValue {
                layer.borderColor = color.cgColor
            } else {
                layer.borderColor = nil
            }
        }
    }
}

このコードをプロジェクトに追加すると、ストーリーボードのAttribute Inspectorに新しい項目（cornerRadius、borderWidth、borderColor）が表示され、そこから直接値を入力して結果を即座に確認できるようになります。実際の画面は以下のようになります。

まとめ

UIViewの装飾は、layerプロパティを操作するだけで簡単に実装できます。単発の設定なら方法1のコード直接記述で十分ですが、複数の画面で同じスタイルを使い回す場合は、方法2のように@IBInspectableで拡張しておくと、ストーリーボードから直感的にデザインでき、開発効率が大幅に向上します。ぜひ用途に合わせて使い分けてみてください。