将 UIView 渲染为 UIImage 时出现图像尺寸错误

Question

I would like to convert two images into one image with custom design. The expected image is a snapshot of my UICollectionViewCell, not a UIImage actually. I copied the layout codes from my custom UICVCell.swift file and tried to render the view into UIImage, but the result image is what you can see below.

I searched through a lot of questions in SOF, but most of it was about 'How you can render a UIView into a UIImage.' I've tried drawing too, but had the same messed up result.

Can anybody tell me what's the problem? I would really appreciate your help, it's my first question in SOF. I might cry in a minute or two, literally...

class ViewController: UIViewController {

private var imageView: UIImageView = {
    let iv = UIImageView()
    iv.contentMode = .scaleAspectFit
    iv.clipsToBounds = true

    return iv
}()

func createBubbleImage(images: [UIImage?]) -> UIImage? {
    switch images.count {
    case 1:
        return images[0]
    case 2:
        let newView = UIView(frame: .init(x: 0, y: 0, width: 300, height: 300))
        let size = newView.frame.width

        let iv0 = UIImageView(image: images[0])
        iv0.contentMode = .scaleAspectFit
        iv0.clipsToBounds = true

        let iv1 = UIImageView(image: images[1])
        iv1.contentMode = .scaleAspectFit
        iv1.clipsToBounds = true

        newView.addSubview(iv0)
        iv0.anchor(top: newView.topAnchor, left: newView.leftAnchor, paddingTop: size * 0.04, paddingLeft: size * 0.04, width: size * 0.56, height: size * 0.56)
        newView.addSubview(iv1)
        iv1.anchor(bottom: newView.bottomAnchor, right: newView.rightAnchor, paddingBottom: size * 0.04, paddingRight: size * 0.04, width: size * 0.56, height: size * 0.56)
        
        iv0.layer.cornerRadius = size * 0.28
        iv1.layer.cornerRadius = size * 0.28
        
        let renderer = UIGraphicsImageRenderer(bounds: newView.bounds)
        return renderer.image { ctx in
            newView.layer.render(in: ctx.cgContext)
        }
        
    default:
        return UIImage(named: "logo")
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .white
    
    view.addSubview(imageView)
    imageView.center(inView: view)
    imageView.setDimensions(width: 300, height: 300)

    imageView.image = createBubbleImage(images: [UIImage(named: "0"), UIImage(named: "1")])
}

}

Expected Image Result Image

Answer 1

Do the following:

1. Remove the code lines that have the anchor method.
2. Initiate the iv0 and iv1 with UIImageView(frame: ...)
3. Add iv0.image = images[0] and iv1.image = images[1]

I also increased the radius a little bit because in my test device the images were not completely circular.

The code should look like this:

func createBubbleImage(images: [UIImage?]) -> UIImage? {
    switch images.count {
    case 1:
        return images[0]
    case 2:
        let newView = UIView(frame: .init(x: 0, y: 0, width: 300, height: 300))
        let size = newView.frame.width

        let iv0 = UIImageView(frame: .init(x: 0, y: 0, width: 200, height: 200))
        iv0.image = images[0]
        iv0.contentMode = .scaleAspectFit
        iv0.clipsToBounds = true

        let iv1 = UIImageView(frame: .init(x: 100, y: 100, width: 200, height: 200))
        iv1.image = images[1]
        iv1.contentMode = .scaleAspectFit
        iv1.clipsToBounds = true

        newView.addSubview(iv0)
        newView.addSubview(iv1)

        iv0.layer.cornerRadius = size * 0.35
        iv1.layer.cornerRadius = size * 0.35

        let renderer = UIGraphicsImageRenderer(bounds: newView.bounds)
        return renderer.image { ctx in
            newView.layer.render(in: ctx.cgContext)
        }

    default:
        return UIImage(named: "logo")
    }
}

With it, the result is the following:

I had to take a screenshot from your "expected image", that's why the images look like zoomed in. You can play with the UIImageView(frame: ...) part to adjust the two images as you want (I didn't played enough to avoid that cut in the edges, but it is possible with the right measures).

Remark: the x and y values in the UIImageView frame are the horizontal and vertical distances from the top-left corner of newView to the top-left corner of your UIImageView, respectively.