SwiftUIのProgressViewのデザインを調整する

iOS 14+で利用できるProgressViewのデザイン調整のメモ。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            ProgressView()
                .padding(.all, 16)
                .border(Color.black, width: 1)

            ProgressView()
                .scaleEffect(x: 2, y: 2, anchor: .center)
                .padding(.all, 16)
                .border(Color.black, width: 1)
                .progressViewStyle(CircularProgressViewStyle(tint: Color.green))

            ProgressView()
                .scaleEffect(x: 2, y: 2, anchor: .center)
                .padding(.all, 24)
                .background(Color.orange)
                .progressViewStyle(CircularProgressViewStyle(tint: Color.green))
                .cornerRadius(16)

            ProgressView()
                .scaleEffect(x: 2, y: 2, anchor: .center)
                .padding(.all, 24)
                .background(Color.orange)
                .progressViewStyle(CircularProgressViewStyle(tint: Color.green))
                .cornerRadius(16)
                .opacity(0.6)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView().padding(.all, 16).preferredColorScheme(.light).previewLayout(.sizeThatFits)
            ContentView().padding(.all, 16).preferredColorScheme(.dark).previewLayout(.sizeThatFits)
        }
    }
}

プレビュー。

メモ

レンダリングを拡大縮小するときはscaleEffectを使う。

func scaleEffect(x: CGFloat = 1.0, y: CGFloat = 1.0, anchor: UnitPoint = .center) -> some View

中のグルグルの色を変えるときはCircularProgressViewStyleでtint colorを指定する。