Swift UI는 iOS 앱 개발을 위한 새로운 사용자 인터페이스 프레임워크로, 네비게이션 뷰와 탭 뷰와 같은 다양한 UI 컴포넌트를 제공합니다. 이 블로그 포스트에서는 Swift UI에서 사용되는 네비게이션 뷰와 탭 뷰에 대해 자세히 알아보겠습니다.

네비게이션 뷰

네비게이션 뷰는 앱 내에서 사용자가 다른 화면으로 이동할 수 있는 인터페이스를 제공하는 뷰입니다. 네비게이션 뷰는 스택 형식으로 화면을 관리하고, 화면 간 전환을 스택의 push 및 pop 연산을 통해 처리합니다.

네비게이션 링크 생성

네비게이션 뷰에서는 NavigationLink를 사용하여 다른 뷰로의 이동을 생성할 수 있습니다. 다음은 네비게이션 링크를 생성하는 예시 코드입니다.

NavigationView {
    List {
        NavigationLink(destination: DetailView()) {
            Text("Go to DetailView")
        }
        NavigationLink(destination: AnotherView()) {
            Text("Go to AnotherView")
        }
    }
}

위의 예시에서는 NavigationView 안에 List가 있으며, 각각의 NavigationLink는 목적지 뷰로 이동하는 버튼 역할을 합니다.

네비게이션 뷰 제목 설정

네비게이션 뷰의 제목은 navigationBarTitle을 사용하여 설정할 수 있습니다. 다음은 네비게이션 뷰의 제목을 설정하는 예시 코드입니다.

NavigationView {
    Text("Home")
        .navigationBarTitle("Welcome")
}

위의 예시에서는 Text 뷰로 “Home”을 표시하고, navigationBarTitle을 사용하여 네비게이션 뷰의 제목을 “Welcome”로 설정합니다.

탭 뷰

탭 뷰는 다른 뷰 사이를 탭하여 전환할 수 있는 인터페이스를 제공하는 뷰입니다. 탭 뷰는 사용자에게 다양한 섹션 또는 기능을 표시하고, 해당 섹션으로 쉽게 이동할 수 있는 방법을 제공합니다.

탭 뷰 생성

탭 뷰는 TabView를 사용하여 생성할 수 있습니다. 다음은 탭 뷰를 생성하는 예시 코드입니다.

TabView {
    Text("First Tab")
        .tabItem {
            Image(systemName: "1.circle")
            Text("First")
        }
    Text("Second Tab")
        .tabItem {
            Image(systemName: "2.circle")
            Text("Second")
        }
}

위의 예시에서는 TabView 안에 Text 뷰를 넣어서 각각의 탭을 생성합니다. tabItem은 탭의 아이콘과 텍스트를 설정합니다.

탭 뷰 스타일 설정

탭 뷰의 스타일은 .tabViewStyle을 사용하여 설정할 수 있습니다. 다음은 탭 뷰의 스타일을 설정하는 예시 코드입니다.

TabView {
    // 탭 내용
}
.tabViewStyle(PageTabViewStyle())

위의 예시에서는 .tabViewStyle에 PageTabViewStyle()을 설정하여 페이지 네비게이션 스타일의 탭 뷰를 생성합니다.

결론

Swift UI에서는 네비게이션 뷰와 탭 뷰를 사용하여 앱 내에서 화면 전환과 사용자 인터페이스를 구성할 수 있습니다. 네비게이션 뷰는 스택 형식으로 화면을 관리하고 전환하는 데 사용되며, 탭 뷰는 다양한 섹션 및 기능을 표시하고 전환하는 데 사용됩니다. 이러한 기능들을 활용하여 사용자 친화적인 앱을 개발할 수 있습니다.

참조:

• Swift UI Documentation