PopView

Why?

생각보다 유저에게 알림으로 알려줘야할게 많다...
효율적으로 보기좋은 팝업을 띄워보자

과정

1. 패키지 설치

   • https://github.com/exyte/PopupView.git

2. import

import PopupView

3.뷰 설정

• a. 가장 바깥은 ZStack을 사용해야한다.
• b. 팝업 상태변수를 만든다
• c. 상호작용할 버튼을 만든다.
• d. 팝업 화면을 만든다.
• e. 팝업 메소드를 설정한다.

a,b,c

struct ContentView: View {
    
    @State var shouldShowBottomSolidMessage : Bool = false //버튼 팝업 상태변수
    @State var shouldShowBottomToastMessage : Bool = false
ZStack{ //가장 바깥 ZStack 사용
            VStack(spacing:10){
                Spacer()
                Button { //상호작용버튼
                    self.shouldShowBottomSolidMessage = true
                } label: {
                    Text("바텀 솔리드 메시지")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(.blue)
                        .cornerRadius(10)
                }
                
                Button {
                
                    self.shouldShowBottomToastMessage = true
                } label: {
                    Text("바텀 토스트 메시지")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(.green)
                        .cornerRadius(10)
                }
            }
            
        }
}

d

• 팝업 뷰를 함수로 리턴

func createBottomSolidMessage() -> some View {
        HStack(spacing:10){
            
            Image(systemName: "trash")
                .font(.system(size: 40))
                .foregroundColor(.white)
            
            VStack{
                Text("토스트 메시지 입니다!")
                    .font(.system(size: 14))
                Text("토스트 메시지 입니다!")
                    .font(.system(size: 14))
                
                Divider().opacity(0)
                
            }.foregroundColor(.white)
            
        }
        .padding(.vertical, 5)
        .padding(.horizontal,10)
        .frame(width:UIScreen.main.bounds.width)
        .background(.purple)
        .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 0 : 15)
    }

f

• Zstack에 popup 함수를 등록

} // ZStack
.popup(
isPresented: $shouldShowBottomToastMessage, //상태 바인딩
type: .floater(verticalPadding: 20), //띄우는 형태
position: .bottom, //어디로 띄울지
animation: .spring(),  //애니메이션
autohideIn: nil, // 자동 숨김 초 설정
closeOnTap: true,  // 터치 시 꺼질지
closeOnTapOutside: true, // 바깥 터치 시 꺼질지
dismissCallback: { // 꺼질 때 콜백함수
            print("Dissmiss")
        }) {
           
            self.createBottomToastMessage() //팝업 창
        }

전체코드

import SwiftUI
import PopupView

struct ContentView: View {
    
    @State var shouldShowBottomSolidMessage : Bool = false
    @State var shouldShowBottomToastMessage : Bool = false
    
    
    func createBottomSolidMessage() -> some View {
        HStack(spacing:10){
            
            Image(systemName: "trash")
                .font(.system(size: 40))
                .foregroundColor(.white)
            
            VStack{
                Text("토스트 메시지 입니다!")
                    .font(.system(size: 14))
                Text("토스트 메시지 입니다!")
                    .font(.system(size: 14))
                
                Divider().opacity(0)
                
            }.foregroundColor(.white)
            
        }
        .padding(.vertical, 5)
        .padding(.horizontal,10)
        .frame(width:UIScreen.main.bounds.width)
        .background(.purple)
        .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 0 : 15)
    }
    
    func createBottomToastMessage() -> some View {
        HStack(spacing:10){
            
            Image(systemName: "circle")
                .font(.system(size: 40))
                .foregroundColor(.white)
            
            VStack{
                Text("토스트 메시지 입니다!")
                    .font(.system(size: 14))
                Text("토스트 메시지 입니다!")
                    .font(.system(size: 14))
                
                Divider().opacity(0)
                
            }.foregroundColor(.white)
            
        }
        .frame(width:UIScreen.main.bounds.width)
        .background(.green)
        
    }
    
    var body: some View {
        ZStack{
            VStack(spacing:10){
                Spacer()
                Button {
                    self.shouldShowBottomSolidMessage = true
                } label: {
                    Text("바텀 솔리드 메시지")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(.blue)
                        .cornerRadius(10)
                }
                
                Button {
                
                    self.shouldShowBottomToastMessage = true
                } label: {
                    Text("바텀 토스트 메시지")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(.green)
                        .cornerRadius(10)
                }
          
                
                
                Spacer()
                
                
                
                
                
            }// Vstack
            .edgesIgnoringSafeArea(.all)
            
        }.popup(isPresented: $shouldShowBottomSolidMessage, type: .toast, position: .bottom, animation: .default, autohideIn: 2,closeOnTap: true, closeOnTapOutside: true) {
            self.createBottomSolidMessage()
        }
        .popup(isPresented: $shouldShowBottomToastMessage, type: .floater(verticalPadding: 20), position: .bottom, animation: .spring(), autohideIn: nil,closeOnTap: true, closeOnTapOutside: true,dismissCallback: {
            print("Dissmiss")
        }) {
           
            self.createBottomToastMessage()
        }
        //Zstack
    }
}

새로 배운 것

• 기종에 따른 SafeArea여부

extension UIDevice {
    var hasNotch: Bool {
        let bottom = UIApplication.shared.windows.filter {$0.isKeyWindow}.first?.safeAreaInsets.bottom ?? 0
        return bottom > 0
    }
}

사용 예시
SomeView().background(UIDevice.current.hasNotch ? Color.red : Color.yellow)

전체코드에서는 
UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 0 : 15 사용

결과

github

https://github.com/exyte/PopupView