(CODE) 베젤이 없는 기종과 있는 기기에 SafeArea 각각 적용법

SafeArea 적용 방법

SwiftUI

코드를 작성하면서 베젤이 없는 기종 (iPhone X 이후 기종)과 베젤이 있는 기종(iPhone 6 / 7 / 8 ...) 모두에 .edgesIgnoringSafeArea()를 적용한 frame을 사용하면 베젤이 있는 기종과 없는 기종의 화면이 달라지게 됩니다. 이럴 때에는 

"iPhone 12에는 SafeArea를 적용시키고, iPhone SE에는 적용하지마!" 

라고 코드를 작성해줘야 합니다.

 

SwiftUI에는 아직 이것을 지원하지 않기때문에 UIKit을 사용해야 합니다.

// bottom 0의 뜻은 베젤이 있는 기종을 뜻함
UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0

이제 위 코드를 frame과 offset 등에 적용해보겠습니다.

//베젤이 있는 기종이라면 height 0 이고 베젤이 없는 기종은 height 20 으로 설정
.frame(height: UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 0 : 20)

//베젤이 있는 기종이라면 Y축이 15 이고 베젤이 없는 기종은 Y축을 0 으로 설정
.offset(y: UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 15 : 0)

//베젤이 있는 기종이면 패딩 12, 아니라면 0
.padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 15 : 0)

Extension을 만들어서 사용

Extension으로 따로 만들어서 유용하게 사용 할 수 도 있습니다.

// extending view to get saferarea...
extension View{
    
    func getSafeArea()->UIEdgeInsets{
        return UIApplication.shared.windows.first?.safeAreaInsets ?? UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

그리고 호출은 아래와 같이 하면 됩니다.

//getSafeArea의 bottom이 0 즉, 베젤이 있으면 오른쪽 패딩 100 그게아니면 0
.padding(.trailing,getSafeArea().bottom == 0 ? 100 : 0)

 

 

읽어주셔서 감사합니다🤟

 

이 글도 읽어보세요

[SwiftUI 기초/Others] - SwiftUI : 삼항 연산자 / IF

[SwiftUI 기초/View layout] - SwiftUI : HStack / Spacer / minLength / Frame