Creating a custom progress bar with images

Question

Pretty much what I am trying to do, is create the following image: enter image description here

So this is a progress bar, which will show how many votes the client get in that option. How can I do that? I was wondering if I can use a mask (as I would in flex), but all the masking implementations that I found on the web are doing masks for UIImages, and not for UIImageView. I cannot do the mask in the UIImage, because the two images have the same dimensions. I have to use the X and Y of the images to crop them?! So, any suggestions?

Here are the two images that I have to create that progress bar:

enter image description here

Cheers.

Grady Player · Accepted Answer · 2011-05-13T01:13:00.493

11

you want to get rid of all of the same bit in the middle of each image. then do something like:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self addProgressBarInFrame:CGRectMake(20.f, 20.f, 280.f, 50.f) withProgress:.9f];
    [self addProgressBarInFrame:CGRectMake(20.f, 100.f, 200.f, 25.f) withProgress:.1f];
}

-(void)addProgressBarInFrame:(CGRect)frame withProgress:(CGFloat)progress
{
    float widthOfJaggedBit = 4.0f;
    UIImage * imageA= [[UIImage imageNamed:@"imageA"] stretchableImageWithLeftCapWidth:widthOfJaggedBit topCapHeight:0.0f];
    UIImage * imageB= [[UIImage imageNamed:@"imageB"] stretchableImageWithLeftCapWidth:widthOfJaggedBit topCapHeight:0.0f];
    UIView * progressBar = [[UIView alloc] initWithFrame:frame];
    progressBar.backgroundColor = [UIColor whiteColor];
    UIImageView * imageViewA = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, frame.size.width*progress, frame.size.height)];
    UIImageView * imageViewB = [[UIImageView alloc] initWithFrame:CGRectMake(frame.size.width*progress, 0.f, frame.size.width - (frame.size.width*progress), frame.size.height)];
    imageViewA.image = imageA;
    imageViewB.image = imageB;
   // imageViewA.contentStretch = CGRectMake(widthOfJaggedBit, 0, imageA.size.width - 2*widthOfJaggedBit, imageA.size.height) ;
   // imageViewB.contentStretch = CGRectMake(widthOfJaggedBit, 0, imageB.size.width - 2*widthOfJaggedBit, imageB.size.height) ;
    [self.view addSubview:progressBar];
    [progressBar addSubview:imageViewA];
    [progressBar addSubview:imageViewB];
}

imageA imageB

edited May 13 '11 at 01:13

answered May 12 '11 at 21:53

Grady Player

14,399
2
48
76

note that the stretchable image, stretches the middle and leaves end-caps alone, just tacks them on the end. – Grady Player May 12 '11 at 21:54
1

OK so taht LeftCapWidth is the size of my edge? because I am doing this: UIImage * imageA= [[UIImage imageNamed:@"02_voting_status.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:0.0f]; ans it seems to be the same without! – Arthur Neves May 12 '11 at 22:23
My problem is... i have both Images in the FINAL size.. so I dont want to stretch one, I wanna do the opposite:shrink! – Arthur Neves May 12 '11 at 22:27
1

try with 20.f, sometimes ints are treated like 0.0f – Grady Player May 12 '11 at 23:06
yeah just ran a test, you have to get rid of the middle bit. otherwise it just scales the whole thing down, editing code now. – Grady Player May 13 '11 at 01:10
@GradyPlayer Thanks a lot, +1, for saving time and for providing the good solution. This works great. – iLearner Jun 16 '12 at 06:48
@GradyPlayer I a having one small query, here i am using two images and both images are rounded at corners, but whenever I am going above **0.7f** the CURVE of TRACK (ie. background of progress view) becomes **RECTANGULAR** in shape, I am not getting why this is so. Can you please suggest any way to resolve this. – iLearner Jun 16 '12 at 10:22
Bhurudada... Not sure off the top of my head... My only guess would be your second image is wider than 30% and is getting scaled normally. – Grady Player Jun 16 '12 at 14:02

score 0 · Answer 2 · edited Dec 17 '11 at 17:57

Grady Player's answer is great. Just a small note, for anyone that uses this. I tried to update the frames of the two UIImageView's to update the "progress". I tried to force an update with "setNeedsDisplay", but to no avail. (sizeToFit caused problems too).

Anyway, the only way I figured out how to update the progress of an existing progress bar was to call "setFrame:CGRectMake" with my new dimensions.

Creating a custom progress bar with images

2 Answers2

Linked

Related