UIKit으로 그리기 및 터치 이벤트 처리: 사용자 인터랙션 구현

UIKit을 사용한 그리기와 터치 이벤트 처리는 중요한 iOS 개발 테크닉 중 하나입니다. 이 튜토리얼에서는 UIView를 확장하여 그리기 및 터치 이벤트를 처리하는 방법을 단계별로 설명합니다. 이 글을 통해 여러분은 사용자와의 상호작용을 더 풍부하게 만들 수 있는 기술을 익힐 수 있습니다.

UIView 확장하기

그리기와 터치 이벤트를 처리하기 위해서는 UIView 클래스를 서브클래싱할 필요가 있습니다. 이 과정을 통해 우리는 커스텀 뷰를 만들 수 있습니다.

swift
import UIKit

class CustomView: UIView {
    // 기본 설정
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.white
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

그런 다음 draw(_:) 메서드를 재정의하여 그리기를 수행할 수 있습니다. 이 메서드는 뷰의 콘텐츠를 직접 그리기 위해 사용됩니다.

draw(_:) 메서드 재정의

draw(_:)는 Core Graphics를 이용해 다양한 도형을 그릴 수 있습니다. 예제에서는 간단한 원을 그려봅시다.

swift
override func draw(_ rect: CGRect) {
    super.draw(rect)

    if let context = UIGraphicsGetCurrentContext() {
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.width, rect.height) / 4
        let startAngle: CGFloat = 0
        let endAngle: CGFloat = .pi * 2

        context.setFillColor(UIColor.blue.cgColor)
        context.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        context.fillPath()
    }
}

위 코드는 뷰의 중심에 파란색 원을 그립니다. 이제 이 뷰에 터치 이벤트를 추가해 사용자 인터랙션을 구현해봅시다.

터치 이벤트 처리

UIKit에서는 다양한 터치 이벤트를 처리할 수 있는 메서드를 제공합니다. 그 중 가장 중요한 메서드들은 다음과 같습니다:

• touchesBegan(_:with:)
• touchesMoved(_:with:)
• touchesEnded(_:with:)
• touchesCancelled(_:with:)

swift
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let location = touch.location(in: self)
        print("터치 시작 위치: \(location)")
    }
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let location = touch.location(in: self)
        print("터치 이동 위치: \(location)")
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let location = touch.location(in: self)
        print("터치 종료 위치: \(location)")
    }
}

override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let location = touch.location(in: self)
        print("터치 취소 위치: \(location)")
    }
}

이 메서드들은 각각 터치가 시작될 때, 이동할 때, 종료될 때, 그리고 취소될 때 호출됩니다. 콘솔에 터치 위치를 출력하는 간단한 예제를 통해 각 메서드의 역할을 이해해보세요.

실제 구현 예제

이제 실제로 터치 이벤트에 반응해 도형의 색상을 변경하는 예제를 만들어보겠습니다. 다음은 사용자가 특정 위치를 터치할 때마다 원의 색상이 변경되도록 하는 코드입니다.

swift
class CustomView: UIView {
    private var circleColor: UIColor = .blue

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.white
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        if let context = UIGraphicsGetCurrentContext() {
            let center = CGPoint(x: rect.midX, y: rect.midY)
            let radius = min(rect.width, rect.height) / 4
            let startAngle: CGFloat = 0
            let endAngle: CGFloat = .pi * 2

            context.setFillColor(circleColor.cgColor)
            context.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
            context.fillPath()
        }
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        changeCircleColor()
        setNeedsDisplay()
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        changeCircleColor()
        setNeedsDisplay()
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        changeCircleColor()
        setNeedsDisplay()
    }

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        changeCircleColor()
        setNeedsDisplay()
    }

    private func changeCircleColor() {
        circleColor = circleColor == .blue ? .red : .blue
    }
}

이 예제에서는 터치 이벤트가 발생할 때마다 changeCircleColor() 메서드를 호출하고, setNeedsDisplay() 메서드를 통해 draw(_:) 메서드가 다시 호출되도록 합니다. circleColor 프로퍼티를 통해 원의 색상이 변경됩니다.

결론

이 글에서는 UIKit을 사용하여 그리기와 터치 이벤트를 처리하는 방법을 알아보았습니다. 사용자는 이제 직접 UIView를 서브클래싱하여 복잡한 그리기와 인터랙션을 구현할 수 있습니다. 이 튜토리얼을 통해 iOS 애플리케이션에서 사용자 인터페이스를 더욱 풍부하게 만드는 방법을 터득할 수 있을 것입니다.