SwiftUI @NameSpace

📖 @NameSpace란?

@Namespace는 SwiftUI에서 애니메이션에 사용되는 고유 식별자(ID)를 관리하는 역할을 합니다. 이 식별자는 여러 뷰와 함께 사용되며, 일반적으로 부드럽고 동기화된 애니메이션 효과를 만들기 위한 matchedGeometryEffect 수식어와 함께 사용됩니다.

matchedGeometryEffect는 두 뷰 사이의 특정 요소를 동일하게 유지하거나 부드럽게 전환되게 하는 방법을 제공합니다. 이 수식어는 많은 애니메이션 시나리오에서 사용되며, 더욱 쉽게 구현할 수 있습니다.

 

예시코드

import SwiftUI

struct ContentView: View {
    @Namespace private var animation
    @State private var isExpanded = false

    var body: some View {
        VStack(spacing: 40) {
            Button(action: {
                withAnimation() {
                    isExpanded.toggle()
                }
            }) {
                HStack {
                    if isExpanded {
                        Image(systemName: "plus.circle.fill")
                            .matchedGeometryEffect(id: "icon", in: animation)
                            .foregroundColor(.green)
                        Text("추가")
                            .font(.headline)
                            .matchedGeometryEffect(id: "label", in: animation)
                            .foregroundColor(.black)
                    } else {
                        Text("추가")
                            .font(.headline)
                            .matchedGeometryEffect(id: "label", in: animation)
                            .foregroundColor(.black)
                    }
                }
                .frame(width: 150, height: 60)
                .border(Color.black, width: 1)
            }
        }
    }
}

이 예시코드에서는, "추가"라는 텍스트와 "+" 아이콘을 포함하는 버튼을 만듭니다. 버튼을 클릭하면, 아이콘과 텍스트를 함께 표시하게 되며, 상태 변경에 따른 버튼 크기와 위치가 부드럽게 변경됩니다. 이를 수행하기 위해 @Namespace를 사용하여 식별자를 생성하고, matchedGeometryEffect를 사용하여 각 요소의 위치와 크기를 동기화합니다.

 

예시 코드 결과

왼쪽: @NameSpace와 matchedGeometryEffect사용 / 오른쪽: 사용하지 않음

결론

@Namespace는 애니메이션 및 화면 전환을 부드럽게 구현하는데 필요한 고유한 식별자를 생성하는 역할을 합니다. 이 ID는 matchedGeometryEffect와 함께 사용되어 동기화된 애니메이션을 더욱 쉽고 간편하게 구현할 수 있도록 도와줍니다.

참고

https://developer.apple.com/documentation/swiftui/namespace

Namespace | Apple Developer Documentation