[SwiftUI] modal presentation 배경색상 반투명 처리하기

 

SwiftUI에서 .fullScreenCover로 View를 띄우게 되었는데 배경을 반투명 처리하여 기존 View의 Context를 유지하고 싶었다.

그러나 background 설정을 해도 아래와 같이 변하지 않았다.

 

 

presentationBackground(_:) | Apple Developer Documentation

 

SwiftUI -> Modal presentations -> Styling a sheet and its background 항목에 있는 presentationBackground 메서드를 활용하면 presentation의 배경을 설정할 수 있다.

 

파라미터로 전달할 값은 presentation의 배경으로 사용할 ShapeStyle이다(기존 background와 마찬가지로 Color도 가능하다).

 

공식문서에서는 .thickMaterial을 예시로 들었는데 색상이 아닌 것을 보게 되어 궁금증이 생겼다. 저건 뭐하는 속성일까?

struct ContentView: View {
    @State private var showSettings = false


    var body: some View {
        Button("View Settings") {
            showSettings = true
        }
        .sheet(isPresented: $showSettings) {
            SettingsView()
                .presentationBackground(.thickMaterial)
        }
    }
}

 

Material | Apple Developer Documentation

.thick, .thin, .ultraThick, .ultraThin, .regular, .bar 프로퍼티가 있고, 이들 각각은 Material 타입이었다.

 

Material은 background에 사용하여 블러 효과를 적용할수 있게 해주는 타입이다.

 

이것은 View가 아니고, 적용한 View와 background 사이에 반투명한 layer를 넣어주는 것과 같다고 한다.

(A material isn’t a view, but adding a material is like inserting a translucent layer between the modified view and its background:)

 

 

그리고, Material의 각 정도는 두꺼운 정도, 밝고 어두운 모양에 따라 달라진다고 한다.

 

 

공통적으로 thin -> thick으로 갈 수록 더 불투명하고, appearance(라이트/다크모드를 뜻하는 것 같다)에 따라 밝고 어두움이 다름을 볼 수 있다.

 

이를 통해 modifier를 적용한 앞의 요소는 상황에 따라 대비를 향상시키는 생동감을 나타내지만, foregroundStyle에 secondary와 같은 계층적 스타일을 제외한 사용자 정의 스타일을 설정하면 생동감이 비활성화된다고 한다.

 

다시 돌아와서, Material을 적용해보았다.

.presentationBackground(.ultraThinMaterial) Light	.presentationBackground(.ultraThinMaterial) Dark
.presentationBackground(.thinMaterial) Light	.presentationBackground(.thinMaterial) Dark
.presentationBackground(.regularMaterial) Light	.presentationBackground(.regularMaterial) Dark
.presentationBackground(.thickMaterial) Light	.presentationBackground(.thickMaterial) Dark
.presentationBackground(.ultraThickMaterial) Light	.presentationBackground(.ultraThickMaterial) Dark

 

처음에 원했던 것처럼 배경이 반투명하게 되어 특정 화면에서 fullScreenCover를 띄워도 별도의 화면으로 넘어간 것이 아니라 해당 화면 내에서 작업하는 느낌을 줄 수 있게 되었다.