How to add a How to add a UI component to a view in a storyboard in XCode in XCode

Oscar de la Hera Gomez
A flower that represents Xcode with the text "Add UI Components to a Storyboard" beneath it.

Select a storyboard, open the library, search for the UI element and drag and drop it into a view within a UIViewController.

Step One: Select a Storyboard

A screenshot of Xcode with the launch screen storyboard file selected. We have highlighted the location of the main storyboard and launch screen storyboard on the left menu side bar.

In the XCode project, select a Storyboard (i.e. Main.storyboard or LaunchScreen.storyboard).

Step Two: Open the Library

A screenshot of Xcode showing the launch screen storyboard. We have highlighted the + that appears on the right of the top menu bar.  Click this + button to open the library.

Click the + on the top right.

A screenshot of Xcode showing the storyboard library. We have highlighted that the library has been set to how the objects. This is the default option if it is the first time that you are using the library.

The library should look similar to the image above. Make sure that the "Objects library" is selected.

Step Three: Drag and Drop the UI component

A screenshot of Xcode showing a storyboard with the library open. We have highlighted how we are searching the objects library for "image" and how it appears within the results. If you click and drag and element you can drag it into a view within the storyboard - this is the equivalent of adding a UI component to a view.

You can search for specific UI objects using the search bar.

With the objects library selected, search for the relevant UI component.

Once you have found it, click the UI component (i.e. image view) and drag and drop it into a view.

A screenshot of Xcode showing a launch screen storyboard file with an empty image view. This demonstrates that we successfully added an image view to the launch screen.

The example above shows how we dragged and dropped a UIImageView into the splash screen.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details