SwiftUI) .sheet 배경 투명하게 만들기 (ios16.4 대응)

출처 : https://stackoverflow.com/questions/63745084/how-can-i-make-a-background-color-with-opacity-on-a-sheet-view

SwiftUI .sheet를 이용한 View에서는 화면을 전부 채우지 않는 경우 배경이 투명하게 나타납니다.
의도적으로 이를 투명하게 해주기 위해서
View를 포함하고 있는 부모뷰의 백그라운드를 .clear로 설정합니다.

이를 SwiftUI에서 접근하기 위해서
UIViewRepresentable 를 사용하여 UIKit에 있는 UIView를 임시 생성해 줍니다.

struct ClearBackgroundView: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

위 코드를 보면 비동기로 처리하여
뷰가 생성된 후
해당 뷰가 반환되어 sheet에 포함되고
DispatchQueue.main.async 를 이용해 비동기로 접근
부모뷰를 포함하고 있는 sheet뷰의 backgroundColor를 설정합니다.

해당 뷰를 편하게 사용하기위해 커스텀 모디파이어를 만들어 줍니다.

struct ClearBackgroundViewModifier: ViewModifier { 
    func body(content: Content) -> some View {
        if #available(iOS 16.4, *) {
            content
                .presentationBackground(.clear)
        } else {
            content
                .background(ClearBackgroundView())
        }
    }
}

extension View {
    func clearModalBackground()->some View {
        self.modifier(ClearBackgroundViewModifier())
    }
}​

 

iOS16.4 presentationBackground

https://developer.apple.com/documentation/swiftui/transformedshape/presentationbackground(_:)

iOS16.4 이상 버전에서는 sheet의 배경을 둘러싸고 있는 배경의 색상을 바꿀 수 있는 모디파이어를 제공합니다.

따라서

if #available(iOS 16.4, *) {
      content
          .presentationBackground(.clear) // 이 부분 추가
  } else {
      content
          .background(ClearBackgroundView())
  }

 

해당 코드로 분기시켜 처리해주었습니다.

 

감사합니다.

 

전체 코드를 남깁니다. 

import SwiftUI

// MARK: 배경색을 투명하게 만들어주는 modifier - .clearModalBackground()
struct ClearBackgroundView: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

struct ClearBackgroundViewModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        if #available(iOS 16.4, *) {
            content
                .presentationBackground(.clear)
        } else {
            content
                .background(ClearBackgroundView())
        }
    }
}

extension View {
    func clearModalBackground()->some View {
        self.modifier(ClearBackgroundViewModifier())
    }
}

사용법 

.sheet(isPresented: $isSheet) {
    TestSheetView()  
    	.clearModalBackground()
}