[SwiftUI] CustomPopUpView 애니메이션 효과 해결하기

 
 
 
 
 

 
 
 
Topic:
 

- 커스텀 팝업을 띄울 때 애니메이션 효과 자연스럽게 주기
---> SwiftUI에서 fullScreen으로 화면전환 애니메이션 효과를 주기엔 한정적이었고, UIKit에서 작동 되는 걸 리팩토링 할 때 똑같이 구현해야 했기에 화면전환을 할 때 fullScreen을 쓰지 않는 방법을 찾아야했다.
 
 
 

 
접근:
 
1. ZStack을 활용해서 뷰 위에 뷰를 띄우자! 가 이번 이슈 해결접근의 전부다.
 
*** 이 포스트를 위해 작성한 코드들은 화면전환을 중점으로 짠 코드이기에 UI는 고려하지 않았다. (즉, UI 레이아웃 잡은 코드는 쪼금...  더럽다.)
 
 
1-1. 왜 ZStack을 쓰고자 했냐 - 하면, ZStack에 대한 정의가 필요하다.
 
A view that overlays its subviews, aligning them in both axes. (...) The ZStack assigns each successive subview a higher z-axis value than the one before it, meaning later subviews appear “on top” of earlier ones.

 

라고 애플 공식문서가 설명해주고 있는데, ZStack의 특징은 늦은 순번대로 뷰의 상단에 쌓인다는 거다. 그러니까, 가장 마지막 순번인 뷰가 가장 최상단에 보여진다.

 

 

1-2. ZStack을 활용하기 위한 조건은 하나다. 팝업 View와 팝업을 띄워주는 View 모두 ZStack으로 구성되어 있어야한다. 그래야 ZStack 끼리 뷰의 순서를 정해서 보여줄 수 있기 때문이다.

 

 
<팝업 View>
 

import SwiftUI

struct CustomPopUpView: View {
    // MARK: - properites
    // 해당 프로퍼티로 팝업을 띄울지 말지를 부모뷰의 state 값으로 전달 받을 예정
    @Binding var showPopUp: Bool
    
    let title: String // 공지 이름
    let message: String // 공지 내용
    let btn1: String // 왼쪽 버튼 text
    let btn2: String // 오른쪽 버튼 text
    
    // MARK: - body
    var body: some View {
        
        ZStack {
            
            /// Background - 팝업을 띄울 때 팝업 외 배경을 어둡게 하고자 했다
            Rectangle()
                .background(.black)
                .opacity(0.2)
            
            VStack(spacing: 12) {
                
                Text(title)
                    .frame(height: 30)
                    .fontWeight(.bold)
                    .padding(.top, 12)
                
                Divider()
                
                Text(message)
                    .multilineTextAlignment(.center)
                    .padding(.vertical, 12)
                
                HStack(spacing: 8) {
                    
                    Button(action: {
                        
                        print("확인 누름")
                        
                    }, label: {
                        Text(btn1)
                            .fontWeight(.semibold)
                            .foregroundStyle(.white)
                            .padding(.vertical, 8)
                            .frame(width: 100)
                    })
                    .background(
                        /// 버튼 테두리
                        RoundedRectangle(cornerRadius: 8)
                            .foregroundStyle(.brown)
                        
                    )
                    
                    Button(action: {
                        
                        print("취소 누름")
                        showPopUp = false
                        
                    }, label: {
                        Text(btn2)
                            .foregroundStyle(.gray)
                            .padding(.vertical, 8)
                            .frame(width: 100)

                            
                    })
                    .background(
                        /// 버튼 테두리
                        RoundedRectangle(cornerRadius: 8)
                            .stroke(.gray, lineWidth: 1)
                    )
                    
                }
                .frame(height: 44)
                .padding(.bottom, 12)

                
            }
            .background(.white)
            .roundedCorner(16, corners: .allCorners)
            .padding(.horizontal, 20)
            
        }
        // ZStack을 화면에 꽉 채우도록 해서 fullScreen처럼 보이게 함
        .ignoresSafeArea(.all)
        
    }
}

#Preview {
    CustomPopUpView(
        showPopUp: .constant(false),
        title: "공지",
        message: "정말로 삭제를 하시겠습니까?",
        btn1: "확인",
        btn2: "취소"
    )
}

 
-- 해당 뷰의 구현 내용 및 설명은 주석으로 작성했다.
 
 
 
 
<팝업을 띄울 View>
 

import SwiftUI

struct ContentView: View {
    
    // 팝업 띄움 여부 결정
    @State private var showPopUp: Bool = false
    
    var body: some View {
        
        ZStack {
            
            VStack(spacing: 16) {
                Text("test popup animation")
                    .font(.title)
                
                Button("팝업 띄우기") {
                    print("버튼 누름")
                    
                    // 팝업 띄우기 버튼을 누르면 state 변수에 바뀐 값을 전달해준다
                    // withAnimation으로 애니메이션 효과를 커스텀해준다. 
                    // withAnimation에 종류와 타이머 지정까지 가능하니 필요 시 찾아보기!
                    withAnimation {
                        showPopUp = true
                    }
                    
                }
                .foregroundStyle(.white)
                .padding(.horizontal, 20)
                .frame(height: 50)
                .background(.gray)
            }
            
            // showPopUp 값이 true로 바뀌면 해당 팝업뷰를 띄워준다. (ZStack 활용!)
            if showPopUp {
                showPopUpView(
                    title: "안내",
                    message: "정말로 삭제를 하시겠습니까? \n삭제 시 데이터를 복구하실 수 없습니다.",
                    btn1: "확인",
                    btn2: "취소"
                )
            }
            
        }
        
    }
}

extension ContentView {
    
    // showPopUP값에 따라 띄워줄 뷰를 편의상 extension에 함수로 view를 구현해두었다.
    func showPopUpView(
        title: String,
        message: String,
        btn1: String,
        btn2: String
    ) -> some View {
        
        CustomPopUpView(
            showPopUp: $showPopUp,
            title: title,
            message: message,
            btn1: btn1,
            btn2: btn2
        )
        
    }
    
    
}

#Preview {
    ContentView()
}

 
-- 해당 뷰의 구현 내용 및 설명은 주석으로 작성했다.
 
 
 
(+)
 
 
RoundedCorner는 타 블로그들에서 쉽게 참고할 수 있는 코드를 참고해서 작성했다.
 

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    
    func roundedCorner(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape(RoundedCorner(radius: radius, corners: corners) )
    }
    
}

 
 
 
 
 
 
 
References
 
https://developer.apple.com/documentation/swiftui/zstack

ZStack | Apple Developer Documentation