【Swift】UIViewのおすすめExtension – その１

今回は僕が作ったUIViewのExtensionのテンプレートを紹介しようと思います。よく使用するものをまとめているので使い勝手がいいと思います。動作についての保証はできませんが、自由にコピペして使ってもらって構いません。

環境
角丸の設定
ボーダーの設定
影の設定
実機で動作を見る
コード

環境

今回のスクショは以下の環境で撮影したものです。

Xcode13.2.1
iOS15 iPhone12 Pro MAX

角丸の設定

Viewの角を丸くする設定です。

@IBInspectable var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
        layer.masksToBounds = newValue > 0
    }
}

@IBInspectable を使用することでstoryboard上で設定できるようにしています。（ただし、ここで設定してもstoryboard上には反映されません。実機やシミュレータで確認してください。）

ボーダーの設定

ボーダーの幅と色を設定できる機能です。これもstoryboardから設定できます。

    // ボーダーの幅設定
    @IBInspectable var borderWidth: CGFloat {
        get {
            return self.layer.borderWidth
        }
        set {
            self.layer.borderWidth = newValue
        }
    }

    // ボーダーカラーの設定
    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: self.layer.borderColor!)
        }
        set {
            self.layer.borderColor = newValue?.cgColor
        }
    }

影の設定

影の色、アルファ値、オフセット、ぼかし量を設定できます。

アルファ値は0~1の範囲で指定します。

オフセットは縦横にどれくらいズラして表示するかを設定します。

ぼかし量は0~1を設定でき、０なら影は表示されず、１なら全くボケない（縁がくっきりしている）影が表示されます。

    // 影の色設定
    @IBInspectable var shadowColor: UIColor? {
        get {
            return layer.shadowColor.map { UIColor(cgColor: $0) }
        }
        set {
            layer.shadowColor = newValue?.cgColor
            layer.masksToBounds = false
        }
    }

    // 影の透明度の設定
    @IBInspectable var shadowAlpha: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }

    // 影のオフセット設定
    @IBInspectable var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.shadowOffset = newValue
        }
    }

    // 影のぼかし量の設定
    @IBInspectable var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue
        }
    }

実機で動作を見る

これらの設定をして実機で動作を見てみましょう。

このような見た目になります。（わかりやすくViewの背景をオレンジに設定しています。）

コード

今回紹介したコードをまとめたものがこちらです。

import UIKit

extension UIView {

    // 角丸の設定
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    // ボーダーの幅設定
    @IBInspectable var borderWidth: CGFloat {
        get {
            return self.layer.borderWidth
        }
        set {
            self.layer.borderWidth = newValue
        }
    }

    // ボーダーカラーの設定
    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: self.layer.borderColor!)
        }
        set {
            self.layer.borderColor = newValue?.cgColor
        }
    }

    // 影の色設定
    @IBInspectable var shadowColor: UIColor? {
        get {
            return layer.shadowColor.map { UIColor(cgColor: $0) }
        }
        set {
            layer.shadowColor = newValue?.cgColor
            layer.masksToBounds = false
        }
    }

    // 影の透明度の設定
    @IBInspectable var shadowAlpha: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }

    // 影のオフセット設定
    @IBInspectable var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.shadowOffset = newValue
        }
    }

    // 影のぼかし量の設定
    @IBInspectable var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue
        }
    }

}