[Swift5] 맞춤형 버튼의 헤더 영역 확대

9177 단어 iOSSwiftuikittech
※ 아래 기사의 코드를 기반으로 한 스위프트 5판.
https://qiita.com/KokiEnomoto/items/264f26bfa92d06b1996e
사용자 정의 단추의 헤더 영역을 확대하려면 아래 단추를 만들면 된다.
import UIKit

class CustomButton: UIButton {
    var insets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        var rect = bounds
        rect.origin.x -= insets.left //①
        rect.origin.y -= insets.top //②
        rect.size.width += insets.left + insets.right //③
        rect.size.height += insets.top + insets.bottom //④

        return rect.contains(point) //⑤
    }
}
point 방법은 헤더의 좌표가 이 View의 범위 내에 있는지 여부를 판정한다.
코트 뭐 하냐면요.
① 버튼 자체의 왼쪽 상단에 있는 x 좌표인 insets.좌표를left의 왼쪽으로 옮기기
② 버튼 자체 왼쪽 위에 있는 y 좌표 insets.top점에서 좌표를 엇갈리다
③ 버튼 자체의 width에서 insets.레프트 insets를rignt의 값을 더하다
④ 버튼 자체 높이 insets.top와 insets.bottom의 값을 더하다
⑤②의 x, y 좌표를 기점으로 하여 너비 ③, 높이 ④의 구역에 헤드의 위치가 포함되는지 판단한다.
를 참고하십시오.
간단히 말하다
insets에서 각 방향으로 확대할 크기를 지정하면 해당 단추의 영역이 변경됩니다
그러니까
음수를 지정하여 영역을 축소할 수도 있습니다.
여기서부터 샘플 코드를 사용해 보세요.
CustoomButon을 사용하여 레이블 문을 작성하여 ON, OFF 버튼으로 전환합니다.
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var customButton: CustomButton!
    private var isOn: Bool = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        customButton.insets = UIEdgeInsets(top: 100, left: 50, bottom: 0, right: -50)
        customButton.addTarget(self, action: #selector(tapButton), for: .touchUpInside)
    }

    @objc func tapButton(_ sender: UIButton) {
        isOn.toggle()
        if isOn {
            statusLabel.text = "ON"
        } else {
            statusLabel.text = "OFF"
        }
    }
}
insets에서 확대(축소)할 방향과 크기를 Custom Buton의 사용 방법으로 지정합니다.
이해하기 편하도록view에 색을 칠합니다.

검은색 테두리:cutomButon(모서리 길이 50pt의 사각형)
자주색: 변 길이 50pt의 정사각형
빨간색: 모서리 길이 100pt의 정사각형
그린: 모서리 길이 150pt의 정사각형
중앙의 검은 테두리에 둘러싸인custoomButon에 customButton.insets = UIEdgeInsets(top: 100, left: 50, bottom: 0, right: -50)을 지정했기 때문에 100pt를 위로 확대하고 50pt의 헤드셋 구역을 왼쪽으로 확대하며 아래로는 변화가 없고 오른쪽으로 50pt의 헤드셋 구역을 축소한다.
헤드셋이 불가능한 영역을 회색으로 설정한 영역은 다음과 같습니다.
원래 영역(보라색 사각형)에서 헤드를 뺄 수 있는 영역이 변경되었습니다.

좋은 웹페이지 즐겨찾기