Customized UIProgressView with rounded corner images

问题

I am having difficulties customizing UIProgressView with two images. I have found plenty of helpful questions on the internet, but my problem is a little different. Maybe in a way that images I am using are rounded on not cornered rectangles; therefore, stretchableImageWithLeftCapWidth method doesn't seem to help in my case. When I stretch the images, there is some space because of rounded corners of the images, there is one question posted on this link

回答1:

You will have to Implement Custom UiProgressView and use the following code for your progress view and add your images for filling and background progress view, in my case they are loaderBar.png for filling and timeLineBig.png for background.

CustomProgressView.h

#import <UIKit/UIKit.h>

@interface CustomProgressView : UIProgressView

@end

CustomProgressView.m

#define fillOffsetX 2
#define fillOffsetTopY 2
#define fillOffsetBottomY 2

#import "CustomProgressView.h"

@implementation CustomProgressView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {

 CGSize backgroundStretchPoints = {10, 10}, fillStretchPoints = {7, 7};

 // Initialize the stretchable images.
 UIImage *background = [[UIImage imageNamed:@"timelineBig.png"] stretchableImageWithLeftCapWidth:backgroundStretchPoints.width
 topCapHeight:backgroundStretchPoints.height];

 UIImage *fill = [[UIImage imageNamed:@"loaderBar.png"] stretchableImageWithLeftCapWidth:fillStretchPoints.width
 topCapHeight:fillStretchPoints.height];

 // Draw the background in the current rect
 [background drawInRect:rect];

 // Compute the max width in pixels for the fill.  Max width being how
 // wide the fill should be at 100% progress.
 NSInteger maxWidth = rect.size.width - (2 * fillOffsetX);

 // Compute the width for the current progress value, 0.0 - 1.0 corresponding
 // to 0% and 100% respectively.
 NSInteger curWidth = floor([self progress] * maxWidth);

 // Create the rectangle for our fill image accounting for the position offsets,
 // 1 in the X direction and 1, 3 on the top and bottom for the Y.
 CGRect fillRect = CGRectMake(rect.origin.x + fillOffsetX,
 rect.origin.y + fillOffsetTopY,
 curWidth,
 rect.size.height - fillOffsetBottomY);

 // Draw the fill
 [fill drawInRect:fillRect];
 }



@end

finally when you want to use the custom progress view then call something like this...

self.customProgressView=[[CustomProgressView alloc] initWithFrame:CGRectMake(xValue, yValue, widthofProgressView, heightofProgressView)];

make sure you set your customized values for xValue, yValue , widthofProgressView & heightofProgressView according to your requirements

回答2:

If you having issues streching the image use resize resizableImageWithCapInsets:

UIImage *image = [baseImage resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];

You can check out this link.

来源：https://stackoverflow.com/questions/14775310/customized-uiprogressview-with-rounded-corner-images

标签

ios

objective-c

ios6

uiprogressview