[SwiftUI fundamental Tutorial] Toast, Popup

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다.

 

 

 

 

 

PopView 라이브러리 사용

https://github.com/exyte/PopupView

GitHub - exyte/PopupView: Toasts and popups library written with SwiftUI

 

라이브러리 파악하기

사용 방법

1. 모든 body code를 ZStack에 넣음

2. 팝업 표시 상태를 제어하는 bool타입 binding 추가

3. ZStack에 .popup 수정자 추가 

struct ContentView : View {
	
    @State var showingPopup = false
    
    var body : some View {
    
    	ZStack{
        // your view
        }
        
        //팝업 메소드
        //$showingPopup: State 변수
    	.popup(isPresented: $showingPopup, autohidenIn: 2){ 
        
        	// 띄워줄 뷰(팝업)
            HStack{
            	Text("The popup")
            }
            .frame(width: 200, height: 60)
            .background(Color(red: 0.85, green: 0.8, blue: 0.95))
            .cornerRadius(30.0)
        }
    } 

}

 

설치 방법 (3가지)

1. CocoaPods (강의에선 이 방법을 사용함)

PopupView를 설치하기 위해 Podfile에 추가하기

pod 'ExytePopupView'

 

2. Carthage

Carthage를 사용하여 PopView를 XCode 프로젝트에 통합하기 위해 Cartfile에서 지정하기

github "Exyte/PopupView"

 

3. Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/PopupView.git", from: "1.0.0")
]

 

영어... 잘 하고 싶다...

---

 

프로젝트 파일로 이동하여 pod init로 파일 생성

 

ls로 확인해보면 Podfile이 생긴걸 확인 할 수 있음

vi 편집기 열어서 (sudo vi Podfile)

pod 'ExytePopupView' 붙여넣기

Podfile이 정상적으로 편집된걸 확인 할 수 있음

pod install 설치

설치 후 관련 파일이 생긴 것을 확인 할 수 있고 open Toast_Popup.xcworkspace로 파일을 열어줌

 

완성

 

아니 파일은 제대로 다 있는데 xcode로 열었을 때 파일을 제대로 못 불러와서 중간에 애먹음 하... 프로젝트 지웠다가 다시 모듈 깔았다가 안되서 지운 프로젝트 다시 살리고... 그러니까 또 정상적으로 돌아감 ;;;

 

 

 

 

기본적으로 응용해보기

import SwiftUI
import ExytePopupView

struct ContentView: View {
    
    @State var shouldShowToast : Bool = false
    
    var body: some View {
        ZStack{
            VStack{
                Button(action: {
                    self.shouldShowToast = true
                }, label: {
                    Text("Toast")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(10)
                })
            }// VStack
            
        }// ZStack
        .popup(isPresented: $shouldShowToast, type: .default, position: .bottom, animation: .default, autohideIn: 2, dragToDismiss: true, closeOnTap: true, closeOnTapOutside: true, view: {
                Text("Toast")
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(10)
                    
            })
        }
    }


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

다양한 효과를 주기 위해 함수 만들기

import SwiftUI
import ExytePopupView

struct ContentView: View {
    
    @State var shouldShowToast : Bool = false
    
    func createTopSolidMessage() -> some View{
        Text("Toast")
            .padding()
            .foregroundColor(.white)
            .background(Color.blue)
            .cornerRadius(10)
        
    }
    
    var body: some View {
        ZStack{
            VStack{
                Button(action: {
                    self.shouldShowToast = true
                }, label: {
                    Text("Toast")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(10)
                })
            }// VStack
            
        }// ZStack
        .popup(isPresented: $shouldShowToast, type: .default, position: .bottom, animation: .default, autohideIn: 2, dragToDismiss: true, closeOnTap: true, closeOnTapOutside: true, view: {
            self.createTopSolidMessage()
            })
        }
    }


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

함수 안에다가 뷰로 그리는 내용을 집어 넣어서 표현

위 코드랑 동일함

 

 

헥사 코드로 색상 뽑아내기

import Foundation
import SwiftUI

