SwiftUI로 다이얼로그 띄우는 방법

오늘은 SwiftUI를 사용하여 다이얼로그(Dialog)를 띄우는 방법에 대해 알아보겠습니다.

1. View 확장(extension)

먼저, View를 확장하여 다이얼로그를 띄우는 메서드를 추가합니다. 다음과 같이 코드를 작성해주세요.

extension View {
    
    func customDialog<DialogContent: View>(
        isShowing: Binding<Bool>,
        @ViewBuilder dialogContent: @escaping () -> DialogContent
    ) -> some View {

        self
            .modifier(CustomDialog(isShowing: isShowing, dialogContent: dialogContent))
    }
    
}

위 코드는 customDialog라는 메서드를 View에 추가하는 역할을 합니다. 이 메서드는 다이얼로그를 띄우기 위한 필수적인 매개변수인 isShowing과 dialogContent를 받습니다.

 

2. ViewModifier를 사용하여 다이얼로그 커스터마이징

다이얼로그를 띄우기 위해 ViewModifier를 사용합니다. ViewModifier는 View를 수정하고 커스터마이징할 수 있는 기능을 제공합니다. 아래와 같이 CustomDialog라는 ViewModifier를 구현해주세요:

struct CustomDialog<DialogContent: View>: ViewModifier {

    @StateObject private var keyboardHandler = KeyboardHandler()
    @ObservedObject var keyboardHeightHelper = KeyboardHeightHelper()
    
    @Binding var isShowing: Bool // set this to show/hide the dialog
    let dialogContent: DialogContent
    let onKeyboardYOffset: CGFloat = 100
    
    init(isShowing: Binding<Bool>,
            @ViewBuilder dialogContent: () -> DialogContent) {
        _isShowing = isShowing
         self.dialogContent = dialogContent()
    }

}

위 코드에서 CustomDialog는 ViewModifier 프로토콜을 준수하는 구조체입니다. 다이얼로그를 띄우기 위한 여러 속성과 dialogContent를 포함하고 있습니다. isShowing은 다이얼로그를 보이거나 숨기기 위해 사용되며, dialogContent는 다이얼로그에 표시될 내용을 정의합니다.

3. 다이얼로그 컨텐츠 표시

이제 CustomDialog에서 다이얼로그 컨텐츠를 표시하는 로직을 구현해야 합니다. body 메서드를 다음과 같이 작성해주세요:

struct CustomDialog<DialogContent: View>: ViewModifier {

    @StateObject private var keyboardHandler = KeyboardHandler()
    @ObservedObject var keyboardHeightHelper = KeyboardHeightHelper()
    
    @Binding var isShowing: Bool // set this to show/hide the dialog
    let dialogContent: DialogContent
    let onKeyboardYOffset: CGFloat = 100
    
    init(isShowing: Binding<Bool>,
            @ViewBuilder dialogContent: () -> DialogContent) {
        _isShowing = isShowing
         self.dialogContent = dialogContent()
    }
    
	//body 추가
    func body(content: Content) -> some View {
        // wrap the view being modified in a ZStack and render dialog on top of it
        GeometryReader { geo in
            ZStack {
                content
                    .ignoresSafeArea()

                if isShowing {
                    // the semi-transparent overlay
                    Rectangle()
                        .foregroundColor(Color.black.opacity(0.6))
                        .ignoresSafeArea()

                    dialogContent
                        .offset(y: -keyboardHandler.keyboardHeight * 0.55)
                        .animation(.default, value: keyboardHandler.keyboardHeight)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .ignoresSafeArea()
    }
    
}

위 코드는 body 메서드에서 다이얼로그를 표시하는 로직을 구현합니다. ZStack을 사용하여 View를 겹쳐서 보여주고, Rectangle을 사용하여 반투명한 오버레이를 만듭니다. dialogContent는 offset을 사용하여 키보드 높이에 따라 위치를 조정하고, 애니메이션을 적용합니다.

4. 다이얼로그 사용하기

이제 다이얼로그를 사용해보겠습니다. 다음은 다이얼로그를 띄우는 예시 코드입니다:

struct ContentView: View {
    @State private var isShowingDialog = false
    
    var body: some View {
        VStack {
            Button("Show Dialog") {
                isShowingDialog.toggle()
            }
        }
        .customDialog(isShowing: $isShowingDialog) {
            // 다이얼로그에 표시될 내용
            Text("Hello, Dialog!")
                .padding()
                .background(Color.white)
                .cornerRadius(10)
        }
    }
}

위 코드에서 Button을 클릭하면 isShowingDialog의 값을 토글하여 다이얼로그를 보여줍니다. customDialog 메서드를 사용하여 다이얼로그에 표시될 내용을 정의할 수 있습니다.

이제 SwiftUI로 다이얼로그를 띄우는 방법에 대해 알아보았습니다. 이를 활용하여 더 다양한 커스텀 다이얼로그를 구현해보세요.