Xcode - Change size (height) of ProgressView in SwiftUI

Michal1
November 20, 2020
126 views
0 votes
2 Answers

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))
    }
}

Answers

- aheze
- November 20, 2020 at 10:32 pm
- 0 votes
0
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:

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)
```
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)
        }
    }
}
```
Login or Signup to reply.

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))

Please signup or login to give your own answer.

Click here to cancel reply.

Xcode – Change size (height) of ProgressView in SwiftUI

Answers