How to increase height of UIProgressView

问题

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.

回答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.

回答2:

Use CGAffineTransform to change dimensions:

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

回答3:

Using layout constraints worked for me:

回答4:

place this source

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

回答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];

回答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.

回答7:

The following code works on the newest swift xCode:

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

回答8:

Swift 3:

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

回答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
    }
}

回答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

回答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

回答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.

回答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.

回答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]];

回答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.

回答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));
    }]];

回答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)]];

回答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.

回答19:

Just subclass and adjust the intrinsic size:

class FatProgressView: UIProgressView {

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

}

回答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
    }
}

回答21:

Simple. Swift 4.

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

来源：https://stackoverflow.com/questions/3437564/how-to-increase-height-of-uiprogressview