構造体

ProgressView

タスクの完了に向けた進捗状況を示すビュー。

iOS 14.0+ iPadOS 14.0+ Mac Catalyst 14.0+

macOS 11.0+ tvOS 14.0+ visionOS 1.0+ watchOS 7.0+

struct ProgressView<Label, CurrentValueLabel> where Label : View, CurrentValueLabel : View

概観

進行状況ビュー (ProgressView) を使用して、タスクが完了に向けて進行中だが未完成であることを示します。進行状況ビューでは、進行状況の確定 (完了率) と不確定 (進行中かどうか) の両方の型を表示できます。

進行状況を示す数値とタスクの完了を表す total 値への結束を使用して ProgressView を初期化することにより、確定的な進行状況ビューを作成します。デフォルトでは、進行状況は 0.0 で、合計は 1.0 です。

以下の例では、状態プロパティの progress (進行状況) を使用して、確定した ProgressView に進行状況を表示します。進行状況ビューはデフォルトの合計 1.0 を使用し、progress は初期値 0.5 で始まるため、進行状況ビューは半分完了した状態から始まります。進行状況ビューの下にある [More(その他)] ボタンを使用すると、ユーザは進行状況を 5％ずつ増やすことができます。

struct LinearProgressDemoView: View {
@State private var progress = 0.5
var body: some View {
VStack {
ProgressView(value: progress)
Button("More") { progress += 0.05 }
}
}
}

不確定な進行状況ビューを作成するには、進行状況の値をとらないイニシャライザを使用して下さい。

var body: some View {
ProgressView()
}

Date 値の閉じた範囲をカバーする進捗ビュー (progress view) を作成することもできます。現在の日付 (date) が範囲内にある限り、進捗ビューは自動的に更新され、範囲の終わりに近づくにつれて進捗ビューが満たされたり、逆に減少したりします。以下の例は、進捗ビューの初期化開始時刻を 5 分間のタイマーの開始時刻とするものです。

struct DateRelativeProgressDemoView: View {
let workoutDateRange = Date()...Date().addingTimeInterval(5*60)
var body: some View {
ProgressView(timerInterval: workoutDateRange) {
Text("Workout")
}
}
}

Progress ビューのスタイリング

ProgressViewStyle プロトコルに準拠するスタイルを作成することにより、進捗ビューの外観と相互作用をカスタマイズできます。ビュー内のすべての進捗ビューインスタンスに特定のスタイルを設定するには、 progressViewStyle(_:) 修飾子を使用します。以下の例では、カスタムスタイルにより、囲んでいる VStack 内のすべての進捗ビューに丸みを帯びたピンクの境界線が追加されます。

struct BorderedProgressViews: View {
var body: some View {
VStack {
ProgressView(value: 0.25) { Text("25% progress") }
ProgressView(value: 0.75) { Text("75% progress") }
}
.progressViewStyle(PinkBorderedProgressViewStyle())
}
}
struct PinkBorderedProgressViewStyle: ProgressViewStyle {
func makeBody(configuration: Configuration) -> some View {
ProgressView(configuration)
.padding(4)
.border(.pink, width: 3)
.cornerRadius(4)
}
}

SwiftUI には、linear (線形) と circular (円形) の 2 つの組み込み進捗ビュースタイルに加え、現在のコンテキストで最も適切なスタイルをデフォルトとする automatic (自動) スタイルが用意されています。以下の例は、60% 完了した時点で開始する円形の進捗ビューを示しています。

struct CircularProgressDemoView: View {
    @State private var progress = 0.6

    var body: some View {
        VStack {
            ProgressView(value: progress)
                .progressViewStyle(.circular)
        }
    }
}