Center Image in View Controller During Animation

Question

I'm creating a splash screen for my app in Swift, and I've run into a problem where when I scale an image, it sizes from the top-left corner, and therefore, shifts the entire image away from the center of the screen.

I've tried to subtract an estimated difference in movement manually (as shown in the code below), but the first line of code within the closure doesn't keep the image in the center for every screen size. As of now, it only appears centered on the iPhone 6 Plus's Screen.

UIView.animateWithDuration(1.5, animations: { () -> Void in
      self.image.frame = CGRectMake((self.image.center.x)/2 - 20, (self.image.center.y)/2 + 20, 250, 250)         
})

Is there a line of code that allows for the image to remain centered on all screen sizes even after it is scaled?

Thanks in advance to all who reply.

Answer 1

Instead of changing the frame, change the bounds. This lets you change the size while leaving the center invariant. Keep the origin of the bounds at 0,0 and change only the bounds size width and height to whatever you want.

Answer 2

You can either use

self.image.center = self.view.center

or you can set UIImageView's ContentMode property as center in your InterfaceBuilder. Also make sure that your splashImage.png meets the appropriate size and size of imageView same as the size of SuperView.

Answer 3

First, the easiest way how to keep some UIImageView centered is to either bound it using autolayout to all sides of the superview and set contentMode to "Center" as Sudhin Davis advices, or to set "Align Horizontal Center in Container" and "Align Vertical Center in Container" of it to 0 (leaving height and width not-set or removed at build time).

But if you want to create a splash screen ViewController which will be 'prolonging' your 'native splash screen' image presentation while you do some work, then you could use something like:

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view, typically from a nib.
    imageView?.image = UIImage(named: splashScreenImageName())
}

Where imageView is a simple UIImageView outlet bound to all sides of it's superview and splashScreenImageName() is a func that provides Splash screen image name using one of adviced approaches from answers to this question.

I usually use something like this:

func splashScreenImageName() -> String {
    // Construct the name.
    var splashScreenImageName = "LaunchImage";
    if (UIDevice.isIPhone6Plus) {
        splashScreenImageName += "-800-Portrait-736h";
    }
    else if (UIDevice.isIPhone6) {
        splashScreenImageName += "-800-667h";
    }
    else if(UIDevice.isIPhone5) {
        splashScreenImageName += "-700-568h";
    }
    else if (UIDevice.isIPad) {
        splashScreenImageName += "-700-Landscape";
    }
    else {
        splashScreenImageName += "-700";
    }

    return splashScreenImageName;
}

Pros:

• use are reusing your splash screen image. Meaning that you don't need to add another 3 .jpgs for iPhone and 2 for iPad (for each orientation) into bundle and keep them in sync with 'native splash screen'.
• therefore you are lowering bundled app size.
• the image received this way will 100% match with the one that was displayed during 'native splash screen' presentation. So not 'jumping' should appear.

Answer 4

If you want to animate the scale, why dont you use CGAffineTransform?

image.transform = CGAffineTransformMakeScale(0.01, 0.01)
UIView.animateWithDuration(1.0, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
        self.image.transform = CGAffineTransformIdentity
    }) { (finished) -> Void in

    }