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 language:

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 your app.

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 Label 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 Label 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.

We use 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 as UITableView.

Button

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.

Text Field

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.

Text View

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

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.

Image View

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.

Table View

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 using Autolayout.