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).