Movie App Swift 4 — Part Two, Networking, CollectionViews and more.

Photo by Ben Cliff on Unsplash

Welcome to part two of the series. Let us finally get something to appear on our screens. If you are at this stage of the tutorial you should have the following:

• Pods setup
• API Key from The Movie Database
• Moya Network Layer Setup (be able to see response in console)
• Project group structure setup

Top keep this tutorial short what we won’t be covering in this part is connecting our views to our code. So what will we be covering:

• Wrapping up our network layer
• Designing our interface in Interface Builder
• Designing our custom cells

Wrap Up Our Network Layer

Add the two above methods to your API class. These two functions are exactly the same as our getNewMovies covered in part one (Please note I won’t be covering how to play the videos in this tutorial. And most of the code I will only show using images as it force you to type. Not much learning is achieved via Copy & Paste). That is our network layer all wrapped up 🎁.

Storyboarding

I will try go into much detail as possible as to how to layout the views using Interface Builder but as you would guess that could lead to a very long post. So I will focus on the key concepts in the interface builder. This series will probably be one of the few where I use Interface Builder instead of view code.

MainView

1. Move a UIVIew pin it to the top and the sides and give it a desired height (approx 85). Give it a background color. We will call this our NavBar it is not a NavigationBar but it will mimic one.
2. Movie another UIView place it below the NavBar (yes BELOW). Give it a height, leading and trailing space of ±35. And pin the top to the bottom of our NavBar. After pinning it to the top change the top constant to a negative ±20. So that the constraints are close or similar to the ones below. We refer to this as our searchBorderView.
3. Add a UIView inside the searchBorderView place it to the right and place a UITextfield to the left to fill up the remaining space. Set the correct constraints as depicted in the image above.

StackViews & CollectionView

How to tackle the below display. One could either create a collectonView with two sections and then create a custom header for each section. Or like me take the easier (well for me) way out 🤷🏾‍♂️. What I did was create two separate collectionViews. Is this best practice NO, will it work YES, will I use this in a production application NO, is this tutorial about collectionViews and best practices YES & NO 🤔. Anyways this method is not advised for two reasons: 1. It is not scalable let’s say you wanted to add another section let’s say ‘Top Rated Movies’ you would have put the view in a scrollView add another collectionView design it. 2. Your code will get uglier as it scales we shall see the evidence of this later.

ContainerView

1. Place a UIView below the searchBorderView make it fill the remaining space and pin it to the margins. This will be our containerView.

StackViews

1. Place a stackView inside the containerView pin the stackView to all the sides of our containerView giving it the same position, height and width as our containerView.
2. Place two views inside the stackView topHalf and bottomHalf position them vertically. Give each view a distinct background color so you can distinguish between them. Set the stackView to have a vertical axis, alignment of fill, distribution fill equally and zero spacing.

CollectionView

We will only be covering the topHalf as the bottom half is almost an exact replica of the top.

TopHalf

1. Add a collection to the topHalf pin it to the edges giving it the same height and width as our topHalf.

2. Give the collectionView the following settings (Don’t forget to do the same for the bottomHalf 👍🏾).

BottomHalf

1. The collectionView has the same settings as the topHalf.
2. The only difference we will add a view with a button in it at the bottom. Give this view a height of ±40. Place a button inside it remove the title and leave it blank.

MainViewController

You can use the default viewController Xcode gives you when making a new project but to be more descriptive I usually change the name of this file to go with what it does in the project. I changed mine to ‘MainViewController’, and also change the Class for the viewController in the storyboard. For now we are going to link our outlets and create the necessary properties.

Custom CollectionView Cells

So let’s start by designing our custom cells. I will on go over the topHalf cells. The only difference with the bottomHalf cells is that they don’t have a star rating. Let’s create a separate NIB file to host our cells go to File >> New >> File >> Cocoa Touch class.

