Change Height of UIProgressView in Swift

Question

I've been trying to change the size and rotation of a progress view to adopt the size of the screen. It would basically function have a filling glass effect on the screen of the phone.

I rotated it fairly harmlessly by using self.masteryProgress.transform = CGAffineTransformMakeRotation((CGFloat(-90) / CGFloat(180.0) * CGFloat(M_PI)))

I got the size of the view encasing the screen using view.bounds trying to get the rect and the width x height. So I'm not stuck there.

I tried using .frame .drawRect but when I use those it either breaks them or does nothing.

The height attribute seems to be locked at a constant value of 2 in interfaceBuilder.

Any solutions before I build a custom animation?

I tried setting the height of the progress bar in interfaceBuilder like some other posts said, but I need to have the progress view fill the whole screen no matter what device it's running on so that solution won't work in my case.

I ended up using CGAffineTransformScale(masteryProgress.transform, view.bounds.height / 1334, (view.bounds.width / 2))

Since I'm rotating the progressView vertically, I set the progress view to a width of 1334 (the height of the iPhone 6 Plus) and a height of 2. By dividing the height of the screen by these values it should resize to any phone perfectly.

possible duplicate of [Progress view height in iOS 7](http://stackoverflow.com/questions/18717895/progress-view-height-in-ios-7) — Wonjung Kim, Jul 07 '15 at 06:24
Plesae check the previous question. The autolayout way can be also applied in storyboard. — Wonjung Kim, Jul 07 '15 at 06:26
@WonjugKim That's good and all, but I need it to resize to the size of the screen and interface builder only lets you resize statically. — Zach Morris, Jul 07 '15 at 15:44

Bannings · Accepted Answer · 2017-09-23T05:23:23.340

103

You can scale it by set its transform like so:

Swift 2

masteryProgress.transform = CGAffineTransformScale(masteryProgress.transform, 1, 20)

Swift 3、4

masteryProgress.transform = masteryProgress.transform.scaledBy(x: 1, y: 20)

enter image description here

edited Sep 23 '17 at 05:23

answered Jul 07 '15 at 05:22

Bannings

10,376
7
44
54

I was using CGAffineTransformMakeScale before. Thanks! – Zach Morris Jul 07 '15 at 15:44
Hi there, I am trying to use this code for my bar, but unfortunately mine fills diagonally... any ideas? – dwinnbrown Jul 16 '15 at 11:47
Would be very grateful if you could take a look @Bannings http://stackoverflow.com/questions/31453454/swift-uiprogressview-fills-diagonally – dwinnbrown Jul 16 '15 at 11:55
1

by doing this you lose the corner radius and make it blurry – mcatach Dec 24 '21 at 19:10

Sauvik Dolui · Answer 2 · 2019-06-04T10:50:51.397

I faced problem while making the UIProgressView as round rect one. While using only the transform

masteryProgress.transform = CGAffineTransformMakeScale(1, 4)

I achieved which was not my final requirement.

while my final expectation was something like the following

I finally achieved it by following two steps

1. Set Height Constraint from Interface Builder:

2. Create a custom class of UIProgressView and override func layoutSubviews() to add a custom mask layer:

    override func layoutSubviews() {
        super.layoutSubviews()

        let maskLayerPath = UIBezierPath(roundedRect: bounds, cornerRadius: 4.0)
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = maskLayerPath.cgPath
        layer.mask = maskLayer
    }

And here is the final result

score 27 · Answer 3 · answered Jun 06 '16 at 22:30

Transform still seems to be the only way to accomplish this. Try adding it as an extension to UIProgressView like so.

extension UIProgressView {

    @IBInspectable var barHeight : CGFloat {
        get {
            return transform.d * 2.0
        }
        set {
            // 2.0 Refers to the default height of 2
            let heightScale = newValue / 2.0
            let c = center
            transform = CGAffineTransformMakeScale(1.0, heightScale)
            center = c
        }
    }   
}

score 20 · Answer 4 · answered Oct 17 '16 at 08:22

20

If you added UIProgressView using Interface Builder, just create height constraint and change to value what you need. That's it.

answered Oct 17 '16 at 08:22

Stanislau Baranouski

1,425
1
18
22

3

Oh wow, so right. I was fighting with transforms and disappearing round corners, but actually that was quite simple ;) Only a pity that the storyboard doesn't reflect reality. – Benjamin Piette Mar 13 '18 at 10:03

