-
#18. 토스트, 팝업(Toast, Popup)SwiftUI 앱만들기 2022. 7. 11. 17:22
#1.ContentView
import SwiftUI
import ExytePopupView
struct ContentView: View {
@State var shouldShowBottomSolidMessage: Bool = false
@State var shouldShowBottomToastMessage: Bool = false
@State var shouldShowTopSolidMessage: Bool = false
@State var shouldShowTopToastMessage: Bool = false
@State var shouldShowPopUpMessage: Bool = false
//#1. Bottom Solid Message
func createBottomSolidMessage() -> some View {
HStack(spacing: 10){
Image(systemName: "book.fill")
.font(.system(size: 40))
.foregroundColor(Color.white)
VStack(alignment: .leading){
Text("안내메시지")
.fontWeight(.bold)
.foregroundColor(Color.white)
Text("토스트 메시지입니다.dsdsadasdadasdasdadasasdsdssssddsaasadasdasdasdasdasdasdasdasdasasdasdsa")
.lineLimit(2)
.font(.system(size: 14))
.foregroundColor(Color.white)
Divider().opacity(0)
}
}
.padding(.vertical, 10)
.padding(.horizontal, 10)
.frame(width: UIScreen.main.bounds.width)
.padding(.bottom, UIApplication.shared.windows.filter {$0.isKeyWindow}.first? .safeAreaInsets.bottom == 0 ? 0 :15)
.background(Color.purple)
}
//#2. Bottom Toast Message
func createBottomToastMessage() -> some View {
HStack(alignment: .top, spacing: 10){
Image("cuba")
.resizable()
.aspectRatio(contentMode: ContentMode.fill)
.offset(y: 5)
.frame(width:60, height: 50)
.cornerRadius(10)
VStack(alignment: .leading, spacing: 0){
Text("쿠바 하바나")
.fontWeight(.bold)
.foregroundColor(Color.white)
Text("토스트 메시지입니다.dsdsadasdadasdasdadasasdsdssssddsaasadasdasdasdasdasdasdasdasdasasdasdsasdfjldsjfljdlsjflsjdfljdsljflsdjflsdjfljdslfjlsdjflsdjfljsdlfjsldjflsdjflsdjflsjfldsjflsdjflsjdflsdjfls")
.font(.system(size: 14))
.foregroundColor(Color.white)
Divider().opacity(0)
}
}
.padding(15)
.frame(width: 300)
.background(Color.green)
.cornerRadius(20)
}
//#3. Top Solid Message
func createTopSolidMessage() -> some View {
HStack(spacing: 10){
Image("seattle")
.resizable()
.aspectRatio(contentMode: ContentMode.fill)
.offset(y: 5)
.frame(width:60, height: 50)
.cornerRadius(10)
VStack(alignment: .leading){
Text("Seattle")
.fontWeight(.bold)
.foregroundColor(Color.white)
Text("안녕하세요? 오늘도 빡코딩하고 계신가요? \n오늘은 토스트 메시지와 팝업에 대해 알아보겠습니다...")
.font(.system(size: 14))
.foregroundColor(Color.white)
Divider().opacity(0)
}
}
.padding(.vertical, 10)
.padding(.horizontal, 10)
.frame(width: UIScreen.main.bounds.width)
.padding(.top, UIApplication.shared.windows.filter {$0.isKeyWindow}.first? .safeAreaInsets.top == 0 ? 0 :35)
.background(Color.blue)
}
//#4. Top Toast Message
func createTopToastMessage() -> some View {
HStack(alignment: .center, spacing: 10){
Image(systemName: "paperplane.fill")
.font(.system(size: 25))
.foregroundColor(Color.white)
.padding(.leading, 5)
VStack(alignment: .leading, spacing: 5){
Text("정대리님의 메시지")
.fontWeight(.bold)
.foregroundColor(Color.white)
Text("오늘도 빡코딩하고 계신가요?")
.font(.system(size: 14))
.lineLimit(1)
.foregroundColor(Color.white)
}.padding(.trailing, 15)
}
.padding(.vertical, 5)
.padding(.horizontal, 10)
.background(Color.orange)
.cornerRadius(25)
.padding(.top, UIApplication.shared.windows.filter {$0.isKeyWindow}.first? .safeAreaInsets.top == 0 ? 20 :15)
}
//#5. PopUp Message
func createPopUpMessage() -> some View{
VStack(spacing: 10) {
Image("seattle")
.resizable()
.aspectRatio(contentMode: ContentMode.fit)
.frame(width: 100, height: 100)
Text("개발하는 정대리")
.foregroundColor(.white)
.fontWeight(.bold)
Text("한국에서 개발자로 살아남기!\n예전에 저처럼 프로그래머가 되고 싶지만\n그 길을 몰라 해매는 분들에게 도움 되고자\n이 채널을 운영하기 시작했습니다.\n\n프로그램에 관심 있는 분들이나 취업 준비생 분들께\n조금이나마 도움이 되었으면 합니다.\n아자 아자 화이팅!😍👍")
.font(.system(size: 12))
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.9))
.multilineTextAlignment(.center)
Spacer().frame(height: 10)
Button(action: {
self.shouldShowPopUpMessage = false
}) {
Text("닫기")
.font(.system(size: 14))
.foregroundColor(.black)
.fontWeight(.bold)
}
.frame(width: 100, height: 40)
.background(Color.white)
.cornerRadius(20.0)
}
// .padding(EdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20))
.padding(.horizontal, 10)
.frame(width: 300, height: 400)
.background(Color(hexcode: "8227b0"))
.cornerRadius(10.0)
.shadow(radius: 10)
}
var body: some View {
ZStack {
VStack(spacing: 10){
Spacer()
//#1. Bottom Solid Message
Button(action:{
self.shouldShowBottomSolidMessage = true
}){
Text("Bottom Solid Message")
.font(.system(size: 25))
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding()
.background(Color.purple)
.cornerRadius(10)
}
//#2. Bottom Toast Message
Button(action:{
self.shouldShowBottomToastMessage = true
}){
Text("Bottom Toast Message")
.font(.system(size: 25))
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding()
.background(Color.green)
.cornerRadius(10)
}
//#3. Top Solid Message
Button(action:{
self.shouldShowTopSolidMessage = true
}){
Text("Top Solid Message")
.font(.system(size: 25))
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
//#4. Top Toast Message
Button(action:{
self.shouldShowTopToastMessage = true
}){
Text("Top Toast Message")
.font(.system(size: 25))
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding()
.background(Color.orange)
.cornerRadius(10)
}
//#5. PopUp Message
Button(action:{
self.shouldShowPopUpMessage = true
}){
Text("PopUp")
.font(.system(size: 25))
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding()
.background(Color(hexcode: "8227b0"))
.cornerRadius(10)
}
Spacer()
} //VStack
}
.edgesIgnoringSafeArea(.all)//ZStack
//#1. Bottom Solid Message
.popup(isPresented: $shouldShowBottomSolidMessage, type: .toast, position: .bottom, animation: .easeInOut, autohideIn: 5, closeOnTap: true, closeOnTapOutside: true, view: {
self.createBottomSolidMessage()
})
//#2. Bottom Toast Message
.popup(isPresented: $shouldShowBottomToastMessage, type: .floater(verticalPadding:20), position: .bottom, animation: .spring(), autohideIn: 5, closeOnTap: true, closeOnTapOutside: true, view: {
self.createBottomToastMessage()
})
//#3. Top Solid Message
.popup(isPresented: $shouldShowTopSolidMessage, type: .toast, position: .top, animation: .easeInOut, autohideIn: 5, closeOnTap: true, closeOnTapOutside: true, view: {
self.createTopSolidMessage()
})
//#4. Top Toast Message
.popup(isPresented: $shouldShowTopToastMessage, type: .floater(verticalPadding:20), position: .top, animation: .spring(), autohideIn: 5, closeOnTap: true, closeOnTapOutside: true, view: {
self.createTopToastMessage()
})
//#5. PopUp Message
.popup(isPresented: $shouldShowPopUpMessage, type: .default, position: .bottom, animation: .spring(), autohideIn: 10, closeOnTap: false, closeOnTapOutside: false, view: {
self.createPopUpMessage()
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#2. Extension
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)
}
}
초기화면 
#1. Bottom Solid Message 
#2. Bottom Toast Message 
#3. Top Solid Message 
#4. Top Toast Message 
#5. PopUp Message
출처: https://youtu.be/2S830TyLpI0
'SwiftUI 앱만들기' 카테고리의 다른 글
#20. 딥링크(DeepLink) (0) 2022.07.12 #19. 피커뷰(PickerView) (0) 2022.07.11 #17. 텍스트필드(TextField, SecureField) (0) 2022.07.11 #16. 버튼 스타일(Button Style) (0) 2022.07.11 #15. 로또앱 만들기(QR Code) (0) 2022.07.08