[SwiftUI] ProgressView の使用方法

ProgressView はタスクが進行中であることを表現するための View です。
今回は、ProgressView の使用方法について説明します。

環境

OS: macOS Big Sur 11.5.2
Xcode: 12.5.1
Swift: 5.2.4

ProgressView の基本使用方法

ProgressView の基本的な構文は以下の通りです。
第１引数には進捗状況を表す文字列、第２引数は現在の進捗状況を表す値を指定します。
ProgressView は100% という値を「1.0」という値で持っていますので、value に0.5 を指定すると 50% 進捗していることを表すことができます。

Picker("進捗状況を表す文字列", value: 現在値) {
    // 選択可能な複数の項目
}

以下は、「Downloading…」という文字列を表示し、進捗率を50%で表示する ProgressView の例です。

struct ContentView: View {
    @State private var progressValue = 0.5
    var body: some View {
        VStack {
            ProgressView("Downloading…", value: progressValue)
        }
    }
}

ProgressView の基本使用例

スタイルを円形ゲージに変更する

progressViewStyle モディファイアの引き数に「CircularProgressViewStyle()」を指定すると、スタイルを円形ゲージに変更することができます。

struct ContentView: View {
    @State private var progressValue = 0.5
    var body: some View {
        VStack {
            ProgressView("Downloading…", value: progressValue)
                .progressViewStyle(CircularProgressViewStyle())
        }
    }
}

スタイルを円形ゲージに変更する例

タイマーを使用した例

ここでは、タイマーを使用して、進捗していく様子を確認できるようにした例を示します。
タイマーは　Timer.publish を使用することとしました。引数の every はタイマーが何秒おきに起動するか、on引数はタイマーが起動するスレッドがどこか（.main、.current）、in引数はタイマーを実行する時のループモードを指定します。
作成したタイマーは onReceive で受け取ることができます。この例では、progressValue が100 未満の間、タイマーが起動し続けます。

struct ContentView: View {
    @State private var progressValue = 0.0

    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {
        ProgressView("Downloading…", value: progressValue, total: 100)
        .onReceive(timer) { _ in
            if progressValue < 100 {
                progressValue += 1
            }
        }
    }
}

タイマーを使用した例