SwiftUI ProgressView styling

Question

Created Jul ’20

Replies 3

Boosts 1

Views 16k

Participants 3

In watchOS I want to change the size and foreground color of a ProgressView. In Apple's example they use a separate struct to customize the appearance of the ProgressView. However I can't seem to resize the ProgressView beyond its default. I've tried using .frame with no luck. And .foregroundColor appears to have no effect as far as I can tell either.

Has anyone had any luck customizing the new ProgressView with Xcode12 and SwiftUI 2.0?

Code Block struct ContentView: View {
	@State private var progressAmount = 0.0
	let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
	var body: some View {
		ProgressView("Progress…", value: progressAmount, total: 100)		
				.progressViewStyle(DarkBlueShadowProgressViewStyle())
				.progressViewStyle(CircularProgressViewStyle())
				.onReceive(timer) { _ in
				if progressAmount < 100 {
					progressAmount += 2
				}
			}
	}
}
struct DarkBlueShadowProgressViewStyle: ProgressViewStyle {
	func makeBody(configuration: Configuration) -> some View {
		ProgressView(configuration)
			.shadow(color: Color(red: 0, green: 0, blue: 0.6), radius: 4.0, x: 1.0, y: 2.0)
	}
}

Answered by DanOLeary in 618611022

I found the answer to this. It's the tint initializer inside CircularProgressViewStyle. This will display a color but you can also define a Gradient.

Code Block .progressViewStyle(CircularProgressViewStyle(tint: Color.yellow))

Boost

Answer 1

DanOLeary OP

Jul ’20

Accepted Answer

I found the answer to this. It's the tint initializer inside CircularProgressViewStyle. This will display a color but you can also define a Gradient.

Code Block .progressViewStyle(CircularProgressViewStyle(tint: Color.yellow))

16

Answer 2

ridge2575 OP

Aug ’20

Use the .scaleEffect modifier. For example:

Code Block .scaleEffect(1.5, anchor: .center)

6

Answer 3

RomzaT OP

Dec ’22

TInt view modifier should be used since iOS 15: https://developer.apple.com/documentation/swiftui/path/tint(_:)

1