How to write an app – fitness tracker IOS version –icons and constraints

Welcome to the second stage of building the wright step fitness tracker app from scratch. If you’ve just arrived, it’s probably a good idea to shoot back to the start by clicking this link here…How to write an app – fitness tracker IOS version – introduction

For those following on from the previous post, we’ve just applied our first view to our app, set some constraints on it so it always appears at the top of the screen no matter what screen size we are using. And we changed the background color to make it more obvious where the view is. If you’ve not followed these steps yet and want to follow along, jump back there now…How to write an app – fitness tracker IOS version – Our first view.

In this post, we are going to fill this view with our logo, the month name, and the “last month” and “next month” icons. We’ll really be building on the lessons from the last post to solidify and practice on our knowledge of settings constraints. So, with all that said, lets jump into it…

In the previous post we dropped a logo image into our Assets.xcassets folder. Now we are going to use this image. First lets drop another view onto our screen, but this time we only want the view to contain an image so lets use a “UIImageView”. This view is going to house our logo, so lets name it, “logo view”. In case you need a reminder, the UIImageView can be found by searching for “UIImageView” in the bottom right of xcode.


Those big red arrows point to several things. The bottom right is where we find the UIImageView, confusingly named simply Image View.  The arrow in the middle of the screen is where I’ve dropped the Image view. Resize it and reposition it to approximately where you want it, don’t worry too much as we’ll set the constraints in a moment, but I usually find it works a lot easier if you position it as close to where you want it as possible. (It helps when the object detects its nearest neighbour for example) The arrow on the far left of the screen shows I’ve renamed the view “LogoView” to help keep track of whats what. And in the top right of the screen is our next step, setting the image to show within the Image View.

If you select the drop down menu in the image option (where the top right arrow was above) then you should see your logo as the only option, unless you haven’t bothered to put it in there or you’ve raced ahead and put a bunch of other images in there. Select your logo and you should see your image appear in the ImageView. Unless you set it up perfectly the image won’t be sized or scaled correctly so we will fix that now.

Below where we set our image you should see a drop down menu titled “Content mode”, click that and select Aspect Fit. This changes the image to fit within the view while maintaining its aspect ratio, ie it doesn’t get all stretched or squished up.

At the very top of this window on the right, select the little ruler to go into our size options like we did in the last post, and at the very top set the width and height. I’ve set mine to 64 each. Once this is done your screen should look similar to mine below…


So the logo in now in our view, central (ish) and isn’t all stretched or squished. Lets make the logo be in the middle of the view, and make sure it stays that way no matter what screen size our users are using.

In our last post we learnt how to set constraints, so make sure our ImageView is selected, and click the constraints button (in case you’ve forgotten, here it is below)tracker10

So in the constraints window just set the height and width constraints to 64 each, don’t touch any of the others.  Click “set 2 constraints” to confirm your choices. Now click the small icon to the left of the constraints icon which looks like a little horizontal bar graph. These are alignment constraints, these let us tell the object to appear in the centre vertically and/or horizontally. Tick both vertical and horizontal boxes and then select “set 2 constraints”. Your screen now hopefully looks similar to mine below…


Those blue lines surrounding the logo, and coming out vertically and horizontally show that the app is happy with our constraints. If they were red there would be an issue. I’ve even included in the right hand window the constraints we just set so you can see. You should be able to see 4 constraints as above.

OK its slowly coming together, lets now set the month label below the logo. Search the object library where we found our ImageView in the bottom right of Xcode for “label”. This should give you a label view, essentially a view that contains some text. Drag and drop it below our logo. Now in the window on the far right, select the attributes icon (if you don’t remember from the first post thats the little downward arrow pointing thing 4 icons across from the left.) Now in the second field down, change the text from “label” to “September”


So hopefully at this point your screen looks similar to mine, the label is under the logo, although not necessarily lined up with it yet, and reads “September”. Lets use some constraints to make sure that it always appears directly underneath the logo, no matter what size screen the app is running on.

Ensure the label is selected, and click on our constraints button again. I’ve set my distance to closest neighbour above (the logo) to 4, my width to 92, and my height to 24. Confirm your choices by pressing, “add 3 constraints”. Now select the alignment constraints icon as we did before (to the left of the constraints icon) and select “horizontally in container” to make sure it always appears in the middle of the screen, as this is what we did for the logo. Now click “add 1 constraint”

You might notice at this point that the month name doesn’t quite sit in the middle, if this is the case, make sure the month name is selected and then on the window on the right, click the attributes icon (the down pointy thing 4 icons across) and find alignment, and select the centre alignment option. This centres the text within the view (which is already centred within the screen)

OK one more thing to do for this post, and that is to position < and > icons either side of the month name, to let our users change the month they are viewing. I downloaded the icons I wanted to use and then named them using the name@2x.png naming convention. Drop them into your assets folder in the same way we did with our logo image in the last post so they are available for this next step.

Now because we want these icons to be interactive, we want to set them as buttons. Search button in the object library in the bottom right of Xcode, like we did for the ImageView. Now drag 2 buttons into our view, one each side of the month name. Don’t worry about getting the position exact as we are going to set the constraints shortly.

So for each of the 2 buttons, before we set the positions we want to change them to display our < and > icons. See the picture below, I have circled the 2 fields that need to be updated. The field at the top containing the text “Button” needs to be emptied and then press enter to confirm. Following this, in the background field circled at the bottom, select the appropriate arrow icon that should be available if you have moved it into you assets folder. After having done the first one your screen should look as below…


So go ahead and remove the text on the second button, and set the image for the button to the appropriate arrow. One last thing left to do, set the constraints for these 2 buttons.

The constraints I used were to set the height and width to 26, the space to the left or right of the month name (depending on which arrow you are working on) is set to 4, and the space to the bottom of the superview (the orange view we placed in the last post) was set to 0. If all has gone well your screen should look like mine below, I have also included the  constraints visible in the window on the right so you can see for yourselves.


And that brings us to the end of this post. In later posts we will write code that will detect clicks on these buttons to change the month. But before we do that, we need to begin building our custom calendar, which we will do in the next post.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s