score 7 · Answer 5 · answered Feb 27 '16 at 19:56

7

This will work:

masteryProgress.transform = CGAffineTransformMakeScale(1, 4)

answered Feb 27 '16 at 19:56

Andy Lebowitz

1,471
2
16
23

score 6 · Answer 6 · answered Sep 27 '19 at 09:53

Some modification of 'Sauvik Dolui' answer:

In UIBezierPath you should set cornerRadius: like (self.frame.height / 2). This is more universal solution than use (4.0).

override func layoutSubviews() {
    super.layoutSubviews()

    let maskLayerPath = UIBezierPath(roundedRect: bounds, cornerRadius: self.frame.height / 2)
    let maskLayer = CAShapeLayer()
    maskLayer.frame = self.bounds
    maskLayer.path = maskLayerPath.cgPath
    layer.mask = maskLayer
}

score 4 · Answer 7 · answered Dec 18 '16 at 05:06

4

In Swift 3, it's changed to CGAffineTransform(scaleX: CGFloat, y: CGFloat). So code would be:

masteryProgress.transform = CGAffineTransform(scaleX: 1, y: 4)

answered Dec 18 '16 at 05:06

Pandurang Yachwad

1,695
1
19
29

hi ! ... when i use CGAffineTransform for progressview and turn iphone in landscape mode , the progressview-bar reset the scale.. why?! – mrk182 Sep 11 '17 at 22:26

score 3 · Answer 8 · edited Feb 03 '17 at 10:22

3

In Swift version 3.0.2 use this:

masteryProgress.transform = masteryProgress.transform.scaledBy(x: 1, y: 5)

edited Feb 03 '17 at 10:22

Prasad Khode

6,602
11
44
59

answered Feb 03 '17 at 10:12

user7510675

31
2

score 1 · Answer 9 · edited May 23 '17 at 12:03

1

I'm experiencing same with Swift - UIProgressView fills diagonally

After scale progressbar with

CGAffineTransformMakeScale(1.0, 5.0)

bar animation becomes filling from left top corner to right bottom.

edited May 23 '17 at 12:03

Community

1
1

answered Sep 06 '16 at 21:48

Nevermore

237
2
14

score 1 · Answer 10 · answered May 15 '18 at 19:06

1

Putting the UIProgressView inside a UIStackView and setting the UIStackView's constraints might work as well. At least worked for me

answered May 15 '18 at 19:06

Anestis S.

45
7

score 0 · Answer 11 · answered Apr 25 '20 at 03:54

I tried the accepted answer for Swift 5, had a label pinned to the bottom of the progressView and the label was oddly stretched. To change the height without any other issues I used it's heightAnchor to set it to the height I wanted.

1- create a programmatic UIProgressView:

lazy var progressView: UIProgressView = {
    let progressView = UIProgressView(progressViewStyle: .default)
    progressView.translatesAutoresizingMaskIntoConstraints = false
    progressView.trackTintColor = .white
    progressView.progressTintColor = .green
    progressView.progress = 0
    return progressView
}()

2- set the heightAnchor constraint:

progressView.heightAnchor.constraint(equalToConstant: 12).isActive = true 

progressView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
progressView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20).isActive = true
progressView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true

score 0 · Answer 12 · answered Aug 11 '20 at 01:27

0

It works for me:

progress.transform = progress.transform.scaledBy(x: 1, y: self.bounds.size.height)

"self.bounds.size.height" is the height you want

answered Aug 11 '20 at 01:27

James Ryan

61
1

score 0 · Answer 13 · answered Jan 31 '21 at 16:37

0

I gave it height constraint and it worked for me. I gave it 10 Constant. But if you are creating a universal app you can also use multipliers.

answered Jan 31 '21 at 16:37

Simran Singh

445
6
8

Change Height of UIProgressView in Swift

13 Answers13