SwiftUI ProgressViewのカスタマイズでできること・できないこと

はじめに

本記事で取り上げるカスタマイズの内容はユースケースが限定的ですが、誰かしらのためになれば嬉しいです。
Horizontalな進捗バーを扱います。

標準のスタイル

valueに0.0〜1.0を指定すると、進捗バーを実装できます。

ProgressView(value: 0.5)

バーの色を変える

tint(_:)を使うとバーの色を変えることができます。

ProgressView(value: 0.5)
    .tint(.green)

バーの背景色を変える（変えてるように見せることはできる）

background(:_)を使えばいける気がしたんですが、左端をよーく見ると背景色が少し見えてしまっています。
バーの背景色を変更したのではなく、ProgressView全体の背景色を変更したことになるわけですね（後述のちなみにを参照ください）。
そして、バーの背景色は透過なので、ProgressView全体の背景色がバーの背景色を通して見えている、という状態です。なので以下の場合、純粋なColor.redが見えているわけではないです。

バーの背景色を変更するModifierは用意されていないようでした。

ProgressView(value: 0.5)
    .tint(.green)
    .background(Color.red)

↓拡大してみると、左端に赤色が見えている。

clipShape(:_)を使うことで、左端に見えていた赤色を見えないようにすることはできました。

ProgressView(value: 0.5)
    .tint(.green)
    .background(Color.red)
    .clipShape(RoundedRectangle(cornerRadius: 8))

進捗バーの高さを変える

scaleEffect(x:y:)を使うと高さを変えることができます（デフォルトの高さは4.0になるようです）。
角丸のRadiusを変えられないので、あまり高さを大きくすると見栄えが悪くなりそうですね。

ProgressView(value: 0.5)
    .scaleEffect(x: 1, y: 4)

バーの色変更と組み合わせてみます。

ProgressView(value: 0.5)
    .tint(.green)
    .background(Color.red)
    .clipShape(RoundedRectangle(cornerRadius: 8))
    .scaleEffect(x: 1, y: 4)

参考

進捗バーの角丸を無くすことはできない

進捗バーはデフォルトで角丸になっていて、これを無くすためのAPIは提供されていないようです（ProgressViewStyleでもカスタムできなそう）。
自分が関わっているプロジェクトでは角が四角のデザインが要求されているので、ちょっと困っています...（デザイン変えてもらうか、ビューを自作するしかないかなあ...）

ちなみに

ProgressViewのイニシャライザには、labelとcurrentValueLabelという2つのViewBuilderクロージャを渡すことができます。

ProgressView(value: 0.5) {
    Text("loading...")
} currentValueLabel: {
    Text("50%")
}

このビューに対して、前述のバーの色変更をしてみましょう。

ProgressView(value: 0.5) {
    Text("loading...")
} currentValueLabel: {
    Text("50%")
}
    .tint(.green)
    .background(Color.red)

前述の通り、background(:_)はバーの背景色ではなく、ProgressView全体の背景色を指定していることがわかります。