[Swift] [UIView] UIView,UIStackViewに枠線(上下左右)をつけるExtension

はじめに

UIStackViewに枠線を付けようと思ったときに使ったExtensionの備忘録です。

イメージ

こんな感じにできますー

BEFORE	AFTER

コード

• widthと書いてありますが、こちらは枠線の太さを調整するパラメーターになっています。
• widthが固定の値しか使わないのであればpositionと同じようにenumで定義してあげるのも良いと思います。

import UIKit

enum BorderPosition {
    case top, left, right, bottom
}

extension UIView {

    /// viewに枠線を表示する
    /// - Parameters:
    ///   - width: 太さ
    ///   - color: 色
    ///   - position: 場所
    func addBorder(width: CGFloat, color: UIColor, position: BorderPosition) {
        let border = CALayer()

        switch position {
        case .top:
            border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: width)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        case .left:
            border.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.height)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        case .right:
            border.frame = CGRect(x: self.frame.width - width, y: 0, width: width, height: self.frame.height)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        case .bottom:
            border.frame = CGRect(x: 0, y: self.frame.height - width, width: self.frame.width, height: width)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        }
    }
}

使い方

枠線の色、太さ、場所（top, left, right, bottom）で調整が可能。

// viewの上部(top)に黒の枠線をつける
view.addBorder(width: 3, color: .black, position: .top)

// viewの左(left)に黒の枠線をつける
view.addBorder(width: 3, color: .black, position: .left)

// viewの右(right)に黒の枠線をつける
view.addBorder(width: 3, color: .black, position: .right)

// viewの下部(bottom)に黒の枠線をつける
view.addBorder(width: 3, color: .black, position: .bottom)

// stackViewでもできる
stackView.addBorder(width: 3, color: .red, position: .top)

注意

コードでviewのAutoLayoutを実装している場合に、
self.frame.widthとself.frame.heightが0.0になってしまうため、
layoutIfNeededかviewDidAppear内で、addBorderをする。

まとめ

viewに枠線をつけるだけのシンプルなextensionでした。
extensionって便利ですよねー　
extensionのストックためたい。