UIViewの角丸(Rounded Corners)みんなどうしてる？

Viewの角を丸くしたいことって結構ありますね。@IBDesignableと@IBInspectableを使うとマウス操作で調整できて便利なので、今までUIViewを拡張して使っていたのですが「そう言えばStoryboardで反映されてないなぁ」と気づきまして調べてみると、なんと、extensionの@IBDesignableは効かないそうです^^;;;重くなるからってことでしょうか。

extensionが無理となるとサブクラスなのですが、クラスを絞れないんですよね。角丸Viewだけを使うとかも考えましたが、結構いろんなパーツを丸くしたい時があります。

そこで万能な角丸クラスは諦めてUser Defined Runtime Attributesに直接書く方法で妥協することにしました。

角丸にしたい時はlayer.cornerRadiusをNumberで設定します。枠線の色を設定したい時はlayer.borderColorですが、CGColor型で設定できないのでUIColorで設定できるように最低限の拡張だけは施しておきます。

extension UIView {
    
    @objc var borderColor: UIColor? {
        get {
            return layer.borderColor.map(UIColor.init)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
    
    @objc var shadowColor: UIColor? {
        get {
            return layer.shadowColor.map(UIColor.init)
        }
        set {
            layer.shadowColor = newValue?.cgColor
        }
    }
}

@IBInspectableはextensionでも効くので付けても構いません。これで、ある程度CALayerの値が変更できるようになりました。

このままではStoryboardで確認できないので、以下の@IBDesignable付きのサブクラスを指定します。これで値を変えてもリアルタイムに反映されますが、古いMacだと読み込みで少々待たされます。

@IBDesignable class IBDesignableView: UIView {}
@IBDesignable class IBDesignableImageView: UIImageView {}
@IBDesignable class IBDesignableTextField: UITextField {}
@IBDesignable class IBDesignableTextView: UITextView {}
@IBDesignable class IBDesignableButton: UIButton {}

それぞれクラスに@IBDesignableを付けただけなので、不要ならすぐ元に戻せます。