삼각형 버튼 전환

개요

일반 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
    }
}

스토리보드에 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를 이용하여 반응 구역을 적절하게 설정함으로써 버튼으로 표시된 곳에만 반응하는 단추를 만들 수 있다.