overlay image in the middle of qr code ios

Question

I'm overlaying image to the generated qr code. But when i'm trying to changing the position image to center, it doesnt move to the center, but it move to the another place.

Here's my code qr code

 let overlayImage = UIImage(named: "asdasd")
    var overlayImageView = UIImageView(image: overlayImage)


    var QRCodeImage: CIImage!

    var barcodeImage: CIImage!

    func generateQRCode(from string:String) -> UIImage? {

        let data =  string.data(using: String.Encoding.isoLatin1)

        if let filter = CIFilter(name:"CIQRCodeGenerator") {
            filter.setValue(data, forKey: "inputMessage")
            let transform = CGAffineTransform(scaleX: 100, y: 100)

            if let output = filter.outputImage?.transformed(by: transform) {


                return UIImage(ciImage: output)
            }
        }
        return nil
    }

And here's the code for displaying overlay image & qr code

     if (QRCodeImage == nil && barcodeImage == nil) {

            if let actualText = QRText.text {


                let imageQRCode = generateQRCode(from: actualText)
                let imageBarcode = generateBarcode(from: actualText)


                overlayImageView.frame = CGRect(x: 0, y: 0, width: 45, height: 45)
                overlayImageView.center = imgQRCode.center //////////
                overlayImageView.contentMode = .scaleAspectFill
                imgQRCode.addSubview(overlayImageView)




                var mainImageView = UIImageView(image:imageQRCode)
                mainImageView.addSubview(overlayImageView)


                imgQRCode.image = imageQRCode
                imgBarcode.image = imageBarcode


        }

And the result what i get for using overlayImageView.center is

location of image in the bottom of the qr code

Answer 1

Try something like this, which will center it inside the view.

The important lines of code to center the UIImageView is as follows:

overlayImageView.translatesAutoresizingMaskIntoConstraints = false
overlayImageView.contentMode = .center

qrCodeImageView.addSubview(overlayImageView)

let centerXConst = NSLayoutConstraint(item: overlayImageView, attribute: .centerX, relatedBy: .equal, toItem: qrCodeImageView, attribute: .centerX, multiplier: 1, constant: 0)
let centerYConst = NSLayoutConstraint(item: overlayImageView, attribute: .centerY, relatedBy: .equal, toItem: qrCodeImageView, attribute: .centerY, multiplier: 1, constant: 0)
NSLayoutConstraint.activate([centerXConst, centerYConst])

I use this exact code to center an icon on the QR Code:

class ViewController: UIViewController {

    @IBOutlet weak var qrCodeImageView: UIImageView!
    var qrCodeImage: CIImage!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let textField = "fooqarcode"
        let data = textField.data(using: String.Encoding.isoLatin1, allowLossyConversion: false)

        let filter = CIFilter(name: "CIQRCodeGenerator")

        filter?.setValue(data, forKey: "inputMessage")
        filter?.setValue("Q", forKey: "inputCorrectionLevel")

        qrCodeImage = (filter?.outputImage)!

        let scaleX = qrCodeImageView.frame.size.width / qrCodeImage.extent.size.width
        let scaleY = qrCodeImageView.frame.size.height / qrCodeImage.extent.size.height

        let transformedImage = qrCodeImage.transformed(by: CGAffineTransform(scaleX: scaleX, y: scaleY))
        qrCodeImageView.image = UIImage(ciImage: transformedImage)

        let overlayImageView = UIImageView(image: UIImage(named: "block.png"))
        overlayImageView.translatesAutoresizingMaskIntoConstraints = false
        overlayImageView.contentMode = .center

        qrCodeImageView.addSubview(overlayImageView)

        let centerXConst = NSLayoutConstraint(item: overlayImageView, attribute: .centerX, relatedBy: .equal, toItem: qrCodeImageView, attribute: .centerX, multiplier: 1, constant: 0)
        let centerYConst = NSLayoutConstraint(item: overlayImageView, attribute: .centerY, relatedBy: .equal, toItem: qrCodeImageView, attribute: .centerY, multiplier: 1, constant: 0)
        NSLayoutConstraint.activate([centerXConst, centerYConst])
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}