[Swift] 三角形のボタンを作る

概要

一般的なUIButtonで作成される四角いボタンになりますが、
UIButtonを利用して、三角形のボタンを作成する方法をご紹介します。

UIButtonを継承したクラスを作成

UIButtonを継承して専用のクラスを作成します。

triangleButton.swift

class TriangleButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        drawTriangle()
    }

    private func drawTriangle() {
        let path = createTrianglePath()

        let mask = CAShapeLayer()
        mask.path = path.cgPath

        self.layer.masksToBounds = true
        self.layer.mask = mask

        let borderShape = CAShapeLayer()
        borderShape.path = path.cgPath
        borderShape.lineWidth = 4.0
        borderShape.strokeColor = UIColor.red.cgColor
        borderShape.fillColor = UIColor.clear.cgColor
        self.layer.insertSublayer(borderShape, at: 0)
    }

    private func createTrianglePath() -> UIBezierPath {
        let rect = self.frame
        let path = UIBezierPath()
        path.move(to: CGPoint(x:rect.width, y:0))
        path.addLine(to: CGPoint(x:rect.width, y:rect.height))
        path.addLine(to: CGPoint(x:0, y:rect.height))
        path.close()
        return path
    }
}

上記コードをstoryboard上でUIButtonのClassに指定して実行する事で三角形のボタンを表示する事ができます。
なお、UIButtonのテキストやボタン画像などを、三角形の中央に配置するためには、StroyboardのInset要素を利用することでボタンの中央に表示する事ができるようになります。

ボタンのタッチ反応領域を設定する

ただし、上記のコードだけでは三角形の透過部分(上図画像のボタン左上部)がタッチに反応する状態のままです。

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    if !createTrianglePath().contains(point) {
        // タッチ領域外
        return nil
    } else {
        return super.hitTest(point, with: event)
    }
}

上記のようにhitTestを利用して適切に反応領域を設定することで、ボタンとして表示されている箇所だけに反応するボタンを作成する事ができます。