Creating our launch screen

Launch screens can use images, but that would mean that you would have to create images for every device and device orientation. Using LaunchScreen.storyboard gives us the ability to create just one asset for all devices and orientations:

  1. Select the LaunchScreen.storyboard file, and, in the Outline view, make sure that the disclosure arrows for View Controller Scene and View Controller are collapsed. Then, select View under View Controller:
  1. In the UTILITIES PANEL panel, select the Attributes inspector, and click on the white Background bar:
  1. A Colors panel will appear. Select the second tab, which is called the Color Slider:
  1. Under RGB Sliders, Hex Color #, update the value from FFFFFF to 4A4A4A. This should change your background color from white to a dark gray:
  1. You might have to select the background color a second time. If so, select the Background bar in the Attributes inspector again, which should change the Hex Color # back to FFFFFF. Then, change it again to 4A4A4A. You can now close the Color panel, and you should see the background color update in your Standard Editor panel:

Next, we need to bring the app logo onto the screen:

  1. While still in LaunchScreen.storyboard, launch the Media Library (command + Shift + M). You can also access the library if you long-press the object library, but the shortcut is much faster:

The Media Library allows us to access our image assets, and it will place them inside a UIImageView for us.

  1. In the filter, at the bottom of the Library pane, type detail-logo. Once that appears, drag and drop the logo onto LaunchScreen.storyboard:
There might be a bug in Xcode and, therefore, sometimes when you drag the logo out, the width and height will not be set, and you will need to enter the width and height manually.
  1. If your logo does not drag out to size, do this step: with the logo selected, open the SIZE INSPECTOR in the UTILITIES PANEL, and set the width and height to the following:
    • Width: 220
    • Height: 112
  1. We want our Let's Eat logo to appear in the center of the screen. For our logo to appear in the center for all devices, we need to apply auto layout. Select detail-logo, and then select the ALIGN icon, which is to the left of the PIN icon:
  1. Check the following boxes that appear:
    • Horizontally in container
    • Vertically in container
  1. Click on Add 2 Constraints.

When you are done, you will see the following:

Our launch screen is now set up for all devices. If you rerun the project, you will now see the launch screen with the LET'S EAT logo and new background color.

Let's move on to adding some detail to our Explore tab, since this is the first thing a user will see after the app launches.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.134.104.173