Now we'll spend some time in Interface Builder and with Auto Layout to polish up our extremely simple UI. We'll also add some more assets to our app, which will allow us to improve the look & feel throughout the next chapters.
Auto Layout is an extremely powerful tool and there's lots to learn. If you want a good overview of the core Auto Layout concepts, including a lot of examples of how to
use Auto Layout with Interface Builder, you should check out our lecture series:
Adding Additional Resources
This step is pretty simple: we're going to add some more resources to our asset catalog. You've already downloaded the art pack for this tutorial earlier on, in case you no longer know where you've stored it you can get it again here
Add new image sets for each of these resources (if you no longer know how this works, go back to the step where we set up the tab bar). The result should look like this (note that you don't need to set up camera and AppIcon):
Make sure you have added all of the resources with the correct names! Now we have some hearts and buttons that can we use to turn our table view cell into a nice looking interface.
When we are entirely done, we want the table view cell to look like this:
We won't finish the entire set up in this step - but we'll get pretty far!
Changing the PostTableViewCell Height
First, we'll make the cell a little bit larger to make space for our additional UI elements.
Change the Row Height of the table view cell and the table view, in the Size Insepctor, from 320 to 470. If you forgot how this works, look back to the step where we set up the table view cell's image view.
Now we're good to go!
Setting up Constraints for the Image View
Throughout this step we will add many UI elements and place them using constraints. Currently the image view is our only UI component and it doesn't have any constraints set up. Once you start adding constraints to a view, you will have to add constraints to all child views - otherwise you will run into some serious Interface Builder problems.
So before we get started on adding new UI elements, let's define some constraints for the image view, so that it stays nicely in place.
Define the constraints for the Image View as following:
Great! Now we can safely move on!
Adding the Like Button
Now, let's start designing one of the core experiences of our app - the like button!
Creating an Image Button
Drag a button from the Object Library and add it to the table view cell (technically the Content View of the table view cell.) Move it to the bottom-right corner of the cell.
Now we're going to configure the like button to show the heart image.
Select the Button that you just created.
Open the Attributes Inspector.
Set the Button Type to Custom. Whenever you want to create a button that just shows an image, you should choose the Custom type. The System type that is selected by default, tints all images in a bright blue.
Remove the Title from the button
Set the image to the heart
Ok, our basic button is set up. Now we need to take care of some Auto Layout!
While working on the Auto Layout constraints for the next few steps, you might run into a bug in Interface Builder. Sometimes your constraints won't correctly influence the size of the UI elements. In such cases you can update the value of the constraint to some other value - then immediately set it back to the old value. Here's a short video that illustrates the issue:
Even though the Traliling Space to Superview was set to 50 at the beginning and at the end of the video, the size of the label appears differently. Give this a shot in case you run into similar issues throughout the next steps!
We should keep that in mind when creating our like button!
Set up the constraints as shown below; we are setting the button size to the minimum recommended size of 44x44:
Don't forget that you need to manually update the frame after you have added your constraints!
You can either use the top menu or the ⌥⌘= shortkey, just make sure the heart button is selected.
Now your cell with the like button should look more or less like this:
I'm not a designer by trade, but to me the like button looks a little bit too big. Apple's guide stated that 44x44 should be the minimum size of our buttons - what can we do?
Luckily, the touch area of our button can be larger than the visual one! We can leave the button at 44x44 but make the heart image a little bit smaller. We can do that by defining Insets for the image.
Select the like button.
Open the Attribute Inspector tab in the right panel
Set all four of the inset values to 4:
The touch area remains suitable for a small mobile screen - but the button looks better with the smaller heart image! You can use this "trick" for many buttons in your own app as well!
Changing the Selected Image
Just like the Instagram app, Makestagram's like button will have two different states: If you haven't liked a post yet, you'll see the gray like button; once you've liked a post, you'll see the red heart instead.
UIButtons have a total of four different states:
Most of them are self-explanatory. The Highlighted state is activated as soon as you tap onto a button. The Selected state needs to be triggered manually by the developer. As soon as a user likes a post, we'll set the like button to have the Selected state.
Let's set up the image for the selected state real quick.
Set up the Heart-selected image for the like button:
Now our like button is complete! But there's a lot more UI to be built. Feel free to grab your favorite hot beverage, but promise to come back!
Adding the Action Button
Next, we'll take care of what I call the Action button. It's the button in the bottom left corner:
That button will allow users to delete their own posts - and to flag posts of other users that have offending content.
We'll try to add this button with a little less hand-holding. Slowly but surely you should be becoming more comfortable with Interface Builder.
Add the action to the bottom left corner of the table view Cell.
Make the Button a Custom on and set the image to More.
Remove the Default Title text.
Set it up with a size of 44x44. Set the Leading space to Superview to 0 and the Bottom space to Superview to 10 (both constrained to margins).
The result should look pretty similar to this:
Alright! We are making some good progress here! Next we're going to add the label that displays the names of all the users that liked a post.
Adding the Likes Label and the Likes Icon
Now we're going to add the Likes Label and the little icon that goes along with it:
Let's start with the heart icon!
Add a small Image View below the large image view (that displays the post image) and above the Action Button
Set the size of this image view to 20x20. Define a Bottom Space to the Action Button of 20. Define a Leading Space (constrained to margin) of 12.
Set the displayed image to be the Heart image and set the Alpha value to 0.5.
Now your table view cell should look more or less like this:
We're almost there! Next we need a label that will display the usernames of our "likers"!
Add a label to the right hand side of the like icon
Set up its basic constraints as following:
Then add an additional constraint between the label and the action button. We will discuss the purpose of this constraint later on in detail! Hold the control key and drag a line from the Label to the action button:
In the popup that appears after you stop dragging, select Vertical spacing. This will create a vertical constraint with the current distance between the label and action button.
Set the value of that newly created constraint to 20:
Finally, change the appearance of the Label so that it fits in with the rest of the design.
Change the appearance of the label to look as following (checkout the video below to see how you can pick the right color):
You can grab the exact color for the Label from the Action button using the color picker as shown in the video below:
One More Thing...
The table view cell is looking great - but there's one last option we should tweak.
We should turn off the Selection for the table view cell. Often table views are used to display an overview of information and they allow the user to select a cell to receive more detailed information (such as the Mail and the Messages app on iOS). In Makestagram, however, we are displaying the entire information about a post directly within the cell. We provide some buttons for interaction, but nothing happens if a user selects an individual cell. Except that the cell color changes to a light gray which shall indicate that the cell has been selected, which does not make sense for Makestagram.
Turn off the Selection for the table view cell, so that cells no longer get highlighted:
Testing it all Together
If you run your app, with all of these changes in place, you should see a timeline that looks similar to this one:
Now this is starting to look like a real app!
Connecting the Pieces
As a last step of customizing our cell - for now - we'll add some code connections. Throughout the next steps we will be implementing the like feature and other features that require all of the UI components on this cell to be accessible from code.
You've set up a bunch of code connections before, so try to create them without detailed instructions this time!
Create Referencing Outlets for all of your UI elements on the Table View Cell. The result in your source code should look like this:
Make sure that you can see a filled dot next to each of these connections - that indicates that they are successfully tied to an element in Interface Builder:
We didn't cover too many new topics in this step; however, you should be a little more comfortable with Interface Builder and Auto Layout after decorating the custom table view cell with different UI elements. We've also made some good visual progress in this step and we have laid the groundwork for implementing some of the core features of Makestagram.
Coming up next: how to like things in a digital world!