Why is my imageView not centered on UIScreen in Swift?

Question

I have the following code:

private func setupImageViews() {
    
    let width = UIScreen.main.bounds.width * 0.5
    let x = (UIScreen.main.bounds.width * 0.5) - width/2
    let y = UIScreen.main.bounds.width * 0.191
    
    focusImageView = UIImageView(frame: CGRect(x: x, y: y, width: width, height: width))
    focusImageView.image = UIImage(named: "scan_qr_focus")
    addSubview(focusImageView)

    qrCodeImageView = UIImageView()
    qrCodeImageView.contentMode = .scaleAspectFill
    addSubview(qrCodeImageView)
}

I want to display a viewfinder for the camera in the centerX of the screen. I don't know why, but on my physical iPhone 13 mini it works perfect, but on my physical iPad Air the viewfinder is out of center, like showing in the images below.

Does someone know why this is happening?

Is there any solution for this?

Thanks!

all perfect on physical iPhone

not good on physical iPad

Answer 1

I think constraints would be a good way of solving this issue rather than laying out views via their frame.

Something like this should be a great start, if not the whole solution. As we only have part of your code, a few assumptions have been made in this answer. Feel free to tweak the constraints as needed.

let focusImageView = UIImageView(named: "scan_qr_focus")

private func setupImageViews() {
    focusImageView.translatesAutoresizingMaskIntoConstraints = false
    addSubview(focusImageView)

    qrCodeImageView = UIImageView()
    qrCodeImageView.contentMode = .scaleAspectFill
    addSubview(qrCodeImageView)
}

private func setConstraints() {
    let yourYOffset = 100

    NSLayoutConstraints.activate([
        focusImageView.topAnchor.constraint(equalTo: topAnchor, constant: yourYOffset),
        focusImageView.centerXAnchor.constraint(equalTo: centerXAnchor),
        focusImageView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
        focusImageView.heightAnchor.constraint(equalTo: widthAnchor)
    ])
}