Introduction to Interface Builder

Introduction to Interface Builder

June 11, 2015

Project: Learn how to build your very first iOS App

You now have a blank app that runs. There's no point in waiting any longer, so let's jump right in and get acquainted with Interface Builder! The Interface Builder editor within Xcode makes it simple to design a full user interface without writing any code.

If you have never used Interface Builder before, you can watch this screencast that will show you how to edit Storyboard files with Interface Builder:


In iOS, you use view controllers and views to present your application's content on the screen. View controllers do not have any visible content themselves but provide a basic container for your application's views. Views define a portion of a window that you want to fill with some content. For example, you might have views that display images, text, shapes, or some combination thereof. You can also use views to organize and manage other views.

Now let's look at a view.

Click on the LaunchScreen.xib from the Project Navigator


This will open our LaunchScreen XIB (XML Interface Builder) in the Interface Builder editor.


As show in the above image, click on the SimpleApp Label item, located under the View hierarchy. This will highlight the 'SimpleApp' label as shown.

You will notice on the right hand side the blue pencil looking icon has been selected. This is the Attributes Inspector panel and gives you great control over the currently selected resources attributes.

Views are one of three interconnected parts that comprise the Model-View-Controller (MVC) design pattern (we will be discussing this in more detail). Before we move onto the next section to explore the ViewController, let's have some fun with the loading screen view.


Design the loading screen of your dreams or create the most ridiculous one you can!

Have a look at the object library at the bottom of the right panel (be sure to click on the 3rd icon, the circle with the square inside). Drag and drop a few objects into the view and also check out their respective attributes. Then hit the play button in the upper left again to see your new loading view in the simulator.

If the placement of things looks different in the simulator, don't worry! Later, we'll take a closer look at how to properly constrain the position and sizing of items in Interface Builder.


Here is one I made earlier:



If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository.

Join Make School Icon

Join Make School

Prepare for your career as a founder or software developer

Apply now
Talk to Us Icon

Talk to Us

If you have any questions, please send us an email.

Email Us