[SwiftUI] SafeArea height 구하기

개요

이미지 혹은 특정 색상을 배경으로 사용하고 싶은 페이지가 생기는 경우가 있다.

배경이 하얀색이라면 휴대폰의 상태바의 기본 색상인 하얀색과 동일하기 때문에 상관 없지만,

이미지 혹은 다른 색상을 추가하게 된다면 상단바의 하얀색과 어울리지 않아 UI적으로 보기 좋지 않은 경우가 생긴다.

심지어 하단에도 홈버튼 safeArea가 있기 때문에 위 아래로 동떨어진 하얀색이 추가되어 보기 좋지 않다.

Ignore safe area

이때 ignoreSafeArea(edgesIgnoringSafeArea has been deprecated) modifier를 사용하면 화면의 모든 부분을 배경과 통일시켜주기 때문에 유용하게 쓸 수 있다.

 

다만 모든 뷰가 safe area를 무시하게 되기 때문에 본문 컨텐츠가 다이나믹 홀, 노치에 가려지는 참사가 발생할 수 있다.

이 문제를 해결하기 위해 배경은 safe area를 무시하게 하고 본문 컨텐츠에는 safe area만큼 padding 혹은 Color.clear.frame(height: area height)등을 적용할 수 있다.

높이 구하기(iOS version < 17.0)

본인의 경우 SafeAreaInset이라는 파일을 만들어 다음 코드를 붙여넣고 사용했다.

//
//  SafeAreaInsets.swift
//  Cufit
//
//  Created by 워뇨옹 on 9/8/24.
//

import Foundation
import UIKit
import SwiftUI

public struct SafeAreaInsetsKey: EnvironmentKey {
    public static var defaultValue: EdgeInsets {
        (UIApplication.shared.keyWindow?.safeAreaInsets ?? .zero).insets
    }
}

extension EnvironmentValues {
    public var safeAreaInsets: EdgeInsets {
        self[SafeAreaInsetsKey.self]
    }
}

extension UIEdgeInsets {
    public var insets: EdgeInsets {
        EdgeInsets(top: top, leading: left, bottom: bottom, trailing: right)
    }
}

 

이렇게 선언해두면 View 에서 Environment로 호출해 사용할 수 있다.

@Environment(\.safeAreaInsets) private var safeAreaInsets

var body: some View {
    ZStack {
        someView()
            .ignoresSafeArea()
            
        anotherView()
        	.padding(.top, safeAreaInsets.top)
            .padding(.bottom, safeAreaInsets.bottom)
    }
}

높이 구하기(iOS version >= 17.0)

현재 프로젝트의 타겟 버전이 17.0 이상이라면 다음처럼 modifier 하나만으로 간단하게 사용할 수 있다.

.safeAreaPadding([.top, .bottom])

본인의 경우 프로젝트의 타겟 버전이 16.0이기 때문에 첫번째 방법으로 문제를 해결했다.