【iOS】UIButtonにボーダーラインを引けるようにする

4辺に線を引けるようにしたUIButtonを紹介します。

色と太さのほか、各辺の開始点・終了点のオフセットを指定できます。

画面回転もOK。（わかりづらい）

縦に並べる時にけっこう良い。

コード

import UIKit

class BorderedButton: UIButton {
    private var topBorder: CALayer = CALayer()
    private var bottomBorder: CALayer = CALayer()
    private var leftBorder: CALayer = CALayer()
    private var rightBorder: CALayer = CALayer()
    private var layers: [CALayer] = []
    private var widths: [CGFloat] = [0, 0, 0, 0]
    private var startOffsets: [CGFloat] = [0, 0, 0, 0]
    private var endOffsets: [CGFloat] = [0, 0, 0, 0]
    

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUp()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUp()
    }
    private func setUp() {
        layers = [topBorder, bottomBorder, leftBorder, rightBorder]
        layers.forEach {
            $0.backgroundColor = UIColor(red: 221/255, green: 221/255, blue: 221/255, alpha: 0.92).cgColor
            self.layer.addSublayer($0)
        }
    }
    func setBorderColor(_ color: UIColor) {
        layers.forEach {
            $0.backgroundColor = color.cgColor
        }
    }
    func setTopBorder(width: CGFloat, startOffset: CGFloat, endOffset: CGFloat) {
        widths[0] = width
        startOffsets[0] = startOffset
        endOffsets[0] = endOffset
    }
    func setBottomBorder(width: CGFloat, startOffset: CGFloat, endOffset: CGFloat) {
        widths[1] = width
        startOffsets[1] = startOffset
        endOffsets[1] = endOffset
    }
    func setLeftBorder(width: CGFloat, startOffset: CGFloat, endOffset: CGFloat) {
        widths[2] = width
        startOffsets[2] = startOffset
        endOffsets[2] = endOffset
    }
    func setRightBorder(width: CGFloat, startOffset: CGFloat, endOffset: CGFloat) {
        widths[3] = width
        startOffsets[3] = startOffset
        endOffsets[3] = endOffset
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layoutBorderFrame()
    }
    private func layoutBorderFrame() {
        topBorder.frame = CGRect(x: startOffsets[0], y: 0, width: self.frame.width - (startOffsets[0] + endOffsets[0]), height: widths[0])
        bottomBorder.frame = CGRect(x: startOffsets[1], y: self.frame.height - widths[1], width: self.frame.width - (startOffsets[1] + endOffsets[1]), height: widths[1])
        leftBorder.frame = CGRect(x: 0, y: startOffsets[2], width: widths[2], height: self.frame.height - (startOffsets[2] + endOffsets[2]))
        rightBorder.frame = CGRect(x: self.frame.width - widths[3], y: startOffsets[3], width: widths[3], height: self.frame.height - (startOffsets[3] + endOffsets[3]))
    }
}

使い方

以下のように太さ・オフセット・色を指定できます。

let button = BorderedButton()
button.setTopBorder(width: 4, startOffset: 240, endOffset: 0)
button.setRightBorder(width: 36, startOffset: 0, endOffset: 0)
button.setLeftBorder(width: 36, startOffset: 0, endOffset: 0)
button.setBottomBorder(width: 4, startOffset: 0, endOffset: 240)
button.setBorderColor(UIColor.orange)
button.setTitle("Hello Bordered Button", for: .normal)
button.setTitleColor(.black, for: .normal)