Change UIImageView or UIImage width

Question

I have 2 images (280x20 px) with a solid color (green and orange) and I'm placing the orange behind the green one. What I want is to resize or stretch (downwards) in width the green one. I don't care about losing quality, the images are made of a solid color.

Why? They will represent data, if i have 50%-50% distribution i want the green one to be 140x20. That way we can understand with the visual help of the images (something like a bar graph) that both images have the same size. If the data is 75%-25% i want the green one to be (280*0.75) in width showing this time a 3:1 proportion. Notice I won't be resizing the orange image, she will rest behind the green one and the user will one see what the green one doesn't cover.

I have no problem making any calculations regarding proportion of the data. My problem is handling the image scale/stretch/etc. I've tried the following:

//imageView is the imageView representing the "green image bar"
UIImageView* imageView = (UIImageView*) [cell viewWithTag:202];
double scale = 0.75;
CGRect frame = imageView.frame;
imageView.frame = CGRectMake(frame.origin.x, frame.origin.y, 280*scale, frame.size.height);

I used to have some progress by actually resizing the UIImageView, but the position was the same. Causing the image (now with a smaller width) to appear as it had "moved" to the right, I want that image to stay with that left alignment as it originally had but with a smaller width.

In the storyboard this is located inside a prototype cell, that is why I got the UIImageView by tag. Also tried almost every Mode (View->Mode in the attribute tab on the storyboard), currently have "Scale to Fill", not working at this moment.

Should I resize the UIImage inside the UIImageView? Should I resize the entire UIImageView? Hopefully somebody can help me with good practices on this, thanks! :D

PS: Would've posted some screenshots, not enough reputation though :(

Answer 1

If you're just using solid colours, then simply use a UIView and set the backgroundColor property. Using an image for this purpose is unnecessarily complicating things, besides, a UIImageView is a subclass of a UIView, so the only added functionality is going to pertain to things you don't need.

So now that we've settled on using UIViews instead of images, you don't have to worry about the UIViewContentMode anymore (or the Scale to fill nonsense). Simply change the size and origin properties of your views accordingly.

An example of using Views instead of Images for this purpose: (I can't guarantee syntax as I'm not writing this from my Mac)

UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(0,0,280,20)];
UIView *orangeView = [[UIView alloc] initWithFrame:CGRectMake(0,0,280,20)];

greenView.backgroundColor = [UIColor greenColor];
orangeView.backgroundColor = [UIColor orangeColor];

CGRect newGreenFrame = greenView.frame;
newGreenFrame.size.width = newGreenFrame.size.width * 0.75;

greenView.frame = newGreenFrame;

This is a good way of initializing and changing the frames of UIViews. There are other, shorter ways of doing it but this allows for easier-to-read code.