Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Change size (height) of ProgressView in SwiftUI

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

2

Answers


  1. 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:
    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

    Login or Signup to reply.
  2. 0

    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))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search