8

I need UIProgressView as part of UITableView cell for one iOS 7 application. I have added UIProgressView from code on the right side of cell like this:

_progressBar = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
_progressBar.translatesAutoresizingMaskIntoConstraints = NO;
[self.contentView addSubview:_progressBar];

[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:_progressBar attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:_progressBar attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10.0]];
[_progressBar addConstraint:[NSLayoutConstraint constraintWithItem:_progressBar attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:60.0]];
[_progressBar addConstraint:[NSLayoutConstraint constraintWithItem:_progressBar attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:12.0]];

However, displaying UIProgressView is a bit strange. When progress is zero, UIProgressView object looks like this:

enter image description here

When I set progress value to 0.5, UIProgressView becomes rectangle on the left and remains rounded rectangle on the right:

enter image description here

And when I set progress to 0.98, looks like this:

enter image description here

Any idea how to fill UIProgressView by simply setting progress value and that rounded rectangle (or rectangle) form of element are kept the entire time? Or is this impossible without adding custom graphics or overriding UIProgressView?

Many thanks in advance and best regards.

uerceg
  • 4,637
  • 6
  • 45
  • 63

2 Answers2

19

Had the same problem today and fix is not that hard :)

In interface builder add a UIView with the exact same size as the UIProgressView. Add your UIProgressView in this new UIView.

Do the following for your UIView if you want corners:

1) Set cornerradius to the half of the height (e.g. 30px height progressbar means 15px corner radius UIVIew))

myView.layer.cornerRadius = 15;

2) Set mask to bounds

myView.layer.masksToBounds = TRUE;

3) Set clip to bounds so nothing can come out of the UIView 

myView.clipsToBounds = TRUE;

And now you have a rounded UIProgressBar with the height you want.

If you don't want rounded corners just add a UIView as the same way but only change the background color to the same grey as the UIProgressbar tracktint.

Goodluck!

-Sjoerd

Sjoerd Perfors
  • 2,317
  • 22
  • 37
  • even easier: change the background of the `UIView` to `clearColor` – dehlen Jan 03 '14 at 13:54
  • 1
    aren't `clipsToBounds` and `masksToBounds` the same? http://stackoverflow.com/questions/1177775/how-is-the-relation-between-uiviews-clipstobounds-and-calayers-maskstobounds – Hai Feng Kao Aug 13 '14 at 09:26
5

For future reference: I've solved this issue by setting the corner radius like

  _progressView.layer.cornerRadius = 2.0;

And then:

  _progressView.clipsToBounds = YES;

No need for a container for the UIProgressView.

rocir
  • 472
  • 1
  • 4
  • 9