Mentor Léo - iOS: Week 1/Day 3

Learn by doing, become a free remote developer — Photo by Sarah Lachise

In the day 2 we saw the basic mechanisms on how to display a view and modify UI elements using code.
 
Trough this day, we will use these knowledges to start shaping your profile view.

We will arrive to something like this at the end of the week:

Check Pomme Plate for awesome devices mockups

Day 3: Layout your profile view

The goal of this day will only be to lay out properly the different elements.

First, remove the label we put in the day 2 and the associated code in the ViewController.swift file.

Exercise 1

We will start our profile view by creating a new View Controller file.

1- Create a ProfileViewController.swift file (subclass of UIViewController)
2- Go back to the storyboard file
3- Select your initial view controller and set his class to be a ProfileViewController (using the identity inspector panel as we saw in the Day 2)

Now the basics are setup, we will start building our view in the storyboard file ✊.

Exercise 2: Header image

1- Put an image view (UIImageView) at the top of the view controller in the storyboard
2- Setup the image view auto layout properties as below:
 - align the top edge (top space constraint) to the top edge of the superview
 - align the leading edge to the leading edge of the superview
 - align the trailing edge to the trailing edge of the superview
 - set its height to 200px
3- Set the image view Content Mode to Aspect Fit

Great! 👍 Let’s add a profile image view.

Exercise 3: Profile picture

1- Put another image view just under the header image
2- Set its size to (70.0, 70.0)
3- Center it horizontally in superview
4- Align vertically the center of the profile image view to the bottom of the header image

Pro-tip 😎: if you want to set a constraint between two different edges, for example, aligning the center of an object to the bottom edge of another one, set a constraint on the same edge between the two objects first. You can then select the constraint in the storyboard and modify for each views which edge is affected by the constraint.

5- Set the image view Content Mode to Aspect Fit

You are done with your profile picture. 🙌

Exercise 4: First/Last name label

1- Drop a label below your profile picture
2- Place it 20px below the profile picture
3-
Set its height to 20px
4-
Set its width to be the same as its superview (with 10px margin left and right)
5- Set the text to be centered.

Next! Add a label to describes yourself. 😎

Exercise 5: Description label

1- Drop a new label
2- Place it 20px below the name label
3-
Set its left and right edges aligned to the superview left and right edges (with 10 px margins)
4-
Set the Lines attribute to zero (0)

Pro-tip 😎: Setting the Lines (numberOfLines in code) attribute of a label to zero allow the label to auto compute its height regarding the length of the text in it.

Almost done! Let’s add a table view.

Exercise 6: Social table view

We will now put a table view which will contain all your links to your social networks. A table view is a scrollable view which can contain an unlimited number of items (called cells).

1- Drop a table view (UITableView)
2- Place it 50px below the description label
3- Set its width to be the same as its superview (with 10px margin left and right)
4- Set its bottom edge to be aligned to the bottom edge of its superview

Great! You lay out all the profile view elements 🙌. Your storyboard should now look to something like this:

In the next day we will start polishing this view to approach the final rendering 🚀.

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