UIProgressView and Custom Track and Progress Images (iOS 5 properties)

I am experimenting with some new properties in iOS 5 regarding UIProgressView. They are:

@property(nonatomic, retain) UIImage *progressImage;
@property(nonatomic, retain) UIImage *trackImage;

  • Showing a UIProgressView inside or on top of a UINavigationController's UINavigationBar
  • How to track the progress of a download using ASIHTTPRequest (ASYNC)
  • Know the download progress for update an UIprogressView
  • How to get the exact point of objects in swift?
  • Is it possible to add multiple colors in a UIProgressView?
  • How to Using ASIHTTPRequest to tracking Upload/Download progress
  • These new properties enable the customisation of the “progress” and the “track” image, so that you can make fancy progress bars without having to roll-your-own.

    I however cannot understand how Apple “stretches” the progress images, because documentation is a little flakey / OR there is some standard I am not aware of. Regardless, I am asking if someone can help me understand how to make appropriate progress and tracking images.

    I get results like this when I load my custom images, no matter which sizes I try:

    Progress Example

    My measurements are as follows:

    • UIProgressView length: 226 units
    • trackingImage.png: 10px
    • progressImage.png: 7px

    Lastly, here are my custom images:

    The Progress Image progressImage.png

    The Tracking Image trackImage.png

    Solutions Collect From Internet About “UIProgressView and Custom Track and Progress Images (iOS 5 properties)”

    Here’s what’s going on:

    The images you provide to the UIProgressView are basically being shoved in to UIImageViews, and the UIImageView is stretching the image to fill the space.

    If you simply do:

    [progressView setTrackImage:[UIImage imageNamed:@"track.png"]];

    Then you’re going to get weird results, because it’s trying to stretch a 10px wide image to fill (for example) a 100px wide image view. This means (roughly) that every pixel in the image will be repeated 10 times. So if the pixels in our image were:


    Then putting that image straight into a 100px wide image view would stretch it something like this:


    This is what’s happening to you.

    What you really want to have happen is this:


    In other words, you want the image to have a 1 point left edge that is never stretched, the center to be tiled, and to have a 1 point right edge that is also never stretched. To do this, you’ll need to make the image resizable:

    UIImage *track = [[UIImage imageNamed:@"track"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)];
    [progressView setTrackImage:track];

    If you want this to tile appropriately vertically as well, then the edge insets should be {1, 1, 1, 1} (assuming you want a 1 point border).

    Do the same to the progressImage, and you’ll end up with something that looks correct:

    Correct progressView


    Your images need to be resizable.