2

I am trying to create a vertical progress bar. But the problem is my code is working on IOS11 or Above but on IOS9 it's not working.

On IOS11 Or Above it looks like: enter image description here

But on IOS9 it looks like: enter image description here

My Code:

let progressBar: UIProgressView = {
    let prgressView = UIProgressView()
    prgressView.progress = 0.7
    prgressView.progressTintColor = UIColor(red: 1.0, green: 0.21, blue: 0.33, alpha: 1)
    prgressView.trackTintColor = UIColor.blue
    prgressView.layer.cornerRadius = 6.5
    prgressView.clipsToBounds = true
    prgressView.transform = CGAffineTransform(rotationAngle: .pi / -2)
    prgressView.translatesAutoresizingMaskIntoConstraints = false
    return prgressView
}()

layoutSubview()

override func layoutSubviews() {
    super.layoutSubviews()

    let width = progressBar.bounds.width
    let height = progressBar.bounds.height

    progressBar.bounds.size.width = height
    progressBar.bounds.size.height = width
}

viewDidLoad()

    self.addSubview(progressBar)
    progressBar.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    progressBar.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
    progressBar.widthAnchor.constraint(equalToConstant: 22.5).isActive = true
    progressBar.heightAnchor.constraint(equalToConstant: 250).isActive = true

I am following this tutorial to create vertical progressView: https://www.youtube.com/watch?v=ifekgTtb0rQ&t=1070s

Faisal Shahzad
  • 87
  • 1
  • 12
  • 3
    As of September 3, 2018, [95% of devices are iOS10 or higher](https://developer.apple.com/support/app-store/) so.. why sweat it? Just set your minimum iOS version and be done with it. This isn't like Android where people can choose an OS willy-nilly. Once people get the notification that there's a new version, they typically install it. And there's no going back. – Ian MacDonald Oct 04 '18 at 20:40

2 Answers2

2

I was able to make your code work just fine under iOS 9 and iOS 12 by making two changes to the code you posted:

  1. Remove layoutSubviews. You have set constraints. Do not also attempt to modify the view's frame directly.
  2. Swap the width and height constraints. Think about the size of the progress bar if you didn't apply the transform. You want the width to be 250 and the height to be 22.5. The transform doesn't change this. The transform only makes it look like it's 250 tall but it is still 250 wide.

In short, remove layoutSubviews and fix your constraints to:

progressBar.widthAnchor.constraint(equalToConstant: 250).isActive = true
progressBar.heightAnchor.constraint(equalToConstant: 22.5).isActive = true
rmaddy
  • 314,917
  • 42
  • 532
  • 579
  • Yes I already tried this but the problem comes when i try to apply some topAnchor or bottomAnchor the anchors point starts according to its height which is 22.5 – Faisal Shahzad Oct 04 '18 at 21:30
  • That's expected. Again, the constraints apply to the view without the transform. So if you want the "top" of the vertical progress bar to be 40 points from the top, you really need to set the constraint to `(width - height) / 2 + offset` or `(250 - 22.5) / 2 + 40`. – rmaddy Oct 04 '18 at 21:39
  • And at this point you are beyond your original question since this is not specific to any iOS version. – rmaddy Oct 04 '18 at 21:41
  • Thanks, I will try this – Faisal Shahzad Oct 04 '18 at 22:13
  • You can also `override var intrinsicContentSize` to return a CGSize with the height and width swapped. For example, `CGSize(width: rotatedView.intrinsicContentSize.height, heigh: rotatedView.intrinsicContentSize.width)`. – Andrew Kirna Jul 25 '19 at 17:35
0

Its not so difficult just rotate the progressbar with angle property of UIView named as transform

progressBar.transform = CGAffineTransform(rotationAngle: .pi / 2)
Zeeshan Ahmad II
  • 1,047
  • 1
  • 5
  • 9