[SwiftUI] fullScreenCover 고찰

 

처음 SwiftUI 프로젝트를 시작하면서 학습하는 도중, iOS 14이상부터 사용할 수 있는 기술들이 있었습니다.

 

그 중 하나가 fullScreenCover로, Model View를 전체로 띄울 때 사용하는데 해당 수식자는 iOS 13에서 사용할 때 직접 구현해줘야하는 문제가 있었습니다.

 

 

fullScreenCover(isPresented:onDismiss:content:)

https://developer.apple.com/documentation/swiftui/list/fullscreencover(ispresented:ondismiss:content:)

Apple Developer Documentation

 

 

위는 iOS 14에서 사용할 수 있는 수신자로, 애플 개발자 사이트에서 내용을 확인할 수 있습니다.

 

 

---

 

 

그럼 iOS 13에서는 어떻게 사용할 수 있을지 내용을 확인해보던 중, 2가지 방식을 찾게 되었습니다.

 

GeometryReader { geometry in
    ZStack {
        ZStack {
            HStack {
                VStack {
                    if isPresented {
                        self.content
                    }
                }
            }
        }
    }
    .offset(y: isPresented ? location : geometry.size.height)
    .animation(.spring())
}

 

 

위는 또다른 View를 제작하여 구현하는 방식입니다.

처음에는 해당 방식을 이용하였지만 약간의 문제가 있었습니다.

 

 

 

위의 gif를 보시면 dismiss할 때, 잔상이 남아있는 문제가 있었습니다.

때문에 다른 방식을 찾아보는 도중, ViewModifier 내용을 알게 되었습니다.

 

 

 

이는 SwiftUI 프레임워크에 내장되어있는 한 프로토콜로, 기존의 뷰나 다른 ViewModifier에 적용시켜 또 다른 버전의 커스텀 modifier를 만들 수 있습니다.

 

struct FullScreenCoverCompat<CoverContent: View>: ViewModifier {
    @Binding var isPresented: Bool
    let content: () -> CoverContent

    func body(content: Content) -> some View {
        GeometryReader { geometry in
            ZStack {
                Color.clear
                content
                ZStack {
                    Color.white
                    self.content()
                }
                .offset(y: isPresented ? 0 : geometry.size.height + geometry.safeAreaInsets.top)
                .animation(.spring())
            }
        }
    }
}

extension View {
    func fullScreenCoverCompat<Content: View>(isPresented: Binding<Bool>, content: @escaping () -> Content) -> some View {
        self.modifier(FullScreenCoverCompat(isPresented: isPresented, content: content))
    }
}

 

 

위처럼 ViewModifier로 생성하여 원하는 곳에 .fullScreenCover를 선언하여 추가할 수 있습니다.

offset y좌표에 safeAreaInsets 만큼 추가한 이유는.. 생성한 뷰마다 다르지만 저같은 경우는 safeArea Bottom부분에서 웹뷰가 로딩되는 문제가 있어 해당 길이만큼 추가하여 y좌표를 내렸습니다.

 

해당 방식 중에 제일 마음에 들었던 부분은 버튼을 누르기 전에 웹뷰를 미리 로딩하는 부분이였습니다. (그만큼 메모리는 먹지만..)

 

 

 

잔상이 남았던 문제를 해결하였습니다.

 

 

obj-c나 swift, rxswift에 익숙한 상태에서 swiftui로 프로젝트를 하다보니 불편한 점은 많았습니다.

하지만 메모리릭 테스트나 cpu profiler를 체크해보면 기존 swift보다 확실히 정돈되었다? 라는 느낌이 들었습니다.

실재로 메모리 사용량이 많이 줄었습니다.

아직 Autolayout에 익숙하지만... 얼른 swiftui 학습을 더 해야겠네요..