【iOS,Swift】上下左右の罫線を指定可能なCustomViewを作った（@IBDesignable）

環境

• Xcode 13.2.1
• Swift 5.5.2

上下左右に罫線となるUIViewを配置したXibファイルを作る

制約は省きますが、↓画像のような、上下左右にWidth:5pxのUIViewを配置したXibファイルを作ります
（わかりやすいように上下左右の罫線はそれぞれ別の色にしてます）

※このXibのファイル名は「DesinableBorderView.xib」としてます。

Xibファイルに対応したCustomViewクラスを作成する

コードそのまま載せます。
ポイントとしては、上下左右の表示・非表示を設定ができる、BoolのIBInspectable　を作ったことです。

import UIKit

@IBDesignable
class DesinableBorderView: UIView {

    /*
      IBOutletを引く時は、XibファイルのFile's Ownerにこのクラスを指定する
     */
    @IBOutlet weak var leftBorder: UIView!
    @IBOutlet weak var rightBorder: UIView!
    @IBOutlet weak var topBorder: UIView!
    @IBOutlet weak var bottomBorder: UIView!
    
    /// 左の線を描画するかどうか
    @IBInspectable var isHiddenLeft : Bool = true {
        didSet {
            if self.rightBorder != nil {
                self.leftBorder.isHidden = isHiddenLeft
            }
        }
    }
    /// 右の線を描画するかどうか
    @IBInspectable var isHiddenRight : Bool = true {
        didSet {
            if self.rightBorder != nil {
                self.rightBorder.isHidden = isHiddenRight
            }
        }
    }
    /// 上の線を描画するかどうか
    @IBInspectable var isHiddenTop : Bool = true {
        didSet {
            if self.topBorder != nil {
                self.topBorder.isHidden = isHiddenTop
            }
        }
    }
    /// 下の線を描画するかどうか
    @IBInspectable var isHiddenBottom : Bool = true {
        didSet {
            if self.bottomBorder != nil {
                self.bottomBorder.isHidden = isHiddenBottom
            }
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadNib()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadNib()
    }
    
    override func prepareForInterfaceBuilder() {
        // StoryBoard上でリアルタイムに反映する用
        super.prepareForInterfaceBuilder()
        loadNib()
    }
    
    func loadNib() {
        NSLog("loadNib")
        let bundle = Bundle(for: type(of: self))
        let nibName = String(describing: DesinableBorderView.self)
        let view = UINib(nibName: nibName, bundle: bundle).instantiate(withOwner: self, options: nil).first as! UIView
        view.frame = self.bounds
        addSubview(view)
    }
}

このファイルを作成したら、Xibファイルのほうに戻って、FilesOwnerやIBOutletを引くと、
≡みたいなアイコンのタブに、IBInspectable の選択肢が出ると思います。

「Is Hidden Left」をONにすれば、左の罫線を非表示できます。
「Is Hidden Left」をOFFにすれば、左の罫線を表示できます。
（ほかの方向も同じです）

最後に

需要があるかわかりませんが、
罫線を引くのにプログラムでいちいちやらなきゃいけなくてめんどくて、
IBDesignable　でリアルタイムで見れるようなやつを作りました。