Mentor Léo - iOS : Week 1/Day 2
If you want an overview about this week, have a look on the introduction article on medium.
In the day one we launched our first iOS app in a simulator. This day we will start building our first view 🙌.
Before you start the exercises I recommend you to take a moment to explore Xcode basic features. Here is a quick introduction video by Apple which will give you a great overview of your new favourite IDE.
Playing with Storyboard
In iOS, you have roughly 3 different ways to create a view (which the user will be able to play with!):
1- Build it graphically (drag & drop elements) in a Storyboard file
2- Build it graphically (drag & drop elements) in a separate NIB file (.xib extension). For this case you can only define one view per NIB file
3- Build it programmatically: you will define its size, position and add manually UI components using only code
Note: You can also mix graphical view creation and specific customisations using code.
In this series we will mainly work in the storyboard file.
The goal of a storyboard is to describe the paths of your application by designing visually your views and defining the links and interactions they share.
When you create a new Xcode project from a template (e.g. Single View Application as we do in the Day 1), Xcode will generate for you a default file called Main.storyboard where you will have a default view (blank one) in there.
Note: A view in a storyboard is always embedded in what we call a “View Controller”. A View Controller is an object that will setup and manage the view.
The first element of your storyboard, a View Controller, is marked as initialViewController. Generally, this will be the first view that will be displayed when you launch your application.
See the grey arrow pointing to the blank view and the first checkbox “Is Initial View Controller” checked in the Attributes Inspector panel on the right?
Obviously, you can have multiple storyboard files in your application project and you will be able to make link between them when it’s needed.
Day 2: Xcode + Storyboard = ♥️
Exercise one: Start building a view in a storyboard file
1- Open the Main.storyboard file (😎 CMD+Shift+O)
2- Put a UILabel component right in your view (drag & drop a label from the Object Library which is right under the Attributes Inspector panel on the right)
3- Run your app. You must now see a label right in the blank view.
Exercise two: Update a content programmatically
Now we have a label, let’s see how we can modify its value using… code! 🎉. By default, this label has a default static text Label which you can modify in the storyboard by putting another value in the Text field.
What if we want to dynamically change this value programmatically?
We say before that each view in a storyboard is embedded in a ViewController, do you remember?
If you click on the initial view controller in the storyboard navigation tree on the left, and select the Identity Inspector tab on the right you will see, ViewController as a value for the Class field.
That’s the way we make the link between a View Controller in a storyboard and a class in the code.
What about the view in which we drop the label? If you select the Connections Inspector now, you will see that the `view` attribute of the ViewController was automatically bind to this view.
So if you open the ViewController.swift file, you will be able to use the view attribute (inherited from the base class UIViewController) and print its frame for example.
And what about accessing our label?
In the same way the view was bind to the ViewController view attribute, you can bind the label to the ViewController by declaring a new instance variable with a special type IBOutlet and make the link in the storyboard file.
1- Open the ViewController.swift file
2- Declare a new UILabel as an IBOutlet
3- Return to the storyboard and link the label (the one you just dropped before) to the IBOutlet instance attribute of your `ViewController` declared in the code
4- Try to modify the text displayed in the label at runtime, in the viewDidLoad method for example, by assigning a new value to the text attribute of the label.
You have created your first View in a Storyboard file managed by a View Controller in which you have dynamically updated a custom label at runtime \o/
Exercise 3: Sizing and placement with constraints
Since iOS 6 (iOS 11 will be launched this autumn) Apple introduces a mechanism to layout your elements in a view: Auto Layout.
Note: Auto Layout is a way of defining, for each elements of a view, its position and size relatively to other views and the parent view (called superview).
You have to setup Auto Layout attributes on a view element so it can deduce at runtime for any device size and for any orientations (landscape/portrait):
- The Y position of your element in its superview
- The X position of your element in its superview
- The height of your element
- The width of your element
In this exercise, you will have to setup some layout attributes to our label. We will center it horizontally and vertically, set a fixed height and a width that always fit the entire screen width.
For this exercise you can Google how to make those simple auto-layout setup. You can also directly watch the Apple Introduction on Auto Layout video if you are a little bit lost. That said, the better you will try by your own, the better you will understand and remember the key concepts.
1- Set the vertical position of your label so it is vertically centered in its superview
2- Set the horizontal position of your label so it is horizontally centered in its superview
3- Set the height of the label to a fixed value
4- Set the left and right margins so it always fit the entire width of its superview
5- Build and run (😎 CMD+R) your app to see the result
Pro-tip 😎: use CMD+← or CMD+→ to rotate the simulator and switch between different device orientations.
And voilà! You build a View in a storyboard file customising the text by writing code in the associated ViewController file and setup AutoLayout attributes on its subviews (a UILabel) so its content can support all devices sizes and orientations.
Here is some videos that will gives you a more knowledge on Auto Layout and to prepare you to the next one. In the day 3 we will start building your profile view using Auto Layout.
Call to action
Join us ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥ https://mentorleo.co