Combining Multiple UI Images and UI Labels into 1 Image

Question

Basically I have a main UIImage, which acts as a background/border. Within that UIImage I have 2 more UIImages, vertically split with a gap around them so you can still see a border of the main background UIImage. On each side I have a UILabel, to describe the images. Below is a picture of what I mean to help put into context.

What I want to achieve is to make this into 1 image, but keeping all of the current positions, layouts, image layouts (Aspect Fill) and label sizes and label background colours the same. I also want this image to be the same quality so it still looks good.

I have looked at many other stackoverflow questions and have so far come up with the follow, but it has the following problems:

• Doesn't position the image labels to their correct places and sizes
• Doesn't have the background colour for the labels or main image
• Doesn't have the images as Aspect Fill (like the UIImageViews) so the outside of each picture is shown as well and isn't cropped properly, like in the above example.

Below is my code so far, can anyone help me achieve it like the image above please? I am fairly new to iOS development and am struggling a bit:

-(UIImage *)renderImagesForSharing{

    CGSize newImageSize = CGSizeMake(640, 640);
    NSLog(@"CGSize %@",NSStringFromCGSize(newImageSize));

    UIGraphicsBeginImageContextWithOptions(newImageSize, NO, 0.0);

    [self.mainImage.layer renderInContext:UIGraphicsGetCurrentContext()];
    [self.beforeImageSide.image drawInRect:CGRectMake(0,0,(newImageSize.width/2),newImageSize.height)];
    [self.afterImageSize.image drawInRect:CGRectMake(320,0,(newImageSize.width/2),newImageSize.height) blendMode:kCGBlendModeNormal alpha:1.0];

    [self.beforeLabel drawTextInRect:CGRectMake(60.0f, 0.0f, 200.0f, 50.0f)];
    [self.afterLabel drawTextInRect:CGRectMake(0.0f, 0.0f, 100.0f, 50.0f)];


    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    NSData *imgData =  UIImageJPEGRepresentation(image, 0.9);
    UIImage * imagePNG = [UIImage imageWithData:imgData]; //wrap UIImage around PNG representation

    UIGraphicsEndImageContext();
    return imagePNG;
}

Thank you in advance for any help guys!

Answer 1

I don't understand why you want use drawInRect: to accomplish this task. Since you have the images and everything with you, you can easily create a view as you have shown in the image. Then take a screenshot of it like this:

UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, self.view.opaque, 0.0);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage*theImage=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

NSData*theImageData=UIImageJPEGRepresentation(theImage, 1.0 ); //you can use PNG too
[theImageData writeToFile:@"example.jpeg" atomically:YES];

Change the self.view to the view just created