How to increase height of UIProgressView

Question

I am creating UIProgressView from nib. I want to increase its height but it is fixed to 9. For iPad I need to increase its height. How it can be done?

Thanks in advance.

Answer 1

You can not change the height of UIProgressView through nib. If you want to change the height then you have to implement it through custom draw method.

Answer 2

Use CGAffineTransform to change dimensions:

CGAffineTransform transform = CGAffineTransformMakeScale(1.0f, 3.0f);  
progressView.transform = transform;

Answer 3

Using layout constraints worked for me:

Answer 4

place this source

@implementation UIProgressView (customView)
- (CGSize)sizeThatFits:(CGSize)size {
    CGSize newSize = CGSizeMake(self.frame.size.width, 9);
    return newSize;
}
@end

Answer 5

Just set the frame of the UIProgressView in code after it has been initialised. Eg:

UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
// progressView's frame will be small/standard height

progressView.frame = CGRectMake(0, 0, 100, 20);
// Now the frame is set to my custom rect.

This is working for me on iOS 5. I'm using custom trackImage and progressImage though. My code looks like this. Note that I'm adding the progressView to another view and want it to be the same size as the containing view hence setting the frame to self.bounds.

_progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
_progressView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
_progressView.trackImage = [[UIImage imageNamed:@"search-progress-track"] resizableImageWithCapInsets:UIEdgeInsetsMake(3.0f, 3.0f, 3.0f, 3.0f)];
_progressView.progressImage = [[UIImage imageNamed:@"search-progress"] resizableImageWithCapInsets:UIEdgeInsetsMake(3.0f, 3.0f, 3.0f, 3.0f)];
_progressView.frame = self.bounds;
[_progressView setProgress:0.5];

Answer 6

There is a simple way to change the height within Interface Builder. No code required and your change will show in IB.

Select the UIProgressView object in your storyboard or xib, choose Editor > Pin > Height. This will create a height constraint and allow you to change its value in the Attributes Inspector in your left most (Utilizes) panel.

Answer 7

The following code works on the newest swift xCode:

var transform : CGAffineTransform = CGAffineTransformMakeScale(1.0, 6.0)
           progressView.transform = transform

Answer 8

Swift 3:

progressView.transform = progressView.transform.scaledBy(x: 1, y: 9)

Answer 9

Swift3

var transform : CGAffineTransform = CGAffineTransform(scaleX: 1.0, y: 6.0)
progressBar.transform = transform 

Addendum

If you're working with an IBDesignable class, you can tweak it with this from your storyboard:

@IBInspectable var progressBarHeight: CGFloat = 2.0 {
    didSet {
        let transform = CGAffineTransform(scaleX: 1.0, y: progressBarHeight)
        self.progressView.transform = transform
    }
}

Answer 10

Here is the Solution

You can use transform, but problem arises that -> when you change orientation of the device, UIProgressView height becomes original one.

So best way to increase UIProgressView height is

yourProgressView.progressImage=[UIImage imageNamed:@"image1.png"];
yourProgressView.trackImage = [UIImage imageNamed:@"image2.png"];
// IMPORTANT: image1/image2 height (in pixel) = height that you want for yourProgressView.
// no need to set other properties of yourProgressView.

Thank you

Answer 11

You can also use AutoLayout to achieve the same look and it works in iOS 7.1. Simply add a height constraint equal to the height you want your progress bar to be. Check out this answer on this similar question for more details.

https://stackoverflow.com/a/19606981/142358

Answer 12

For iOS 7+, use Core Graphics and CATransform3DScale to scale the layer in that view:

CATransform3D transform = CATransform3DScale(progressView.layer.transform, 1.0f, 3.0f, 1.0f);
progressView.layer.transform = transform;

Just make sure you do this after you set the frame of progressView, not before.

Answer 13

For iOS 7 and above, I did the following which (a) works and (b) does not generate a warning:

First add UIProgressView to my View Controller in the storyboard. Then add a Height constraint to the UIProgressView by CTRL+Dragging the UIProgressView to itself. The constraint will be created with a default value of 2. Leave that alone.

Now to change the height add an IBOutlet to the UIViewController subclass in code like this:

