【SwiftUI】ProgressViewの使い方

SwiftUI

2021.09.252021.09.08

今回はローディング中やダウンロードの進行を表現するProgressViewの使い方について説明します。

環境
CircularProgressViewStyle
LinearProgressViewStyle
色の変更

環境

Xcode12.5.1
動作はシミュレーターのiPhone12 miniで確認

CircularProgressViewStyle

CircularProgressViewStyleは、通信中などに使うクルクルと回転するものです。引数に文字列を渡すことでラベルを表示できます。

struct ContentView: View {
    var body: some View {
        ProgressView("Now Loading")
    }
}

LinearProgressViewStyle

LinearProgressViewStyleはダウンロードの進行状態を表す際などに使用する棒状のスタイルです。value: には進行具合を渡す変数を、total: は value に対しての最大値を指定します。
(今回はデザインがわかりやすいように、初期値を50.0にしています)

struct ContentView: View {
    @State private var current = 50.0
    var body: some View {
        ProgressView("Now Downloading", value: current, total: 100)
    }
}

色の変更

CircularProgressViewStyleはテキストのみ色を変更できます。

struct ContentView: View {
    var body: some View {
        ProgressView("Now Loading")
            .foregroundColor(.green)
    }
}

LinearProgressViewStyleはテキストとバーの色を変更できます。

struct ContentView: View {
    @State private var current = 50.0
    var body: some View {
        ProgressView("Now Downloading", value: current, total: 100)
            .accentColor(.red)
            .foregroundColor(.green)
    }
}