SwiftUI를 이용한 진행률 뷰 만들기(ProgressView)

 

SwiftUI는 가로로 된 진행률을 보여주는 ProgressView 가 있다. 값은 Double로 바인딩할 수 있다. 예를 들면 어떤 프로그램을 다운받을 때 어느 정도 다운되었는 지 보여주는 진행 정도를 화면에 표출하는 게 ProgressView다.

 

기본 코드

import SwiftUI

struct ContentView: View {
    @State private var downloadAmount: Double = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            ProgressView("다운로드 중..", value: downloadAmount, total: 100)
                .padding()
        }
        .onReceive(timer) { _ in
            if downloadAmount < 100 {
                downloadAmount += 5
            }
        }
    }
}

 

실제는 진행정도를 값으로 받아서 보여줘야 하지만 값을 임의로 변경하기 위해 Timer를 사용해 downloadAmount 값을 변경한다. 변경된 값을 데이터를 감지하고 액션을 취할 수 있도록 .onReceive를 사용한다.

• .onReceive는 데이터를 탐지하고 액션을 취하며 event 를 내보낼 때 작업을 트리거하는 view다.

 

실행 화면

 

스타일

• CircularProgressViewStyle()
• LinearProgressViewStyle()

struct ContentView: View {

    @State var progress : Double = 0.3

    var body: some View {

        ProgressView(value: progress)
            .progressViewStyle(LinearProgressViewStyle(tint: .red))
            .padding()
    }
}

 

---

개발자 Document

Apple Developer Documentation