@property (nonatomic, weak) IBOutlet NSLayoutConstraint *progressHeight;

Then in your code, probably - viewDidLoad, add:

self.progressHeight.constant = 9;

This should work out nicely for you.

Answer 14

Here is a third party progress bar that allows setting height. https://github.com/yannickl/YLProgressBar

Set frame via code or interface builder. You might want to disable the animation or stripes, though.

Here is code for a thick green progress bar:

YLProgressBar *bar = [[YLProgressBar alloc] initWithFrame:CGRectMake(0, 100, 100, 50)];
bar.progress = 0.5;
bar.type = YLProgressBarTypeFlat;
bar.hideStripes = YES;
bar.behavior = YLProgressBarBehaviorDefault;
bar.progressTintColors = @[[UIColor greenColor], [UIColor greenColor]];

Answer 15

You can implement a category (new file - category) and just add the category at the beginning of your class. It works fine also with iboutlet (nib/storyboard).

The code is just

@interface UIProgressView (heavyView)
@end

@implementation UIProgressView (heavyView)
- (CGSize)sizeThatFits:(CGSize)size
{
    CGSize newSize = CGSizeMake(size.width, 9);
    return newSize;
}
@end

if you want to apply the change for just one progressView and you have more than one progressView in your class, you can just use a subclass instead.

Answer 16

Mayur's method worked well for me in iOS 7, here's my code (uses UIImage+BBlock)

    CGFloat progressViewHeight = 5;
    [[UIProgressView appearance] setProgressImage:[UIImage imageForSize:CGSizeMake(1, progressViewHeight) withDrawingBlock:^{
        CGContextRef context = UIGraphicsGetCurrentContext();
        UIColor * colortoUse = [UIColor blueColor];
        CGContextSetFillColorWithColor(context, [colortoUse CGColor]);
        CGContextFillRect(context, CGRectMake(0, 0, 1, progressViewHeight));
    }]];

    [[UIProgressView appearance] setTrackImage:[UIImage imageForSize:CGSizeMake(1, progressViewHeight) withDrawingBlock:^{
        CGContextRef context = UIGraphicsGetCurrentContext();
        UIColor * colortoUse = [UIColor progressViewBackgroundColor];
        CGContextSetFillColorWithColor(context, [colortoUse CGColor]);
        CGContextFillRect(context, CGRectMake(0, 0, 1, progressViewHeight));
    }]];

Answer 17

Instead of using interface builder, the height of UIProgressView can be changed by adding constraints to it programmatically.

UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
progressView.translatesAutoresizingMaskIntoConstraints = NO;
CGRect frame = CGRectMake(100, 200, 200, 50);
[self.view addSubview:progressView];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-y-[progressView(height)]" options:0
                                                                  metrics:@{@"y": @(CGRectGetWidth(frame)),
                                                                            @"height": @(CGRectGetHeight(frame))}
                                                                    views:NSDictionaryOfVariableBindings(progressView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-x-[progressView(width)]" options:0
                                                                  metrics:@{@"x": @(CGRectGetMinX(frame)),
                                                                            @"width": @(CGRectGetWidth(frame))}
                                                                    views:NSDictionaryOfVariableBindings(progressView)]];

Answer 18

My suggestion would be to place a container view on your view controller's view in Auto Layout. Make sure it's the size that you want for your progress bar. Now drag a progress view inside the container and pin all sides to the bounds of the container. You should immediately see the progress view resize to fit the bounds of its container.

Answer 19

Just subclass and adjust the intrinsic size:

class FatProgressView: UIProgressView {

    override var intrinsicContentSize: CGSize {
        return CGSize(width: UIView.noIntrinsicMetric, height: 20.0)
    }

}

Answer 20

We can set the height of UIProgressView by creating the custom class of ProgressView by subclassing the UIProgressView.

In Swift,

public class ProgressView: UIProgressView {
    var height: CGFloat = 4.0
    public override func sizeThatFits(_ size: CGSize) -> CGSize {
        return CGSize(width: size.width, height: height) // We can set the required height
    }
}

Answer 21

Simple. Swift 4.

progressBar.transform = CGAffineTransform(scaleX: self.view.frame.width / progressBar.frame.width, y: self.view.frame.height / progressBar.frame.height)