Change size (height) of ProgressView in SwiftUI

user_13993493 0
Viewed 11824

I created a ProgressView in SwiftUI (using Xcode) and edited a bit but haven’t figured out how to change its height.

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView("Progres:", value: 50, total: 100)
        }.foregroundColor(Color(UIColor.systemBlue))
        .scaleEffect(1, anchor: .center)
        .accentColor(Color(UIColor.systemGreen))
    }
}
swiftui uiprogressview swift xcode ios
2 Answers

There's no direct way that I know of to change the height, but you can use the .scaleEffect modifier. Make sure to specify 1 for the x scale in order to only increase the height.

struct ContentView: View {
    var body: some View {
        ProgressBar()
        .padding([.leading, .trailing], 10)
    }
}

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView(value: 50, total: 100)
            .accentColor(Color.green)
            .scaleEffect(x: 1, y: 4, anchor: .center)
        }
    }
}

Result: Progress bar with larger height

A drawback to this is that you can't pass in a Label, because it will also get stretched.

ProgressView("Progress:", value: 50, total: 100)

The label "Progress:" stretched vertically

To work around this, just make your own Text above the ProgressView.

struct ProgressBar: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Progress:")
            .foregroundColor(Color.blue)
            
            ProgressView(value: 50, total: 100)
            .accentColor(Color.green)
            .scaleEffect(x: 1, y: 4, anchor: .center)
        }
    }
}

"Progress:" is not stretched

user_143518180

I needed something with a more rounded radius and without concealing the ProgressView inside another View so here's my take on it (extending @aheze 's answer by using the scale effect)

struct MyProgressViewStyle: ProgressViewStyle {
  var myColor: Color

  func makeBody(configuration: Configuration) -> some View {
      ProgressView(configuration)
          .accentColor(myColor)
          .frame(height: 8.0) // Manipulate height, y scale effect and corner radius to achieve your needed results
          .scaleEffect(x: 1, y: 2, anchor: .center)
          .clipShape(RoundedRectangle(cornerRadius: 6))
          .padding(.horizontal)
  }
}
// Here's how to use it inside a View
ProgressView(value: currentProgress, total: totalProgress)
            .progressViewStyle(MyProgressViewStyle(myColor: Color.green))
user_52598890
Related