extension Color{
    init(hexcode: String){
        let scanner = Scanner(string: hexcode)
        var rgbValue: UInt64 = 0
        
        scanner.scanHexInt64(&rgbValue)
        
        let red = (rgbValue & 0xff0000) >> 16
        let green = (rgbValue & 0xff00) >> 8
        let blue = rgbValue & 0xff
        
        self.init(red:Double(red) / 0xff, green:Double(green) / 0xff, blue:Double(blue) / 0xff)
        
    }
}

새로운 파일(Extensions)을 만들어 RGB 헥사 코드를 스캔하고 변환할 수 있게 만듦

 

 

 

 

다양한 효과 적용해보기

import SwiftUI
import ExytePopupView

struct ContentView: View {
    
    @State var shouldBottomSolidMessage : Bool = false
    
    @State var shouldBottomToastMessage : Bool = false
    
    @State var shouldTopSolidMessage : Bool = false
    
    @State var shouldTopToastMessage : Bool = false
    
    @State var shouldPopupMessage : Bool = false
    
    func createBottomSolidMessage() -> some View{
        HStack(spacing:10){
            Image(systemName: "heart.circle.fill")
                .font(.system(size: 40))
                .foregroundColor(.white)
            
            VStack(alignment:.leading, spacing: 0){
                Text("보리는 사랑스러워요")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                
                Text("콩알만한게 너무 사랑스럽고 귀여워요")
                    .lineLimit(2)
                    .font(.system(size: 14))
                   
                    Divider() //가중치를 주기 위함
                        .opacity(0)
            }
            .foregroundColor(.white)
        }
        .padding(.vertical, 5)
        .padding(.horizontal, 10)
        .frame(width: UIScreen.main.bounds.width)
        .padding(.bottom, UIApplication.shared.windows.first? .safeAreaInsets.bottom == 0 ? 0 : 15)
        .background(Color.purple)
        
    }
    
    func createBottomToastMessage() -> some View{
        HStack(alignment: .top, spacing:10){
            Image("bori")
                .resizable() //사진 사이즈 줄이기
                .aspectRatio(contentMode: ContentMode.fill) //이미지 찌그러짐 방지
                .offset(y: 10)
                .frame(width:50, height: 70) //사진 크기 조정
                .cornerRadius(10)
            
            VStack(alignment:.leading){
                Text("보리는 산책을 좋아해요")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                
                Text("시간과 장소를 가리지 않고 산책하는걸 좋아해요")
                    .font(.system(size: 14))
                    
                    Divider() //가중치를 주기 위함
                        .opacity(0)
            }
            .foregroundColor(.white)
        }
        .padding(15)
        .frame(width:300)
        .background(Color.green)
        .cornerRadius(20)

    }
    
    func createTopSolidMessage() -> some View{
        HStack(alignment: .center, spacing:10){
            Image("bori2")
                .resizable() //사진 사이즈 줄이기
                .aspectRatio(contentMode: ContentMode.fill) //이미지 찌그러짐 방지
                .offset(y:-15)
                .frame(width:70, height: 70) //사진 크기 조정
//                .cornerRadius(10) 이걸 적용하면 사진이 날라감 왜지?
            
            VStack(alignment:.leading){
                Text("보리는 팔색조 같은 매력이 있어요")
                    .fontWeight(.bold)
                    .foregroundColor(.white)


                Text("본인도 매력쟁이인걸 아는 것 같아요")
                    .font(.system(size: 14))

                    Divider() //가중치를 주기 위함
                        .opacity(0)
            }
            .foregroundColor(.white)
        }
        .padding(.vertical, 5)
        .padding(.horizontal, 10)
        .frame(width: UIScreen.main.bounds.width)
        .padding(.top, UIApplication.shared.windows.first? .safeAreaInsets.bottom == 0 ? 0 : 35)
        //글자가 위로 말려가는 걸 방지
        .background(Color.blue)

    }
    
