masking a background colour over the transparent region of a UIImage in objective C

Question

Im a little bit lost on how to go about this, im really looking for the theory behind it im not 100% sure if the title is correct or not.

Im currently working on a iOS app and im a little stuck with the progress indicator thats been designed ive attached a image of it below

as you can see when the user progresses through the stages of the challenge the background of this image fills up with white so if they are in stage 1 of a 5 stage challenge its filled 20% stage 2 40% etc.

the issue I have is im not 100% sure how to go about this, if I was doing this in HTML i would create the image with the green background and leave the area for the rabbit and shape transparent and then create a div behind it that would change its height.

should I be applying the same principle to iOS development or should I be building it in a more programatic and efficient way.

thanks all for your help

Answer 1

The solution you are talking about sounds fine. Many programmatic solutions would involve masking and would probably be less performant (masking is actually quite expensive), other programatic solutions involve stroking different vector paths but that would get complicated if you want to cut them all of a the same line.

So, translating your idea into views. Create a container UIView with a light green background, and add to it a white UIView and an UIImageView (in that order to get the image on top). The image view would have the green image with transparency set as its image. The white view would start of being positioned below the light green view (have a frame with a higher y value) and as the stages progress you simply shift the white view upward by modifying it's center or frame properties. (note that y increases downwards).

Answer 2

This may be a childish way

1. Make an UIImageView and add that in your view where you place your rabbit view.

2. Make the width and x axis value as same of your rabbit view and change the height and y-axis value as the stages completes.

3. Add the rabbit view above your imageview.

In this way you can have not only color of your progress you can even assign a image in future to show the progress of the different changes.

-(void)completedStage:(int)stage
 {

CGRect frame=rabbitimage.frame;
bgimageview.frame= CGRectMake(rect.orgin.x,rect.frame.orgin.y+rect.frame.size.height-stage*0.2,rect.frame.size.width,rect.frame.size.height-0*2)
 }

Hope this helps !!!