【Swift UI】ProgressViewの使い方!進行状況を表示しよう!

この記事からわかること
- Swift UIのProgressViewでタスクの進行状況を表示させる方法
- プログレスバーやローディングビュー、パーセンテージ
- progressViewStyleで円形にする
index
[open]
\ アプリをリリースしました /
ProgressView構造体
Swift UIのProgressView
構造体を使用することでタスクの進行状況を表示するプログレスバーやローディングビューを簡単に構築することができます。
struct ProgressView<Label, CurrentValueLabel> where Label : View, CurrentValueLabel : View
プログレスバーを表示する
プログレスバーを表示させるためにはProgressView(value:)
を使用し、表示させる値を渡します。

struct LinearProgressDemoView: View {
@State private var progress = 0.5
var body: some View {
VStack {
ProgressView(value: progress)
Button("Add") { progress += 0.05 }
}
}
}
ローディングビューを表示する
例えばAsyncImage
などでサーバーの画像を表示させるなど少し時間のかかる処理を実装する場合はそのプレースホルダーとして以下のようなローディングビューを設置すると見た目がよくなります。

これは引数なしでそのまま記述すればOKです。
AsyncImage(url: URL(string: "https://tech.amefure.com/image/swift.png")) { image in
image.resizable()
} placeholder: {
ProgressView()
}.frame(width: 50, height: 50)
progressViewStyleで指定する
プログレスバーのスタイルはprogressViewStyle
モディファイアを使用して明示的に指定することも可能です。その際はlinear
orcircular
を指定します。
struct CircularProgressDemoView: View {
@State private var progress = 0.6
var body: some View {
VStack {
ProgressView(value: progress)
.progressViewStyle(.circular)
.progressViewStyle(.linear)
}
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
個人開発に限界を感じたらiOSに特化したプログラミングスクール「iOSアカデミア」も検討してみてください!無料相談可能で「最短・最速」でiOSエンジニアになれるように手助けしてくれます。