    func createTopToastMessage() -> some View{
        HStack(alignment: .top, spacing:10){
            Image(systemName: "gift.fill")
                .font(.system(size: 40))
                .foregroundColor(.white)
                .padding(.leading, 5)
            
            VStack(alignment:.center, spacing: 2){
                Text("보리에게 선물해주세요")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                Text("보리는 관절껌을 제일 좋아해요")
                    .font(.system(size: 14))
                    .foregroundColor(.white)
                    .lineLimit(1)
            }
            .padding(.trailing, 15)
        }
        .padding(.vertical, 5)
        .padding(.horizontal, 10)
        .background(Color.red)
        .cornerRadius(25)
        .padding(.top, UIApplication.shared.windows.first? .safeAreaInsets.bottom == 0 ? 0 : 30)
        
    }
    
    func createPopupMessage() -> some View{
        VStack(spacing: 10){
            Image("bori3")
                .resizable()
                .aspectRatio(contentMode: ContentMode.fill)
                .frame(width: 100, height: 100)
                .padding()
            
            Text("우주촤강 귀요미인걸 인정하시나요?")
                .fontWeight(.bold)
                .foregroundColor(.white)
            
            Text("池家 최고의 귀요미 입니다")
                .font(.system(size: 12))
                .fontWeight(.bold)
                .foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.9))
                .multilineTextAlignment(.center)
            
            Spacer().frame(height: 10)
            
            Button(action: {
                self.shouldPopupMessage = false //버튼을 누르면 닫히도록
            }){
                Text("네")
                    .font(.system(size: 14))
                    .foregroundColor(.black)
                    .fontWeight(.bold)
            }
            .frame(width: 100, height: 40)
            .background(Color.white)
            .cornerRadius(20)
        }
        .padding(.horizontal, 10)
        .frame(width: 300, height: 400)
        .background(Color(hexcode: "F6B65A"))
        .cornerRadius(10)
        .shadow(radius: 10)
    }
    
    var body: some View {
        ZStack{
            VStack(spacing: 10){
                
                Button(action: {
                    self.shouldTopToastMessage = true
                }, label: {
                    Text("TopToast")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.red)
                        .cornerRadius(10)
                })
                
                Button(action: {
                    self.shouldTopSolidMessage = true
                }, label: {
                    Text("TopSolid")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(10)
                })
                
                Button(action: {
                    self.shouldBottomSolidMessage = true
                }, label: {
                    Text("BottomSolid")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.purple)
                        .cornerRadius(10)
                })
                
                Button(action: {
                    self.shouldBottomToastMessage = true
                }, label: {
                    Text("BottomToast")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.green)
                        .cornerRadius(10)
                })
                
                Button(action: {
                    self.shouldPopupMessage = true
                }, label: {
                    Text("Popup")
                        .font(.system(size: 25))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color(hexcode: "F6B65A"))
                        .cornerRadius(10)
                })
                
            }// VStack
            .edgesIgnoringSafeArea(.all)
        }// ZStack
        .popup(isPresented: $shouldBottomSolidMessage , type: .toast, position: .bottom, animation: .easeInOut, autohideIn: 2, dragToDismiss: true, closeOnTap: true, closeOnTapOutside: true, view: {
            self.createBottomSolidMessage()
            })
        
        .popup(isPresented: $shouldBottomToastMessage , type: .floater(verticalPadding: 20), position: .bottom, animation: .spring(), autohideIn: 2, dragToDismiss: true, closeOnTap: true, closeOnTapOutside: true, view: {
            self.createBottomToastMessage()
            })
        
        .popup(isPresented: $shouldTopSolidMessage , type: .toast, position: .top, animation: .easeInOut, autohideIn: 2, dragToDismiss: true, closeOnTap: true, closeOnTapOutside: true, view: {
            self.createTopSolidMessage()
            })
        
        .popup(isPresented: $shouldTopToastMessage , type: .floater(verticalPadding: 20), position: .top, animation: .spring(), autohideIn: 2, dragToDismiss: true, closeOnTap: true, closeOnTapOutside: true, view: {
            self.createTopToastMessage()
            })
        
        .popup(isPresented: $shouldPopupMessage , type: .default, position: .top, animation: .spring(), dragToDismiss: true, closeOnTap: false, closeOnTapOutside: true, view: {
            self.createPopupMessage()
            })
        }
    }


extension Color{
    
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}