Lesson 2 - Building the UI and introduction to basic components
In the previous lesson, Developing iOS apps in Swift, we introduced the technologies and the development environment.
Today, we're finally going to start making an application and look at how to create a user interface (abbr. UI) for iOS apps.
Creating a new project
Let's open Xcode and start developing together by following this tutorial. We'll start by creating a new project. In the first dialog, we'll choose the second option, Create a new Xcode project. Then we'll choose Single View App in the second screen:
To confirm, we just enter the name (I named the project
ICTsocial) and make sure that Swift is checked as the programming
The last step is selecting where to save the project on disk. We should end having an iOS app project opened in our Xcode.
Storyboard as the UI base
In today's lesson, only one project file will be important for us,
Main.storyboard that is. Storyboard represents a user interface in
the iOS app world. Basically, it's where you'll build your UI from many
different components and deal with the navigation between individual screens of
The UI app we've just created consists of one controller of the View Controller type. You'll see this very screen if you run the app using the play button. The arrow on the left indicates that this is the "access" point of our app. If we had more controllers, it'd be possible to move the arrow and change the initial screen of the app that way.
Our first UI component
Now it's finally time for a practical example. Drag the
component from the component library in the bottom right part I highlighted red
in the previous lesson and drop it anywhere in the empty space of the
controller. Xcode will help us align it, but let's not bother with that now.
You've just successfully started "building" your UI; your
will be shown after running the app.
If you select it, you can edit the properties using inspectors we introduced
in the last lesson, you can find them in the right part of Xcode. In case of
Label, the most important is Attributes Inspector. Right here, we
can set the text, color, font size and lots of different properties. Feel free
to try them out.
Labels to display static text, the text you set when
developing the application. Of course, we can change the text from the code too,
we're going to show how further in this lesson.
Try holding Shift to select multiple components and change their properties at the same time. Eventually, you could copy the existing ones and avoid setting of certain properties.
Basic UI components
Let's do a little showcase of the basic components, so you know what controls you can use in your apps.
In practice, components have two names. One is displayed in the
designer and we use the second in the code. For example, a button is called
Button in the library, but
UIButton in the code. However, it still
refers to the same component. Similarly, we can find e.g. Table View in the code
A classic button. We can set a lot of properties and define what happens if
clicked. However, in iOS, this component isn't used that often like on desktop
and a lot of things is dealt with differently. For example, app settings is
often implemented as
TableView which is how iOS itself does it as
well. We'll have a look at that in further lessons of the course.
Another basic control. If we ever need a text input from the user or allow editing some text (email, or anything else), we use this component for these situations.
Displays more text or lets the user to write more text. Text View provides us with countless features such as detecting the data format, lots of settings, and so on. It's definitely worth of looking at.
Switch is a sort of checkbox of the Apple world. We'll use it especially if we want to allow users to customize the app behavior and other app properties. We'll show the best way to store these data further in the course.
The last component we'll show for now. As you probably guessed from the name,
Image View is used to display images. We'll talk about how to use them in iOS
further in the course. We can set the image both statically, when developing, or
dynamically in the code. The important property is Content Mode which you should
always switch from the default
Scale to Fill to
Aspect Fit or
Aspect Fill, so you avoid deforming the
image when having a different aspect ratio.
A very important component which deserves a separate lesson; we'll discuss it later on. In many apps, Table View is the skeleton of the main screen (Messages, Phone, Notes, Settings, WhatsApp and many others).
Now we successfully got familiar with creating apps and the basic UI components. We still haven't touched alignment yet because that's part of a more complex topic. We'll describe Autolayout and such in the next lesson.
In the next lesson, Swift UI for different screen sizes and Autolayout, we'll learn to align components on the screen
No one has commented yet - be the first!