[swift] SwiftUI에서의 화면 회전과 애니메이션 처리 방법

14 Dec 2023

swift

iOS 앱을 개발할 때 화면이 회전하는 경우를 고려하여 레이아웃을 유동적으로 처리해야 합니다. SwiftUI에서는 간단한 방법으로 화면 회전과 애니메이션을 처리할 수 있습니다. 이 글에서는 SwiftUI를 사용하여 화면 회전과 애니메이션을 처리하는 방법에 대해 알아보겠습니다.

화면 회전 감지

SwiftUI에서는 @Environment 속성 래퍼를 사용하여 환경 객체를 가져와서 화면의 회전 상태를 감지할 수 있습니다. 앱이 회전되면 sizeClass 속성 값이 변경되므로, 이를 활용하여 화면 회전 이벤트를 처리할 수 있습니다.

import SwiftUI

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    
    var body: some View {
        if horizontalSizeClass == .compact {
            // 가로 모드
            // ...
        } else {
            // 세로 모드
            // ...
        }
    }
}

화면 회전 애니메이션

화면이 회전할 때 애니메이션을 추가하려면 withAnimation 함수를 사용하여 애니메이션을 적용할 수 있습니다. 아래의 예시는 화면 회전 시 rotationEffect를 사용하여 애니메이션을 적용하는 방법을 보여줍니다.

struct ContentView: View {
    @State private var rotationAngle: Double = 0.0
    
    var body: some View {
        Rectangle()
            .frame(width: 200, height: 200)
            .rotationEffect(Angle(degrees: rotationAngle))
            .onTapGesture {
                withAnimation(.linear(duration: 1.0)) {
                    self.rotationAngle += 90
                }
            }
    }
}

이제 화면 회전과 애니메이션을 적용하는 방법에 대해 간단히 알아보았습니다. SwiftUI를 사용하면 간편하게 화면 회전을 감지하고 애니메이션을 적용할 수 있으므로, 다양한 디바이스에서 사용자 경험을 향상시킬 수 있습니다.

더 많은 자세한 내용은 공식 SwiftUI Documentation을 참고하세요.