How To Round The Corners Of A Progress View (With An Increased Height)

The goal:

The problem: Increasing the height of a progress bar breaks corner radius. The corners won’t round smoothly.

Increase The Height

If you search for how to increase height of UIProgressView you will probably come across the answer:

progressBar.transform = progressBar.transform.scaledBy(x: 1, y: 8)

Simple enough.

Make The Corners Round

If you search for how to round the corners of a progress bar you will probably come across this Stack Overflow post.

In which it tells you to set the corner radius and then clip to bounds: (The sublayers is so the inside bar has rounded corners as well.)

 progressBar.layer.cornerRadius = 8
 progressBar.clipsToBounds = true
 progressBar.layer.sublayers![1].cornerRadius = 8
 progressBar.subviews[1].clipsToBounds = true

The problem is putting them together results in:

Which obviously isn’t what we are looking for.

The Solution

Instead of using .transform to increase the height, you need to use a height constraint on the progress bar.

This will increase the height and .cornerRadius will act as expected.

TL;DR

Use a height constraint to increase the size of the progress bar.

Then you can use .cornerRadius and .clipsToBounds to round the corners as expected.