[SwiftUI] 로딩바 출력하는 기능 예제

 

 

1. LoadingView 구조체 예시

 

struct LoadingView: View {
    @State private var isLoading = false
    var body: some View {
        ZStack {
            // 로딩 바를 나타낼 배경
            Color.gray.opacity(0.3)
                .ignoresSafeArea()
                .opacity(isLoading ? 1 : 0) // 로딩 중에만 보이도록 설정

            // 로딩 바
            ZStack {
                Rectangle()
                    .foregroundColor(Color.white)
                    .frame(height: 200)
                VStack {
                    ProgressView()
                        .progressViewStyle(CircularProgressViewStyle()) // 로딩 바 스타일 설정
                        .scaleEffect(2) // 크기 조절
                        .padding(.top, 60)
                        .opacity(isLoading ? 1 : 0) // 로딩 중에만 보이도록 설정

                    // 로딩 중 메시지
                    Text("내역을 불러오는 중이예요")
                        .font(size: 20)
                        .foregroundColor(Color.gray)
                        .padding(.top, 50)
                        .opacity(isLoading ? 1 : 0) // 로딩 중에만 보이도록 설정
                }
            }
            
        }
        .onAppear {
            startLoading() // 뷰가 나타날 때 로딩 시작
        }
    }

    func startLoading() {
        isLoading = true
        // 로딩이 완료된 후에 isLoading을 false로 설정하여 로딩 바를 숨김
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            isLoading = false
        }
    }
}

 

 

 

 

 

2. 사용 예시

 

// 경제 뉴스
struct MoneyTopTabThirdNews: View {
    
    @State private var isActive: Bool = false
    @State private var selectedUrl: String = ""
    @ObservedObject var newsData: StockNewsVM
    
    init() {
        self.newsData = StockNewsVM(api_url: api_url)
        self.loadNewsInfoData()
    }
    
    func loadNewsInfoData() {
        newsData.getData(completion: {data in
            DispatchQueue.main.async {
                self.newsData.stockNews = data
            }
        })
    }
    
    var body: some View {
        if let stockNews = newsData.stockNews {
            // 뉴스 기사가 없을 때
            if stockNews.result.totalData == 0 {
                Text("뉴스 기사가 없어요")
                    .foregroundColor(Color.gray600)
                    .font(.custom(pretendard_regular, size: 20))
            // 뉴스 기사가 있을 때
            } else {
                NavigationLink(destination: StartOpenWebView(targetUrl:selectedUrl), isActive: $isActive, label: { EmptyView() } )
                ForEach(stockNews.result.marketNewsList, id: \.newsId) { eachNews in
                    VStack {
                        Text(eachNews.title ?? "")
                            .foregroundColor(Color.black)
                            .font(.custom(pretendard_regular, size: 18))
                            .frame(width: 350, alignment: .topLeading)
                            .padding(.horizontal, 20)
                        HStack {
                            Spacer()
                            Text(eachNews.source ?? "")
                                .foregroundColor(Color.gray600)
                                .font(.custom(pretendard_regular, size: 18))
                        }
                        .padding(.horizontal, 20)
                        HStack {
                            Spacer()
                            Text(eachNews.date ?? "")
                                .foregroundColor(Color.gray4)
                                .font(.custom(pretendard_regular, size: 18))
                        }
                        .padding(.horizontal, 20)
                    }
                    .padding(10)
                    .onTapGesture {
                        isActive = true
                        selectedUrl = eachNews.link ?? ""
                    }
                }
                .onAppear {
                    DispatchQueue.main.async {
                        self.loadNewsInfoData()
                    }
                }
            }
        } else {
            LoadingView()
        }
    }
}