UIButton 터치영역 넓히기

디자인대로 버튼사이즈를 정해놓으면 터치 영역이 작아져서 사용하기 불편한 상황이 생긴다.

버튼의 영역을 넓혀야 하는데 예전에 주로 사용하던 방법은 버튼의 영역을 크게 만들고 여백을 주는 방법을 사용했었다.

버튼의 크기가 width: 20, height: 20의 사이즈였다면 대부분 버튼에 이미지가 들어가 있기때문에 버튼의 영역을 늘리면 이미지가 깨지거나 할것이다.
이때 button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)버튼의 여백을 설정해주고
width 값을 40, height값을 40으로 늘려주는 방식을 사용했었다.

버튼의 터치영역을 넓힐 수가 있다.

hitTest를 사용하는 방법중 하나는 터치의 영역을 넓힐 수가 있는데 이런식으로 customButton을 만들어서 영역을 더 넓게 할 수 있다.

let test2Btn = WideButton()
test2Btn.translatesAutoresizingMaskIntoConstraints = false
test2Btn.addTarget(self, action: #selector(onClick2), for: .touchUpInside)
test2Btn.backgroundColor = .blue
self.view.addSubview(test2Btn)

let test2BtnCenX = NSLayoutConstraint(item: test2Btn, attribute: .centerX,
                                     relatedBy: .equal, toItem: self.view,
                                     attribute: .centerX, multiplier: 1.0,
                                     constant: 0.0)
let test2BtnCenY = NSLayoutConstraint(item: test2Btn, attribute: .centerY,
                                     relatedBy: .equal, toItem: self.view,
                                     attribute: .centerY, multiplier: 1.0,
                                     constant: 0.0)
let test2BtnW = NSLayoutConstraint(item: test2Btn, attribute: .width,
                                     relatedBy: .equal, toItem: nil,
                                     attribute: .notAnAttribute, multiplier: 1.0,
                                     constant: 50.0)
let test2BtnH = NSLayoutConstraint(item: test2Btn, attribute: .height,
                                     relatedBy: .equal, toItem: nil,
                                     attribute: .notAnAttribute, multiplier: 1.0,
                                     constant: 50.0)
self.view.addConstraints([test2BtnCenX, test2BtnCenY, test2BtnW, test2BtnH])


@objc func onClick2() {
  print("click2")
}

class WideButton: UIButton {
    override func hitTest(_ point: CGPoint, with _: UIEvent?) -> UIView? {
        guard !isHidden, isUserInteractionEnabled, alpha > 0 else {
            return nil
        }
        let expandedBounds = bounds.insetBy(dx: -20, dy: -20)
        return expandedBounds.contains(point) ? self : nil
    }
}