I was developing an app for a client and based on tutorial from Microsoft Doc, which I have followed, it works, except on iPhone 8. But it works on iPhone 8 Plus. I mean the logo centered properly. But if I tried to re-center on iPhone 8, iPhone 8 Plus did not get center properly again.
Then it got me thinking, how about iPhone 11 and iPhone 12. Well, they don’t centered good too. After googled for a while, I noticed after adding the image, I need to add constraints. So here is what I do to make the image centered.
- Put in your image view in the Splashscreen.storyboard. Make sure you centered your image using the guidelines shown.
- You can change the image to the logo you want at the Properties Window -> Image View -> Image.
- Switch to Constraint Editing Mode.
- When you are on Constraint Editing Mode, your picture will have little T-shaped tool icon.
- Make sure you have your Document Outline Window shown. So you can see what constraint you added. If conflicted, this will not work.
- Start making constraint for top, right, bottom and left by dragging the T-shaped tool icon to their respective end.
- Once you set up your constraints properly, you should see the image like this.
- Let check if other iPhone model splash screen logos are now loaded properly.
Things you should take notes when using constrainst to center the logo:
- Try to use transparent background.
- Try to use logo image file that is square.
- You can add other elements like text too.
- Set the image Content Mode to Aspect Fit if you want show the logo fully at any resolutions of iPhone.
Well, that’s it. Thank you for reading and stay safe.