[SwiftUI] 앱의 상태에 따라 다른 화면 보여주기 (App Switcher에서 앱 화면 가리기)

🍎 Apple/SwiftUI

[SwiftUI] 앱의 상태에 따라 다른 화면 보여주기 (App Switcher에서 앱 화면 가리기)

JINiOS 2024. 10. 20. 21:01

728x90

1. 사이드 프로젝트를 진행하면서 앱에 적용해보고 싶은 iOS의 여러 기능~을 맘대로 추가할 수 없다는 점이 아쉬웠다. (팀프로젝트니까..)

2. 혼자 앱을 만들면서 개발하고 싶은 기능을 맘껏 시도해보자~

3. 기획&디자인에 시간을 생각보다 쓰게된다.

4. 기능/화면 단위로 구현해보자 ! (언젠간 도움이 되겠지 !)

어찌저찌 시간을 보내다보니 현재 4번의 결론에 도달했다.

그러다 문득 스타벅스 앱을 사용하면서 유난~히 앱을 Inactive 상태로 만들면 Active의 상태의 화면이 아닌 초록 배경의 스타벅스 로고를 보여주는 걸 발견했다.

이런 기능(?)은 보통 은행 앱에서 자주 보이는 패턴인데 스타벅스에서 보여서 독특하단 생각을 했다.

구현을 해보자

ScenePhase에는 .active, inactive, background 3가지의 상태가 있다. 이 상태에 따라 다르게 보여주면 된다!!

이 상태 개념에 대해 길게 작성할 수,,는 있지만, 이 글에서는 .inactive 상태에서 다른 화면을 보여주도록 구현하는데 집중할 것이다.

먼저 환경변수 scenePhase를 선언해준다.

선언하고 보니 여러 방법이 있겠다는 생각이 들었다. 각자의 코드 스타일에 따라, 프로젝트의 규모에 따라 적합한 방식을 사용하면 될 것 같다.

뷰에 바로 조건문을 사용해서 분기 처리해도 되고, .inactive 상태일 경우 다른 뷰를 오버레이 해도 될 것 같는 생각이 들었다.

그래서 방법을 3가지로 구분해서 작성해보았다.

코드를 보자 !

1) Scene에서 조건문으로 상태에 따라 다른 뷰 보여주기

액티브가 아닐 경우 (== .inactive, .background) 파란색 화면을 보여준다.

@main
struct SwiftUIStudyApp: App {
    @Environment(\.scenePhase) var scenePhase
    
    var body: some Scene {
        WindowGroup {
            if scenePhase == .active {
            	MainView()
            } else {
                Color.blue.ignoresSafeArea()
            }
        }
    }
}

2) Scene에서 오버레이로 다른 뷰 보여주기

inactive일 경우 파란색 화면을 보여준다.

@main
struct SwiftUIStudyApp: App {
    @Environment(\.scenePhase) var scenePhase
    
    var body: some Scene {
        WindowGroup {
            MainView()
                .overlay {
                    if scenePhase == .inactive {
                        Color.blue.ignoresSafeArea()
                    }
                }
        }
    }
}

3) View에서 오버레이로 다른 뷰 보여주기

inactive일 경우 파란색 화면을 보여준다.

struct MainView: View {
    @Environment(\.scenePhase) var scenePhase
    @State var selection: Int = 0
    
    var body: some View {
        TabView(selection: $selection) {
            FirstView()
                .tabItem {
                	Label("Radin", systemImage: "house.fill")
            	}
            SecondView()
                .tabItem {
                	Label("Jini", systemImage: "pencil")
            	}
        }
        .overlay {
            if scenePhase == .inactive {
                Color.blue.ignoresSafeArea()
            }
        }
    }
}