Cocoa TouchでUIViewの境界線（ボーダー）の色と太さを変更する2つの方法

この記事では、iOSアプリ開発においてViewの境界線（ボーダー）の色や太さを変更する方法を解説します。

実現方法は主に2つあります。それぞれの手順と特徴を詳しく見ていきましょう。

方法1：コードを直接記述する

まずは最もシンプルな方法です。「backView」という名前のビューがあると仮定して、そのビューに境界線の太さと色を設定してみましょう。以下のようにコードを記述します。

backView.layer.borderWidth = 5 // 任意の整数値を指定できます
backView.layer.borderColor = colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1)

このコードを実行すると、幅5ポイントの濃い青色の境界線がビューに追加されます。なお、CALayerのborderColorプロパティにはCGColor型の値を渡す必要がある点に注意してください。実行結果は下図の通りです。

方法2：@IBDesignableと@IBInspectableを使ったUIView拡張を作成する

次に紹介するのは、Storyboard上で直接スタイルを編集できるようにする方法です。@IBDesignableと@IBInspectableを活用して、UIViewの拡張を作成します。

@IBDesignable
class DesignableView: UIView {
}
extension UIView {
    @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
            }
        }
    }
}

このコードにより、UIViewにborderWidthとborderColorというカスタムプロパティが追加されます。これらのプロパティはAttribute Inspectorから編集可能になり、Storyboard上で値を変更すると、その場でライブレンダリングされて結果が即座に反映されるのが大きなメリットです。コードをビルドして実行しなくても視覚的に確認できるため、UI調整の効率が大幅に向上します。

下図は方法2の出力例で、Storyboard上でリアルタイムに描画されている様子を示しています。