2

I'm experiencing an issue with a UIProgressView (using Xcode 11.5 and current Swift version). My aim is to create a progress bar with an increased height (vs. the Apple standard height) and rounded corners, which represents the progress of a played audio file smoothly.

intended progress bar style

I can easily achieve the desired look by combining a height constraint in interface builder with the following code:

audioProgress.layer.cornerRadius = bubble.frame.size.height / 3
audioProgress.clipsToBounds = true

However, the issue I'm experiencing is that the progress bar does not start smoothy from the beginning – instead it jumps to about 1/3 of the bar (changes depending on device size) and stops there, until the audio "catches up" on that position, from where it continues running smoothly until the end.

I made sure this is not an error in my code re audiofiles, timer etc. but some layout issue. E.g. once I change the height of the bar back to Apple's standard height, the progress shows as it should.

I can avoid this odd behaviour by using the below code to increase the bar's height (instead of a constraint):

let transform: CGAffineTransform = CGAffineTransform(scaleX: 1.0, y: transformFactor)
audioProgress.transform = transform

However, this no longer allows me to round the corners as shown above, as the combination of layer.cornerRadius and the CGAffineTransform commands leads to oddly skewed corners, as shown in other posts.

So my 2 questions are:

  1. Can anyone explain what causes this weird behavior of the bar jumping and stopping for a while in the first place? And how to avoid it?

  2. If using the CGAffineTransform command is the only way to go – is there some other way to achieve the rounded corners? E.g. sth along the lines of "first transform the height, and only THEN round the corners" (as opposed to doing it the other way around, which, in my understanding, causes the skewed look...)

1 Answers1

0

Try this -

    audioProgress?.layer.cornerRadius = bubble.frame.size.height / 3
    audioProgress?.layer.masksToBounds = true
Chaman Sharma
  • 641
  • 5
  • 10