Don’t forget to tick the ‘Also create XIB file’ checkbox. If you haven’t worked with NIB files one thing to note is that constraints are extremely important. you HAVE to make sure that they are set correctly or you will see the most amazing displays. So we want to achieve this display at the bottom. This might be a bit confusing if it’s your first time working with NIBs so I will try to go into much detail as possible.

First place a UIView make it take up at least 60% of the entire container. We want the image to scale proportionally on all device sizes so we are going to use proportion constraints. I went and got a nice place holder image to display while the image loads. Set the content mode of the image to ‘Redraw’ I found that this works much better for our images rather than ‘AspectFit’.

So the view inside the container is what holds our imageView we need to pin our imageView to the edges of this view making it resize fill its container view. We also want our view to have a height equal to 60% of the cells height. To achieve this pin the view to the top, left and right. Then control drag from the view to the container like so and select equal heights.

After doing that you should have the following.

Then click on the size inspector to the right of Xcode. Find the height constraint double click on it and set it’s multiplier.

Set the multiplier to 0.6 this will make it take 60% of it’s super view.

Movie Details

Let’s quickly set up the Movie Details… yes quickly. This is what we want to achieve very simple.

Add a view below the top view which hold the image. Pin it to the bottom of the view that holds the image. Also pin it to the edges so that it takes up all the remaining space.

How to test that this view is set up correctly ? Simple change the multiplier of the view that holds the image and see if the view adjusts appropriately. For example lets make our image take up 10% of the screen. I change the multiplier to 0.1 and the result should be look like:

Pretty cool right, now we know our views are set up correctly and will resize properly. Proportional constraints are a nice way of dealing with size classes without setting too many constraints. (Okay don’t forget to change the multiplier back to 0.6 we were just testing)

1. Add a label give it top spacing, left and right spacing and also give it a desired height. Select a nice font and color. It is good practice to leave suitable dummy text in the label so you can see what this cell will display. This will be our titleLabel.
2. Move two labels place them below the titleLabel, the one say ‘Release:’ and the other will display the date. Embed these two views in a stackView if you wish I did but did not have to. Set the constraints pinning the labels to the bottom of our titleLabel, give it height and pin it to the left and right.
3. Add a UIView below our labels. Pin it to the bottom of our release labels and give it some spacing ±2. Then pin it to the left and give it a width of 100. Then add a bottom constraint to its container view, this bottom constraint is very important like important🚨). Make its class HCSStarRatingView this is one of the pods we installed which will take care of the ⭐️ for us.
4. And we are done the bottomMovieCell is exactly the same only difference is that I just removed the stars at the bottom. You could copy the cells and just remove the stars. Don’t forget to reset the constraints though.

TopMovieCell — Connecting our outlets

1. Connect all the outlets from the NIB to the class
2. Create a movie of type Movie, we will make use of Swift 4’s observer pattern didSet property to setup our view. How this works is that when the movie var is set by our collectionView it will call the method updateUI.
3. In updateUI we unwrap our movie and the url for the image, we know for sure the movie is set by this point but Swift does not so we have to unwrap still.
4. We then use KingFisher to create an ImageResource and create a cacheKey which we set to the title of the movie.
5. We then set the image to the posterImage
6. Set the titleLabel to our movie title
7. Set the ratingView.value to the movie.rating divided by 2 (why divided by two? Cause the API returns a value out of 10 and our star rating system is our of 5 so we divide by 2 and round up, awesome maths 😒)
8. Set the dateLabel to the movie releaseDate
9. We need to create a DateFormatter to format our dates to how we want. I usually use a singleton for the DateFormatters as they are memory hungry. So this way we only create on formatter and can use it anywhere in the app. Create the class DF and place it in the Helpers group

SUCCESS ! 🎉

Congrats! you have made it to the end of part two. We have our network layer and all the UI for the MainView is completed. In the next part we will connect our MainView and finally get things displaying on the screen.

Movie App Swift 4 — Part One