SwiftUI기반 iOS App 전체화면 색상변경

 

 

Introduction

---

  SwiftUI를 이용하여 iOS App을 개발할 때, 각각의 App에 대해 자신만의 색상을 가시화하고 싶을때가 있습니다. 하지만 다음 그림과 같이 iPhoneX 상위 모델에 노치부분까지 적용되지 않는 경우가 있습니다. 

 

그림: (좌: 노치 제외) / (우: 노치포함)

 

 

 

 

우리가 원하는 건 iOS App에서 노치를 포함하여 전체 색상을 변경하는 것입니다. 코드를 적용하는 방법은 다음과 같습니다. 

 

import SwiftUI

struct AppLoginSwiftUIView: View {
    var body: some View {
        return NavigationView {
            ZStack {
                Color.yellow.edgesIgnoringSafeArea(.all) // 전체화면 색상 변경
                
                VStack{
                    …(생략)
                }
            }
                
            // navigation option
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
        }       
    }
}

아래의 코드와 같이 edgesIgnoringSafeArea() 함수를 적용하는 것입니다. 

Color.yellow.edgesIgnoringSafeArea(.all) // 전체화면 색상 변경

코드를 사용할 때 유의사항으로는 함수의 위치에 따라 적용이 안되는 경우가 있으니 오류가 발생할 경우 수정하시면 됩니다. 

 

Reference

---

• edgesIgnoringSafeArea
• How to Create a Neumorphic Design With SwiftUI