Launch Screen Storyboard with centered image iOS

Jhonsore picture Jhonsore · Jun 21, 2016 · Viewed 60.2k times · Source

1 - I want to use a LaunchScreen.storyboard in my app

2 - In this launch screen I need to insert a brand image in center of the screen

Could anyone help me?

Answer

Attaque picture Attaque · Jul 25, 2019

The answer by @Jhonsore did not work for me, unfortunately.

Here's what I did to get it working:

!Note This also works for .xib files, which comes with React Native init

Adding the image file

1) Under image.xcassets, right click and choose New Image Set. Create three different sizes of your image (@1x, @2x, @3x) and add the images by dragging them into the slots for 1x, 2x, 3x. For 3x I suggest a size of more than 1200 px.

New image set

2) Name the new image set something, for intance: splash

Creating the launch screen

1) Right-click your project, click New File..., and add a Launch Screen.

2) Select your project and under General->App icons and launch images->Launch Screen File select your newly created Launch Screen

Launch screen file

3) Open the launch screen

4) Select View Controller Scene->View Controller

Launch Screen.storyboard

5) In the right panel choose Simulated Metrics->Size and change it to Page Sheet

Choose Page Sheet

6) In the left panel delete the two text inputs (copyright and project name)

7) Add an Image View by clicking the button shown in the screenshot below and dragging it to the center of the view

Add Image View

8) In the right panel with Image View selected choose View->Content Mode->Aspect Fit. Also add your image by choosing **Image View->Image

enter image description here

10) Go to Size Inspector (ruler icon, see screenshot) and choose a width and a height that looks good (this will scale to other screen sizes).

enter image description here

11) Drag your image into the center of the screen until you see both a horizontal and vertical blue line

12) Lastly, under Autoresizing change the window with the arrows, so it looks like in the screenshot above. All outer arrows should be deselected and all inner arrows selected.

Result

iphone xs max enter image description here

Troubleshooting: If your images are not showing on the simulator, try restarting it or try select another device.

Bus image Credits: Eliott Van Buggenhout