Create Square Rather Than Rounded Edge Effect UIProgressView

Question

I have a UIProgressView that I am trying to make have square rather than rounded edges. I don't see any obvious way to do this, so my thought is to make the progress image itself a bit larger than its square frame, so that the progress image is thereby cropped into a square shape. However, no matter how I alter the size of the progress image, I can't seem to accomplish this effect. Can anyone tell me if there is a way to achieve what I am going for?

Here is what I currently have inside a UIView subclass:

self.progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
self.progressView.trackImage = [PLStyle imageForColor:[PLColors greyLight] inFrame:CGRectMake(0, 0, 1, ProgressViewHeight)];
self.progressView.progressImage = [PLStyle imageForColor:[PLColors orange] inFrame:CGRectMake(0, 0, 1, ProgressViewHeight)];

[self.progressView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self addSubview:self.progressView];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeLeading
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.imageView
                              attribute:NSLayoutAttributeTrailing
                             multiplier:1
                               constant:LeadingOrTrailingSpace]];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeCenterY
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self
                              attribute:NSLayoutAttributeCenterY
                             multiplier:1
                               constant:0]];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeTrailing
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.counter
                              attribute:NSLayoutAttributeLeading
                             multiplier:1
                               constant:-LeadingOrTrailingSpace]];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeHeight
                              relatedBy:NSLayoutRelationEqual
                                 toItem:nil
                              attribute:NSLayoutAttributeNotAnAttribute
                             multiplier:1
                               constant:ProgressViewHeight]];

//the method definition used above for creating an image in the progress view

+ (UIImage *)imageForColor:(UIColor *)color inFrame:(CGRect)rect
{
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

score 5 · Answer 1 · answered Jun 29 '17 at 10:47

5

Set UIProgressViewStyle to bar

OBJECTIVE-C:

[progressView setProgressViewStyle: UIProgressViewStyleBar];

Swift:

progressView.progressViewStyle = .bar

answered Jun 29 '17 at 10:47

Lal Krishna

15,485
6
64
84

Thanks. This is the perfect answer. – Umair_UAS Oct 06 '20 at 11:00

score 2 · Accepted Answer · answered Oct 07 '14 at 15:02

You could always roll your own pretty easily.

@interface MyProgressView : UIView
@property (assign) float progress;
@end

@implementation MyProgressView {
  UIView *progressBar;
}
- (void)setProgress:(float)progress {
  _progress = progress;
  [self setNeedsLayout];
}
- (void)layoutSubviews {
  CGRect frame = self.bounds;
  frame.size.width *= progress;
  progressBar.frame = frame;
}
@end

You could also use a "min/max value" + "set value" and do the progress calculation if that better suits your application. You could also use CALayers if you dislike smashing together a bunch of UIViews to do simple rectangle drawing.

score 0 · Answer 3 · answered May 02 '17 at 16:23

0

Use progressViewStyle = .bar

 let p = UIProgressView(frame: .zero)
 p.progressViewStyle = .bar

answered May 02 '17 at 16:23

johndpope

5,035
2
41
43

Create Square Rather Than Rounded Edge Effect UIProgressView

3 Answers3