[swift] SwiftUI에서의 애니메이션과 탭바, 네비게이션 바 효과 적용 방법

14 Dec 2023

swift

SwiftUI는 애플의 최신 UI 프레임워크로, 강력한 애니메이션과 간단한 코드로 탭바 및 네비게이션 바를 커스터마이징하는 기능을 제공합니다. 이 포스트에서는 SwiftUI를 사용하여 애니메이션을 추가하고 탭바 및 네비게이션 바를 사용자 정의하는 방법을 알아보겠습니다.

1. 애니메이션 추가

SwiftUI에서 애니메이션을 추가하는 것은 매우 간단합니다. 예를 들어, scaleEffect 및 rotationEffect와 같은 뷰 수정자(modifier)를 사용하여 애니메이션을 생성할 수 있습니다.

struct AnimatedView: View {
    @State private var isAnimated: Bool = false
    
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
            .scaleEffect(isAnimated ? 1.5 : 1.0)
            .rotationEffect(.degrees(isAnimated ? 45 : 0))
            .onTapGesture {
                withAnimation {
                    isAnimated.toggle()
                }
            }
    }
}

위 코드에서 scaleEffect 및 rotationEffect는 애니메이션의 일부로 상태 변수 isAnimated의 값을 기반으로 하며, onTapGesture에서 withAnimation을 사용하여 변환을 부드럽게 처리합니다.

2. 탭바 및 네비게이션 바 커스터마이징

2.1. 탭바 커스터마이징

SwiftUI에서는 TabView를 사용하여 탭바를 만들고 사용자에게 쉽게 커스터마이징할 수 있습니다.

struct TabBarView: View {
    var body: some View {
        TabView {
            Text("Tab 1")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First Tab")
                }
                .tag(0)
            Text("Tab 2")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second Tab")
                }
                .tag(1)
        }
    }
}

위의 예시 코드는 간단한 두 개의 탭을 만들고 각 탭에 아이콘 및 텍스트를 추가하고 있습니다.

2.2. 네비게이션 바 커스터마이징

네비게이션 바의 외관을 변경하려면 NavigationView와 NavigationBarTitle을 사용하여 타이틀을 설정하고 navigationBarItems를 사용하여 추가적인 아이템을 추가할 수 있습니다.

struct CustomNavBarView: View {
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationBarTitle("Custom Title")
                .navigationBarItems(trailing:
                    Button(action: {
                        // Add action here
                    }) {
                        Image(systemName: "gear")
                    }
                )
        }
    }
}

위 코드는 텍스트로 구성된 뷰를 나타내고, navigationBarTitle을 사용하여 네비게이션 바의 타이틀을 설정하고, navigationBarItems를 사용하여 오른쪽에 기어 모양의 아이콘을 추가하고 있습니다.

결론

SwiftUI를 사용하여 애니메이션을 추가하고 탭바 및 네비게이션 바를 커스터마이징하는 방법을 살펴보았습니다. SwiftUI는 간소한 코드로 강력한 UI/UX를 만들 수 있도록 도와줍니다. 앞으로 더 많은 사용자 정의 옵션을 통해 자신만의 앱 UI를 만들어보세요.

참고: