Swift - UIProgressView fills diagonally

Question

So I set up a UIProgressView to fill after 3 seconds as well as increasing the height of the bar a bit. However when it fills up, it fills diagonally as opposed to just filling from one side to the other. The bar starts in the top right corner and then expands to fill the progress view just before it ends.

This is the code I am using:

import UIKit

class LoadingScreen: UIViewController {


    @IBOutlet weak var progressView: UIProgressView!


    override func viewDidLoad() {
        super.viewDidLoad()

        UIView.animateWithDuration(3, animations: { () -> Void in
            self.progressView.setProgress(1.0, animated: true)
        })

        progressView.transform = CGAffineTransformScale(progressView.transform, 1, 10)

}


}

Here are some screenshots:

enter image description here

This is only a guess, but could your put your `progressView.transform = CGAffineTransformScale(progressView.transform, 1, 10)` before the animation! — DevAndArtist, Jul 16 '15 at 12:05
@JuanCarlosOspinaGonzalez I just want the white bit to begin on one side and act like a progress bar where it will go from 0 to 1.0 in 3 seconds — dwinnbrown, Jul 16 '15 at 12:07
Ok I tested it myself and I can confirm your behavior. I guess you could build some sort of progressbar yourself. You could use some autolayout constraints and modify the `.constant` for example. This would be just an UIView you will have to stretch a little. ;) — DevAndArtist, Jul 16 '15 at 12:23
Ok I think I've solved it temporarily until I find a better way to do it. I basically just set it up with NSTimer so that every 0.001 seconds, 0.001 progress is added to the bar. Definitely not the right way to do it but it stops the diagonal scaling and looks ok... — dwinnbrown, Jul 16 '15 at 12:29
It looks like the animation is starting from a zero rect, so you should be able to set a starting rect first: progressView.frame = CGRectMake(0,0,startingHeight,0) and it will then animate from that starting shape. It may be worth noting that progressBar.setProgress(0.5, animated: true) is the intended way to update the progress bar. — Sean Vikoren, Mar 09 '16 at 23:54

score 2 · Answer 1 · answered Jan 13 '16 at 00:33

2

Coming to this rather late but I just experienced this and fixed it by changing my progressView style to .Bar. Hope that helps!

let progressView = UIProgressView(progressViewStyle: .Bar)

answered Jan 13 '16 at 00:33

dhour

21
1
6

score 1 · Answer 2 · answered Jul 16 '15 at 12:03

1

It seems that the size of the progressView is incorrect.

Try to put these code in viewDidLayoutSubviews:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    UIView.animateWithDuration(3, animations: { () -> Void in
        self.progressView.setProgress(1.0, animated: true)
    })

    progressView.transform = CGAffineTransformScale(progressView.transform, 1, 10)
}

answered Jul 16 '15 at 12:03

Bannings

10,376
7
44
54

Just put that in but it didn't work. Did the same thing. I think it might be something to do with using the `.animateWithDuration` seems by default it animates diagonally. Any other ideas or workarounds? - Sorry I'm really new to all this :P – dwinnbrown Jul 16 '15 at 12:06

Swift - UIProgressView fills diagonally

2 Answers2

Linked