[SwiftUI] 버튼을 누르면, 일정 시간 동안만 노출이 되고 사라지는 문구+도형 기능 구현하기

 

1. 회색 배경의 뭉툭한 네모 도형과 함께 문구 출력 기능

 

//  ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        PracticeView()
    }
}


struct PracticeView: View {
    @State private var isShowingDescription = false

    var body: some View {
        VStack {
            Button(action: {
                // 물음표 아이콘을 누를 때마다 설명 화면 표시 여부를 토글
                withAnimation(.easeInOut) {
                    isShowingDescription.toggle()
                }
                // 2초 후에 설명 화면 숨김
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation(.easeInOut) {
                        isShowingDescription = false
                    }
                }
            }, label: {
                Image(systemName: "questionmark.circle")
                    .resizable()
                    .frame(width: 50, height: 50)
            })
            .padding()
            .overlay(
                // 설명 화면
                Group {
                    if isShowingDescription {
                        ZStack {
                            // 뭉툭한 네모 모양의 테두리
                            RoundedRectangle(cornerRadius: 10)
                                .fill(Color.gray)
                                .frame(width: 150, height: 80)
                                .transition(.opacity)

                            // 설명 내용
                            Text("여기는 간단한 설명입니다.")
                                .padding()
                                .multilineTextAlignment(.center)
                                .transition(.opacity)
                        }
                    }
                }
            )
        }
    }
}

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

 

 

 

 

 

 

2. 말풍선 모양 도형과 함께 출력

 

import SwiftUI

struct TriangleView: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        
        return path
    }
}

struct ContentView: View {
    var body: some View {
        PracticeView()
    }
}


struct PracticeView: View {
    @State private var isShowingDescription = false

    var body: some View {
        VStack {
            Button(action: {
                // 물음표 아이콘을 누를 때마다 설명 화면 표시 여부를 토글
                withAnimation(.easeInOut) {
                    isShowingDescription.toggle()
                }
                // 2초 후에 설명 화면 숨김
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation(.easeInOut) {
                        isShowingDescription = false
                    }
                }
            }, label: {
                Image(systemName: "questionmark.circle")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .foregroundColor(Color.gray)
            })
            .padding()
            .overlay(
                // 설명 화면
                Group {
                    if isShowingDescription {
                        VStack(spacing: 0) {
                            ZStack {
                                // 말풍선 모양의 테두리
                                RoundedRectangle(cornerRadius: 20)
                                    .fill(Color.orange)
                                    .frame(width: 150, height: 80)
                                    .transition(.opacity)
                                    .overlay(
                                        RoundedRectangle(cornerRadius: 20)
                                            .stroke(Color.orange, lineWidth: 2)
                                    )
                                // 설명 내용
                                Text("여기는 간단한 설명입니다.")
                                    .padding()
                                    .multilineTextAlignment(.center)
                                    .transition(.opacity)
                            }
                            TriangleView()
                                .foregroundColor(Color.orange)
                                .frame(width: 18, height: 12)
                            Rectangle()
                                .frame(width: 150, height: 120)
                                .foregroundColor(Color.white.opacity(0))
                        }
                    }
                }
            )
        }
    }
}

 

PracticeProj_infoAnimation.zip

0.05MB

 

 

 

 

 

3. 말풍선 모양 도형과 함께 출력 v2

 

import SwiftUI

struct TriangleView: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        
        return path
    }
}

struct ContentView: View {
    var body: some View {
        PracticeView()
    }
}


struct PracticeView: View {
    @State private var isShowingDescription = false

    var body: some View {
        VStack {
            Button(action: {
                // 물음표 아이콘을 누를 때마다 설명 화면 표시 여부를 토글
                withAnimation(.easeInOut) {
                    isShowingDescription.toggle()
                }
                // 2초 후에 설명 화면 숨김
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation(.easeInOut) {
                        isShowingDescription = false
                    }
                }
            }, label: {
                HStack {
                    Text("닉네임을 바꾸고 싶으신가요?")
                        .font(.system(size: 16))
                        .multilineTextAlignment(.center)
                        .transition(.opacity)
                        .foregroundColor(Color.gray)
                    Image(systemName: "questionmark.circle")
                        .resizable()
                        .frame(width: 16, height: 16)
                        .foregroundColor(Color.gray)
                }
            })
            .padding()
            .overlay(
                // 설명 화면
                Group {
                    if isShowingDescription {
                        VStack(spacing: 0) {
                            ZStack {
                                // 말풍선 모양의 테두리
                                RoundedRectangle(cornerRadius: 10)
                                    .fill(Color.orange)
                                    .frame(width: 180, height: 30)
                                    .transition(.opacity)
                                // 설명 내용
                                Text("고객센터에 문의해주세요.")
                                    .font(.system(size: 14))
                                    .multilineTextAlignment(.center)
                                    .transition(.opacity)
                                    .foregroundColor(Color.red)
                            }
                            TriangleView()
                                .foregroundColor(Color.orange)
                                .frame(width: 18, height: 12)
                            Rectangle()
                                .frame(width: 150, height: 120)
                                .foregroundColor(Color.white.opacity(0))
                        }
                    }
                }
            )
        }
    }
}

 

 

PracticeProj_v2.zip

0.05MB