SwiftUI - ASKMO 앱 만들기 (SplashScreen)

방학동안 과후배나동기끼리 프로젝트 어플, 웹사이트를 만들기로 하였습니다.

네이버지식in과 같은 어플이라고 생각하시면 됩니다. 

지식in보다 조금 더 코딩질문에 가까운 사이트라고 생각하시면 편합니다.

일단 저는 프로젝트리더긴 하지만 저도 처음이고 후배들도 처음 공부하면서 프로젝트하는거라 완성이 될 지는 모르겠습니다.

하지만 완성보다는 공부를 하는 위주로 생각하고 있고 저는 백엔드와 SwiftUI를 같이 공부하며 풀스택 개발자가 되도록 노력할 것 입니다.

일단 앱을 시작하면 유명한 앱들은 자기의 아이콘을 잠깐 보여주고 실행이 됩니다. SplashScreen인데 저번에 공부했던것을 이용하여 만들어봤습니다.

    @State var isFinished = false

State :

• 변화가 생기면 해당 변수의 값을 읽거나 새로 쓸 수 있음을 의미하는 property wrapper
• SwiftUI 는 state 로 선언된 property 들의 저장소를 관리
• State value 값이 변경되면 뷰는 해당 value 의 appearance 를 무효화 하고 다시 body 값을 계산
• state 변수값이 변경되면 view 를 다시 랜더링 하기 때문에 항상 최신 값을 가짐
• State 인스턴스는 그 자체로 값이 아닌, 값을 읽고 쓰는 것을 의미함
• 현재 뷰 UI의 특정 상태를 저장하기 귀해 만들어진 것이기 때문에 보통 private 
• @State 속성으로 어떤 프로퍼티의 초기값을 지정했다면, 다른 값으로 재할당 불가, @Binding 변수를 통해서만 가능

변수명을 isFinished라고 정해주었습니다. SpalshScreen이 끝나야하기때문에

var body: some View {        
            
            if !isFinished{                 
                ZStack{                     
                    Color("white") 
                        .ignoresSafeArea() 
                        
                    GeometryReader{proxy in 
                        
                        // For Screen Size
                        let size = proxy.size
                        
                        ZStack{
                                
                                Image("Askmo") 
                                    .resizable() 
                                    .aspectRatio(contentMode: .fit) 
                                    .frame(width: size.width / 1.9,
                                           height: size.width / 1.9) 
                                    
                            }                        
                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)                                                
                    }
                }

!isFinished 는 변수가 False일때 실행이 됩니다.

Zstack으로 공간을 잡아주고

Asset에 저장되어있는 White color을 불러와서  .ignoreSafeArea로 아랫부분과 윗부분 모두 색을 지정해줍니다.

GeometryReader{proxy in 는 자동으로 크기를 설정해준다고 생각하면 된다. 부모뷰와 자식뷰의 위치를 최적으로 지정을 해준다.

screensize을 proxy로 지정해주고

zstack을 다시 이용하여 배경색 윗부분에 이미지을 불러와서 .resizable()을 이용하여 적당한 크기로 설정해주고

.aspectRation(contentMode: .fit)으로 크기 설정후 프레임으로 넓이와 높이를 지정해준다.

zstack의 frame을 넓이와 높이를 max로 주어 정가운데에 위치시킨다.

.onAppear {                                         

                                DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
                                    
                                    withAnimation {
                                        isFished.toggle()
                           }
						}
                    
                }
            }
        }
    }
}

.onAppear은 뷰가 나타날때 실행될 행동을 시킴

DispatchQueue.main.asyncAfter(deadline: .now() + 0.6)초후에 꺼지게 만들었습니다.

 

import SwiftUI

struct SplashScreen: View {
    
    @State var startAnimation = false 
    @State var bowAnimation = false 
    @State var isFished = false 
    
    var body: some View {
        
        HStack{
            
            if !isFished{ 
                
                ZStack{ 
                    
                    Color("white") 
                        .ignoresSafeArea() 
                    

                    GeometryReader{proxy in 
                        
                        // For Screen Size
                        let size = proxy.size
                        
                        ZStack{
                            
                            HStack(spacing: -20 ){//Hstack 
                                
                                Image("Askmo") // 
                                    
                                    .resizable() //
                                    .aspectRatio(contentMode: .fit) 
                                    .frame(width: size.width / 1.9,
                                           height: size.width / 1.9) 
                                    
                            }
                            
                        }
                        
                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
                        
                        
                    }
                }
                .onAppear { 

                                DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
                                    
                                    withAnimation {
                                        isFished.toggle()
                         }
                    }
                }
            }
        }
    }
}

struct SplashScreen_Previews: PreviewProvider {
    static var previews: some View {
        SplashScreen()
    }
}