Autoresize image while preserving centre

Question

I have a UIImageView in my Nib file that stretches the width of the screen. What I'd like to do is have the middle third of the image remain the same height and width when autoresizing is done (with device rotation) and have only the 1st and 3rd thirds of the image stretched.

Any ideas how to do this?

score 0 · Answer 1 · edited May 23 '17 at 11:49

There is no straight-forward way to do this as far as I know. Here is one way to do it:

Instead of one ImageView, create 3 UIImageView with equal width and height(1/3rd of original image). Upper and lower ImageView will stick to the top and bottom edge respectively, middle ImageView will have flexible bottom and top margin. You need to set the contentMode property of middle ImageView to UIViewContentModeScaleAspectFit(or UIViewContentModeCenter based on how you want to handle rotation) and the other ones to UIViewContentModeScaleToFill. You can set all these property from IB.

Now you need to to set the image source of each one from code. In the viewDidLoad method slice the UIImage into 3 parts using the solutions from this post or using the following code snippet:

-(NSMutableArray *)getImagesFromImage:(UIImage *)image withRow:(NSInteger)rows withColumn:(NSInteger)columns
{
    NSMutableArray *images = [NSMutableArray array];
    CGSize imageSize = image.size;
    CGFloat xPos = 0.0, yPos = 0.0;
    CGFloat width = imageSize.width/rows;
    CGFloat height = imageSize.height/columns;
    for (int y = 0; y < columns; y++) {
        xPos = 0.0;
        for (int x = 0; x < rows; x++) {

            CGRect rect = CGRectMake(xPos, yPos, width, height);
            CGImageRef cImage = CGImageCreateWithImageInRect([image CGImage],  rect);

            UIImage *dImage = [[UIImage alloc] initWithCGImage:cImage];
            [images addObject:dImage];
            xPos += width;
        }
        yPos += height;
    }
    return images;
}

You may need to tweak a few things, but hopefully you get the idea.

If you have the option, you can pre-split the image into 3 parts using photoshop/gimp and place them into the bundle. In that case you don't need to do image splitting in the code and everything can be done from IB.

Hope this helps :)

Autoresize image while preserving centre

1 Answers1