[SwiftUI][Launch Screen] 첫 화면 뛰우기를 샘플 코드로 이해하기

안녕하세요. 오늘은 "Launch Screen"을 만들어 볼겁니다.

Launch Screen은 앱이 처음 시작할때 앱의 상직적인 이미지를 유저에게 각인 시킬수 있는 좋은 도구입니다. 거의 모든 앱은 Launch Screen을 갖고 있다. iOS와 tvOS 둘다 동일하게 적용됩니다.

 

SwiftUI 프로젝트를 만들면 ~App.swift 파일과 ContentView.swift 파일이 생성됩니다.

ContentView.swift 파일에서만 작업을 합니다..

body 내 VStack을 ZStack으로 바꾼다. 아래 코드 주석을 참고 바랍니다.

 

// ContentView.swift

import SwiftUI

struct ContentView: View {

    // isLoading 상태 값을 추적하여 변경 시 반영합니다.
    @State var isLoading: Bool = true
    
    var body: some View {
        ZStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            
            // 실행 시 isLoading 값이 true여서 Launch Screen을 보여줍니다.
            // isLoading 값이 tobble 되어 false 되면 
            if isLoading {
                launchScreenView
            }
        }
        .padding()
        .onAppear {
            // 2초 후 isloading 값을 반전 시킴
            DispatchQueue.main.asyncAfter(deadline: .now() + 2, execute: {
                isLoading.toggle()	// bool 값을 반전 시킴 true -> false
            })
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension ContentView {
    var launchScreenView: some View {
        ZStack(alignment: .center) {
         	// 그라데이션 배경 화면을 설정합니다.
            LinearGradient(gradient: Gradient(colors: [Color("PrimaryColor")
            	, Color("SubPrimaryColor")])
                , startPoint: .top, endPoint: .bottom)
                            
            // 화면에 꽉차게 보여줍니다.
            .edgesIgnoringSafeArea(.all)
            Image("LaunchScreenImage")
        } 
    } 
}

 

* 위 샘플은 xcode 14.01에서 테스트한 코드입니다. (swift 5)