56

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?

shim
  • 9,289
  • 12
  • 69
  • 108
Jhonsore
  • 1,757
  • 1
  • 13
  • 19
  • 1
    What's the hard part? – matt Jun 21 '16 at 18:21
  • 1º - Image is not displaying! – Jhonsore Jun 21 '16 at 18:23
  • 1
    Then you're doing something wrong. But you haven't said what you are doing, so who knows what it is? – matt Jun 21 '16 at 18:29
  • I use an image view in my Storyboard (drag 'n drop it). Selected an image, but for some reason it doesn't appear when i run my app in my phone. – Jhonsore Jun 21 '16 at 18:34
  • 1
    Well, there are two main possibilities: (1) The image is off the screen because you didn't center it with auto layout constraints. Or (2) your app doesn't use your launch storyboard. First thing to do is color your background view, e.g. red. Now launch the app. Do you see a red screen momentarily? If so, you're using the launch storyboard. If not, not. – matt Jun 21 '16 at 18:44
  • "In this launch screen I need to insert a brand image in center of the screen" By the way, this is wrong behavior. The launch image is not a splash screen. – matt Jun 21 '16 at 18:46
  • 1
    Wrong according to Apple. But plenty of apps do it. – shim Jun 21 '16 at 20:25

4 Answers4

118

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

E_net4
  • 27,810
  • 13
  • 101
  • 139
Nicolai Lissau
  • 7,298
  • 5
  • 43
  • 57
  • To add the image to the UIImageView, I had to first add the image file into the project, then specify the image file in the Image View's `Inspector pane > Attribute Inspector > Image View > Image`. – kakyo Aug 01 '19 at 13:47
  • You made this look ridiculously easy, thanks man, I really needed step 12 badly :) – AbdelHady Sep 08 '19 at 15:40
  • And they say that Xcode is user friendly? I am using a single image, BTW, your explanation for autoresizing was what I needed. – Yossi Nov 22 '20 at 11:05
  • BTW, is it possible to set width and size that are dependent on the device's screen size? – Yossi Nov 24 '20 at 10:06
  • 1
    I thinks it's possible using autosizing in combination with view constraints, but I don't have the time to update the answer right now, sorry. – Nicolai Lissau Nov 24 '20 at 10:22
  • Definitely works but important to note is to start from scratch. Editing something I moved over from Xamarin and deleting the elements failed to work for some reason I dont understand. – Frank Mar 29 '21 at 12:56
  • Step 10 is the key. Xcode will show you an animation that shows what the image will look like with the set constraints across different sized devices – lyndon hughey Oct 06 '21 at 13:56
  • My image is not loading on launch (not in Simulator, not on real iPhone) – Viktor Sec Apr 07 '22 at 21:59
  • Did you do step 1? – Nicolai Lissau Apr 08 '22 at 17:51
50

I got it!

Here is a link with the steps images:

1 - Set launch file in tab > General

2 - Select LaunchScreen.storyboard in Project navigator, check the option "Use as Launch Screen" in file Inspector

3 - Drag and drop an ImageView inside the Views Controller Scene

4 - Select the ImageView added before, change its width and height. I put w x h 200

First, check the box and after change the size value

Click "Add 2 constraints" button

5 - With ImageView selected, change position to centralize it.

First, check the box and after change the size value

Click "Add 2 constraints" button

6 - It is almost done!!!

Now let's resolve Auto Layout Issues, click the button "Resolve Auto Layout Issues" and update frames

7 - It's time to pick out our image

With ImageView selected go to > Atributes Inspector tab and choose the image u want, remenber to remove its extension (it is the trick, because the image may note appear when building the app on real device, happened with me!!!).

8 - So, CMD+R to build and run your app. Voilá!!!!!

Jhonsore
  • 1,757
  • 1
  • 13
  • 19
  • Hey man! I've been stuck on this for days... I've been doing the EXACT same process that you show here (Thanks for posting the photos btw :) but all that it ever shows is a black screen and my image doesn't show on launch... Have you ever come across that? Could there be something else missing? – Justin Jun 07 '18 at 02:04
  • 1
    @Justin The storyboard might not be set as the one to use for the launchscreen. Go to your project settings, click on the target you want, and under App Icons and Launch Images select the LaunchScreen storyboard. – Bassel Jun 22 '18 at 01:57
  • @Bassel Thanks for the comment, but I eventually discovered that it was likely the fact that my launch screen didn't have an 'entry point' by checking the box saying 'initial view controller'. I was always afraid that it would override what my initial view controller was in my `Main.storyboard` lol... But apparently each IB file needs to have an initial view controller :P – Justin Jun 23 '18 at 03:21
  • Where is the "Resolve Auto Layout Issues" button? I don't see that. – AndrewHenderson Jan 25 '19 at 21:17
  • 1
    Unfortunately, when I create a storyboard and open it there's nothing to do in it. I can't drag any image view anywhere. There's absolutely no UI hints as to what to do next or anything. Extremely poor and esoteric experience. Exactly why I'm not a native Apple developer. – The Muffin Man Dec 12 '20 at 08:04
6

I solved it with responsive settings

In Attribute Inspector -> Content Mode -> Aspect Fill

enter image description here

in Size Inspector -> Layout -> Automatice:

enter image description here

Add new constraint -> fill like the image below and click Add 5 constraints

enter image description here

Idan
  • 3,604
  • 1
  • 28
  • 33
-3

The only workaround that works for me was to add the images outside Images.xcassets folder. After I modified this and rebuilt the app, it worked as expected.

The same issue is happening on the iOS 14 or XCode 12.

从Images.xcassets中将图片移出到文件外面，可以重新构建应用即可。这个为题chu
Elletlar
  • 3,136
  • 7
  • 32
  • 38
大山里的熊孩子
  • 1