profile ImageView from several images

Question

I need to implement profile imageView for chat with some amount of members.

It should look like similar this:

So In depending on amount of members, imageview should be splitted on appropriate parts, which should be consist of appropriate photos of each chat members.

upd: I found some solution (see bellow) and it works, but some images are stretched, because their real ratio is 1:1. How to stretch UIImage (with 1:1 ration) proportionally to fit rectangle size?

class ProfileImageHelper {

    class func collageImage (rect:CGRect, images:[UIImage]) -> UIImage {

        let maxImagesPerRow = 2
        let maxSide = rect.width / CGFloat(maxImagesPerRow)

        var index = 0
        var currentRow = 1
        var xtransform:CGFloat = 0.0
        let transformOffset:CGFloat = 1.5

        var ytransform:CGFloat = 0.0
        var smallRect:CGRect = CGRect.zero

        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)//UIScreen.main.scale)

        for img in images {

            index += 1

            let x = index % maxImagesPerRow //row should change when modulus is 0

            //row changes when modulus of counter returns zero @ maxImagesPerRow
            if x == 0 {
                //last column of current row
                //xtransform += CGFloat(maxSide)
                smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (rect.size.height / CGFloat(currentRow)) - transformOffset)

                //reset for new row
                currentRow += 1
                xtransform = 0.0
                ytransform = (maxSide * CGFloat(currentRow - 1)) + transformOffset

            } else {
                //not a new row
                if xtransform == 0 {
                    //this is first column
                    //draw rect at 0,ytransform
                    smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (rect.size.height / CGFloat(currentRow)) - transformOffset)
                    xtransform += CGFloat(maxSide) + transformOffset
                } else {
                    //not the first column so translate x, ytransform to be reset for new rows only
                    smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (rect.size.height / CGFloat(currentRow)) - transformOffset)
                    xtransform += CGFloat(maxSide) + transformOffset
                }
            }

            //draw in rect
            img.draw(in: smallRect)

        }

        let outputImage = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        return outputImage!
    }
}

Any suggestions?

Answer 1

I solved my question, using this:

class ProfileImageHelper {

    class func collageImage (size:CGSize, images:[UIImage]) -> UIImage {

        let maxImagesPerRow = 2
        let maxSide = size.width / CGFloat(maxImagesPerRow)

        var index = 0
        var currentRow = 1
        var xtransform:CGFloat = 0.0
        let transformOffset:CGFloat = 0.5
        var ytransform:CGFloat = 0.0
        var smallRect:CGRect = CGRect.zero

        UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)

        for img in images {

            index += 1

            if index == 5 { break }

            let x = index % maxImagesPerRow //row should change when modulus is 0

            //row changes when modulus of counter returns zero @ maxImagesPerRow
            if x == 0 {
                //last column of current row
                //get small image for two rows column
                if Int(images.count / 2) > 1 {
                    smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (size.height / 2) - transformOffset)
                    img.draw(in: smallRect)
                //fit image to vertical column
                } else {
                    smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: size.height)
                    if let newImage = img.cropImageByMiddle() {
                        newImage.draw(in: smallRect)
                    }
                }

                //reset for new row
                currentRow += 1
                xtransform = 0.0
                ytransform = (maxSide * CGFloat(currentRow - 1)) + transformOffset

            } else {
                //not a new row
                if xtransform == 0 {
                    //this is first column
                    //draw rect at 0,ytransform
                    if images.count == 2 {
                        smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: size.height)
                        if let newImage = img.cropImageByMiddle() {
                            newImage.draw(in: smallRect)
                        }
                    } else {
                        smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (size.height / 2) - transformOffset)
                        img.draw(in: smallRect)
                    }
                    xtransform += CGFloat(maxSide) + transformOffset
                }
            }
        }

        let outputImage = UIGraphicsGetImageFromCurrentImageContext();


        UIGraphicsEndImageContext();

        return outputImage!
    }
}

I crop image, getting middle part to fit it to vertical column. For that I wrote extension for UIImage:

extension UIImage {
    func cropImageByMiddle() -> UIImage? {
        let cropRect = CGRect(x: self.size.width / 4, y: 0, width: self.size.width / 2, height: self.size.height)
        if let cgImg = self.cgImage {
            if let new = cgImg.cropping(to: cropRect) {
                return UIImage(cgImage: new)
            }
        }
        return nil
    }
}

Answer 2

The code below should allow you to paste an image on top of another. You can use the x/y positions to shift the image accordingly. You can then crop the final image to a circle.

UIImage *backrgoundImage = [[UIImage alloc] init];
backrgoundImage = image1;

UIImage *foregroundImage = [[UIImage alloc] init];
foregroundImage = image2;

UIGraphicsBeginImageContextWithOptions(backrgoundImage.size, FALSE, 0.0);
[backrgoundImage drawInRect:CGRectMake( 0, 0, backrgoundImage.size.width, backrgoundImage.size.height)];
[foregroundImage drawInRect:CGRectMake(backrgoundImage.size.width/2, backrgoundImage.size.height/2, foregroundImage.size.width, foregroundImage.size.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
[imageView setImage:newImage];

// Crop the final image to a circle
CALayer *imageLayer = imageView.layer;
[imageLayer setCornerRadius:imageView.frame.size.width/2];
[imageLayer setBorderWidth:1];
[imageLayer setMasksToBounds:YES];
imageLayer.borderColor = (__bridge CGColorRef _Nullable)([UIColor clearColor]);

[self.view addSubview:imageView];