Now, Lets create/add a New Objective -C Class in your project. Now, in your header file make it a subclass of UIProgressView.
@interface CustomProgressView : NSObject --> @interface CustomProgressView : UIProgressView
your .h file : // CustomProgressView.h
#import <UIKit/UIKit.h>
@interface CustomProgressView : UIProgressView
@end
Now, in .m file, we will be using two images in DrawRect: method to redraw new Progress View.
your .m file :
// CustomProgressView.h
- (void)drawRect:(CGRect)rect {
// lets prepare UIImage first, with stretching to fit our requirements
UIImage *background = [[UIImage imageNamed:@"progress-bar-bg.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 4)];
UIImage *fill = [[UIImage imageNamed:@"progress-bar-fill.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 4)];
// Draw the background in the current rect with background UIImage
[background drawInRect:rect];
// Compute the max width in pixels for the fill. Max width being how
wide the fill should be at 100% progress. (maximun fill width)
NSInteger maxWidth = rect.size.width;
// here we are filling whole width of ProgressView
// Compute the width for the current progress value, 0.0 - 1.0 corresponding
to 0% and 100% respectively.
NSInteger curWidth = floor([self progress] * maxWidth);
//[self progress] gives the current progress rate of UIprogressView
// floor returns absolute integer
// Create the rectangle for our fill image accounting for the position offsets,
resizing the filling image rect to cover the background
(adjust as per your design, like from where you want to start fill,
where you want to end, how many pixel you want to left in upper side etc)
CGRect fillRect = CGRectMake(rect.origin.x,
rect.origin.y+1,
curWidth,
rect.size.height-2);
// Draw the fill
[fill drawInRect:fillRect];
}
That's all in our UIProgressView class.Now, you can use this UIProgressView by calling initWIthFrame: method from any other UIView or UIViewController and you can have any size as images are stretchable. Let's call it from some other UIView where we need UIProgressView:
UIView *v = [[UIView alloc] initWithFrame:CGRectMake(20, 281, 260, 33)];
v.backgroundColor = [UIColor darkGrayColor];//creating back view for UIprogress, Don't use it if you are going to display only UIProgressView
UIProgressView* progressTest = [[CustomProgressView alloc] initWithFrame:CGRectMake(5, 9, 250, 15)];//CGRectMake(25, 290, 250, 15)
progressTest.progress = 0.1;
[v addSubview:progressTest];
[self.view addSubview:v]; // That's all we need to do
// for demo, increasing progress using NStimer
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(startProgressing) userInfo:nil repeats:YES];
}
-(void) startProgressing {
float t = progressTest.progress;
progressTest.progress = t + 0.1;
}
2 IMAGES:
@interface CustomProgressView : NSObject --> @interface CustomProgressView : UIProgressView
your .h file : // CustomProgressView.h
#import <UIKit/UIKit.h>
@interface CustomProgressView : UIProgressView
@end
Now, in .m file, we will be using two images in DrawRect: method to redraw new Progress View.
your .m file :
// CustomProgressView.h
- (void)drawRect:(CGRect)rect {
// lets prepare UIImage first, with stretching to fit our requirements
UIImage *background = [[UIImage imageNamed:@"progress-bar-bg.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 4)];
UIImage *fill = [[UIImage imageNamed:@"progress-bar-fill.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 4)];
// Draw the background in the current rect with background UIImage
[background drawInRect:rect];
// Compute the max width in pixels for the fill. Max width being how
wide the fill should be at 100% progress. (maximun fill width)
NSInteger maxWidth = rect.size.width;
// here we are filling whole width of ProgressView
// Compute the width for the current progress value, 0.0 - 1.0 corresponding
to 0% and 100% respectively.
NSInteger curWidth = floor([self progress] * maxWidth);
//[self progress] gives the current progress rate of UIprogressView
// floor returns absolute integer
// Create the rectangle for our fill image accounting for the position offsets,
resizing the filling image rect to cover the background
(adjust as per your design, like from where you want to start fill,
where you want to end, how many pixel you want to left in upper side etc)
CGRect fillRect = CGRectMake(rect.origin.x,
rect.origin.y+1,
curWidth,
rect.size.height-2);
// Draw the fill
[fill drawInRect:fillRect];
}
That's all in our UIProgressView class.Now, you can use this UIProgressView by calling initWIthFrame: method from any other UIView or UIViewController and you can have any size as images are stretchable. Let's call it from some other UIView where we need UIProgressView:
UIView *v = [[UIView alloc] initWithFrame:CGRectMake(20, 281, 260, 33)];
v.backgroundColor = [UIColor darkGrayColor];//creating back view for UIprogress, Don't use it if you are going to display only UIProgressView
UIProgressView* progressTest = [[CustomProgressView alloc] initWithFrame:CGRectMake(5, 9, 250, 15)];//CGRectMake(25, 290, 250, 15)
progressTest.progress = 0.1;
[v addSubview:progressTest];
[self.view addSubview:v]; // That's all we need to do
// for demo, increasing progress using NStimer
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(startProgressing) userInfo:nil repeats:YES];
}
-(void) startProgressing {
float t = progressTest.progress;
progressTest.progress = t + 0.1;
}
2 IMAGES:


No comments:
Post a Comment