How to write an app -fitness tracker iOS version – creating a custom calendar part 2

In the previous post I went over how to create the basic layout of a custom calendar which displays a box with the date in the top for each day of the month, and within each box is a button that when clicked, can be set to display an image of our choosing. To go back and see how this layout was built click here…How to write an app – Fitness tracker IOS version – building a custom calendar


In this post I want to go over including some code in our app that will adjust the appearance of the calendar based on which month we are looking at, so for example when looking at September we will see 30 boxes instead of 31.

Logic tells us that no matter what month we are looking at, the first 28 days will always appear the same. For this reason, we need to create code that can make the 29th, 30th and 31st number labels and buttons disappear and reappear as we need.

So lets start by creating some IBOutlets for the number labels and buttons, so we can affect these with code. For those that don’t know, an IBOutlet is like a connection between an object on your storyboard and the code for your app. Let’s create the outlets to make this more clear.

Make sure you can see your main storyboard and your code for the main page and then select the number 29 label. Holding control, drag and drop underneath the “didReceiveMemoryWarning()” function code block. You should see an small window open up as below…


Make sure the connection type is “Outlet” and name it something appropriate. Here I’ve named it label29, and ensure the Type is correct, in this case UILabel. Once you press connect you should see the IBOutlet appear in your code as below.


So this now gives us the ability to write code that will take actions on this label. Which we will do whenever the user changes the month. Let’s now go ahead and create IBOutlets for the remaining number labels and buttons for days 29,30 and 31.


At this point we are now able to write code that takes actions on each of these objects. Specifically, if I write code to remove the text in both the label and the button, its as if they are not there as far as the user is concerned. I could put some code into the viewDidLoad function to test that this works, however I don’t want the labels to change on opening the app willy nilly, I want the labels to change depending on what month we are currently viewing.

This leads us to our first coding problem, how do we know what day we are currently viewing. For me it makes sense to always open the calendar on the current month we are in. Here is how I went about determining the current month. Within the ViewController class, before the viewDidLoad and other functions enter the following code…

let now = Date()

let dateFormatter = DateFormatter()

var nameOfMonth : String = “default”

Let’s explain whats going on here, the “let” keyword signifies a constant. The current date isn’t going to change while you are looking at the calendar (most likely) and so this can be a constant value. In this case, a “Date” object is created that will not change and signifies todays date.

Similarly, underneath we create a “DateFormatter” object that will not change. This formatter simply lets me take the date object and format it into a way that is easier to handle, this will become more obvious in a moment.

Finally, I create a String variable to hold the name of the month called “nameOfMonth”. Since this will change if the user changes the month they are looking at, this is not a constant and has been declared using var instead of let. As we do not yet know which month we are looking at, I have initialised the variable with the value “default”.


So at this point, we have a date object containing the current date, and a string variable currently with the value “default”. What I want to do now is change the nameOfMonth string to reflect the current date. Here’s the code to implement this followed by the explanation…

if(nameOfMonth == “default”){

            dateFormatter.dateFormat = “LLLL”

            nameOfMonth = dateFormatter.string(from: now)


The first line of code is the if statement. In case you’re wondering why we would need an if statement, its because later on in the app we build functionality that takes you to a different page, and when returning to the main page we might not necessarily want to set the month to the current month. The user may have scrolled across to a different month, and we want them to be able to return to the month they were currently viewing, not be taken back to the month of the current date (what a mouthful!)

So anyway, if the app has just been started and the current name of the month is “default” the if block is entered.  Then we set the date formatter to display the date as a single month in a text string using the “LLLL” value. To put into context a little how that works and what its doing, if I had set the value to “LLL” the output would be “Sep” for example, “LLLL” would give “September” and “YYYY” would give “2018”. For a full list of how you can format the date google dateformatter.dateformat.

And now finally, we apply the date formatter to the current date using the line of code, nameOfMonth =dateFormatter.string(from: now). What this leaves us with, is the nameOfMonth being for example, “September” or “October”

Having a variable with a limited set of possible values is great because we can now create a series of if else statements. Before going into the code the logic we want to create now is to say, if the month is x,y or z, set certain days to be visible or invisible. And if the date is a,b or c then set different days to be visible or invisible.

At this point, we’re not setting any code to let us change the month manually, we will do that in the next post. But the code we’re about to write will change the calendar to reflect the current month as determined by your phone. At the time of writing, it is October and so actually I wouldn’t expect this code to change anything as there are 31 days in the month, and all 31 days are visible by default.

I’m going to create a function called setDays(). This function will run through a series of if else blocks and make days visible or invisible as appropriate. There will be 3 blocks needed, as some months have 30 days, some have 31 and February has 28. See the code below for the full function…


Hopefully the code logic there is obvious, you can see I’ve forgotten to remove the comments to remind me of what code to put where, what an absolute bozo. So the only thing remaining to do is call the function setDays(). I put this in the viewDidLoad() function as I want it to be called when the view loads, when the app is opened.

So, thats that, a calendar that changes depending on what month it is when you open it. Hopefully you can imagine from here it’s a simple matter of changing the nameOfMonth variable and then calling setDays() again to change the calendar, but in any case the next post will go through this. Hopefully this has been helpful!


How to write an app – Fitness tracker IOS version – building a custom calendar

If you’re just joining here, you might want to jump back to the beginning so you can see how the app has been built up until this point…How to write an app – fitness tracker IOS version – introduction

Otherwise, at this point in the app we are going to start building our calendar. Now I believe there are already calendars available that you can import and use however, when I was building the android version of this app there was no calendar that had the exact functionality I wanted, specifically I wanted to be able to click within the calendar and set an image to appear in that space.

So the way a real programmer would have done this (I believe) would have been to take an existing calendar class and extend the class adding the desired functionality to it. Well honestly this was over my head, maybe one day I’ll be there but for now I decided to build my own calendar from scratch.

So, here’s how I built it. I’m going to start hand holding a little less from here because, hopefully by now you’re getting the hang of the Xcode interface and also its a real pain taking screenshots of every tiny change. I’ll still screenshot at intervals when needed.

First in the object library in the bottom right, where we found our views, search for a stack view. Specifically we want a vertical stack view. This view is going to contain 5 other views, which will each contain a weeks worth of days in the calendar. Place the vertical stack view in our main screen under the view we built in the previous tutorials. For now resize it so that it takes up approximately 3/4 of the remaining space in the app screen.

Now search for horizontal stack view in the object library. Drag and drop 5 of these horizontal stack views into the vertical stack view. Each of these horizontal stack views will eventually contain 7 views, one for each day of the week. You may find this messes with the size of the vertical stack view but don’t worry as we will fix that now before we move on.

Select the vertical stack view again and with that selected, click the constraints tab. Set the constraint to the neighbour above (our first view) to 8. Set the constraints to the neighbours either side (the edge of the screen) to 4 and finally set the constraint to the nearest neighbour below (the bottom of the screen) to 100. This is to give us space to add our Instagram button and an advert banner at the bottom.

Also while this vertical stack view is selected, in the attributes tab there is an option of “distribution”. Select this and choose “fill equally”. This will set each of the horizontal stack views to take up the same amount of space within the vertical view.

So at this point we have one large vertical stack view which represents our entire calendar. Within this we have 5 horizontal stack views which each represent a week. Now I am going to create a view that will represent one day. When I originally created this app I messed up in the sense that I created 31 views, one for each day, and then went through each one configuring the sizes and constraints. Not very clever and programmer like. If I had the sense to preplan I would have created one view to represent a day, and then copied it a whole bunch of times. So thats what I am going to do here.

So the steps to do this is as follows, drop a simple View into your top horizontal stack view. It will automatically size to fit the entire stack view because its currently the only view in there, don’t worry about this. This view we have just dropped in represents one day in out calendar. I now want to split this day into 2 parts, the top part will be the date and the bottom part will be the image I want to place in that day.  So once again, drag and drop 2 more views into our “day” view.

These 2 views I have dragged and dropped into the day view I have renamed, just for the sake of being able to keep track of what is going on with all these views. I’ve named the top view “dayNumber” and the bottom view “dayImage”. While I’m at it, I’ve renamed the day view to be “day” I’ve set the following constraints for these 2 views. The top view I have given the constraint of being a distance of 0 to the top of the “day view” and set a height of 20 which I believe is big enough to display the day number on it. The bottom “dayImage view” I have given a top distance from the dayNumber view as 0 (I want it to be directly underneath the dayNumber view. And the bottom distance to the “day” view is 0. Notice I haven’t set any horizontal constraints because I want the horizontal stack view to take care of the horizontal sizes when it distributes the views contained within equally.

So for anyone reading this and thinking “what the hell is going on, views everywhere!” here’s an image of where we are currently at. I’ve coloured the dayNumber view blue and the dayImage view green. You’ll notice at the moment it looks like gobbledygook.


Ok so at this point I’m tempted to put 7 of these day views into the stack view so we can see a little better whats going on. That means we will need to replicate anything we do within the day view 7 times though. That’s just not good coding practice, so instead lets just tolerate the fact the calendar looks nothing like a calendar for now and press on.

Before doing anything else, set some constraints for the dayNumber and dayImage views so that they are 0 distance from the left and right of the day view. This will mean when we start adding more days into the stack and the day view shrinks accordingly to make space, the dayNumber and dayImage views will shrink accordingly with them.

So the dayNumber view needs to contain a label so it can display a number representing the date. Lets find a label view in the object library and drag it into our dayNumber view. For now, I’m going to set the text in that label to “1” although this will need to be changed later.

I want the image portion of the day to be clickable, and so I am going to drag and drop a button into the dayImage view and set the text for the bottom to be “+”

One last thing before I start copying and pasting the day view, I want to set some constraints for the new label and the new button to make sure they are always located in the centre of the dayNumber and dayImage views.

Ok I can’t take it any more, lets make this start to resemble something that looks like it could eventually become a calendar. Copy and paste the day view containing all your sub views and labels and buttons, 6 times into the top horizontal stack view giving a total of  day views.

After doing this we should have something that looks like the top line of our calendar.


Things get fairly simple from here on. I’m going to change the text in each box to the appropriate number, and I’m going to remove the colours as we don’t really need these any more they were only there to help see the 2 separate views. Once this is done, I’m going to delete the other horizontal stack views and instead copy and paste the current horizontal stack view, so we have 5 stack views the same, I re-number the days as appropriate and remove the text from the labels and buttons for the days after 31 to leave with what is shown below…


At this point you might be thinking, “well all you’ve done is create a grid of views to represent days” and well yeah, pretty much.  However in the next tutorial we will add our first bits of code to the app that will change the number of days displayed on the screen, dependant on which month you are currently viewing. So for example, if viewing February, days 29,30 and 31 will disappear.




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.

How to write an app – fitness tracker IOS version – introduction

Welcome to this guide on building a fitness tracker app for iOS. This guide is really designed for people who are trying to get into coding apps. If you’re an experienced developer, there’s probably not going to be much for you here unless you want to laugh at my code. There is already a lot of material out there on building apps, but personally I’ve found when trying to follow along, a lot of the code is glossed over in terms of what’s actually happening and I find myself getting lost. Maybe I’m just dumb! But for this reason, I am going to attempt to make sure every line of code in this guide is explained!

I’m designing this for the complete beginner, so even if you think you’re not ready, give it a shot. For any code that is more advanced than I care to delve into, I will point out along the way what you can read up on so that with a 5-10 minute investment you’ll understand what is going on.

So the app we are going to be building is a fitness tracker, you can download a finished version of the app from the Apple app store called “wright step fitness tracker”. I would definitely encourage you to get a copy of it, its free, and have a play and see what kind of functionality you’re going to be building. It’s quite a simple app but if, when you open it up, it seems like it will be too complicated, then calm yourself down because this course will be split into very simple chunks and everything will be explained. And even though the app is quite simple, there’s a lot that can be learned from developing it.

So, if you haven’t downloaded the app, go get it now and I will explain the features we are going to build…



So the opening screen is a blank calendar with a logo at the top of the screen, and a month selection below that. At the bottom of the screen is an Instagram icon and below that an advert. You can change the month you are looking at by using the left and right arrows located next to the month name, and you should notice that the number of days in the calendar automatically changes depending on the month.

If you click the Instagram icon, the app takes a screenshot and opens a sharing option where you can choose to share the screenshot to instagram. This is good for sharing your fitness routine to all your followers.

For each day of the month is a small plus icon, if you click any of these icons for any day, you are taken to the next screen.


In this screen you should see a small message asking you to “choose your activity” and below that, 8 icons with different activities and then below that a “cancel” option. Go ahead and click on the cyclist activity…

Notice a few things. The day you selected when you pressed the plus icon now has a cyclist icon in. Now change the month and then come back to the month you are currently on. Notice how the cyclist is still there…


Now, close the app down on your phone completely and re-open it. You should see the cyclist is still there. None of this happens by accident, it all needs to be coded and we will go through all of it.

One last thing. Click another day, and this time select the activity of the little weight lifting man (supposed to represent going to the gym). You’ll see in this case you’re not taken back to the main screen but instead you’re taken to a third screen where you can get a little more specific about what you did in the gym that day. If you select any of these options you should see that you’re taken back to the main screen again but the day you chosen has a little weightlifting man in with a description of your workout that day.

The last thing worth mentioning is if you click a day that already has an activity in it, you can replace it with something else, or if you select cancel, you can remove the activity altogether.

So, that’s the app we are going to build. You can feel free to change the icons when it comes to it, and put your own logo in there and release the app onto the store if you want. We’ll even go over putting some ads in so you can potentially make some ad revenue.

So when you’re ready, click the link below to go to the first lesson, placing our first object within our app. Nice and simple to start!…How to write an app – fitness tracker IOS version – Our first view.

How to write an app – fitness tracker IOS version – Our first view.

Welcome to part one of building the wright step fitness tracker app. If you’ve not read the introduction describing what we are going to be building, shoot back there now and have a read …

In this post, we are going to start small and go over placing our first view (an object that acts like a frame, holder, box or container). Nice and simple. But in doing so, we will learn about starting a new project, a little about the interface and a little about placing objects within our app.

First let’s get the boring bit out of the way. I’m going to assume you’ve already got Xcode installed, if not go download and install it now. I’m not going to go into how to install it as there are already a million instructional videos for how to do this. Once installed, open Xcode and select “Create a new Xcode project”


In the next screen, select “Single View App”


In this next screen give your app whatever name you want in the product name field, if you’ve already created an account in Xcode select that under Team. Put in your organisation name if you have one, or if not just make one up. Your organization identifier you can just use com.yourorganisationname. This is just to create your bundle identifier which needs to be unique, and is created using your product name and your organisation identfier. So as long as you dont have the same organisation name and product name as someone else, you should be all good. Use Swift as the language and keep the 3 checkboxes ticked.

tracker 3

In the next screen just choose where you’d like to save your project, I just save mine on the desktop as its easy to remember the location and quick and easy to get to.

tracker 4

And finally, our project is open and created. On the left you should see all your project folders. Some important ones you need to know about are the main storyboard, which is like a visual view of all your screens in your app. The ViewController.swift file, which is the code attached to the main screen in your app as it stands at the moment. And your Assets.xcassets folder which is where we will store the images used in our app.

If you click the main storyboard folder on the left, you should see an image like below pop up in the main screen. This is your blank canvas that will become your app.

The first thing we’re going to be doing is placing the logo in the top middle of the screen when the app fires up. So take whatever image you would like to use as a logo, and rename it image@2x.png. The @2x.png bit is important as Xcode uses this as you will see in a moment. Once you have your image, and named it appropriately, drag and drop it into the Assets.xcassets folder like so…

tracker 6

Once you’ve dragged and dropped the image into the folder it should automatically sort it as in the picture below…


Click back on the main.storyboard folder on the left hand side so we can be taken back to our blank canvas. So the first thing we are going to do, is section off the top 1/4 of the screen to use for our “logo”, “month” and “month selection” icons. To do this sectioning off, we will use a View (Think of this as a box or a frame, the reason I want to split into multiple “views” is because it becomes easier to tell the application to position our icons at the bottom of a specific view for example, which you will see shortly). In the bottom far right of the screen you can see various objects, for example View Controllers, buttons, labels etc. Scroll down until you find one simply named “View”. Now drag and drop this onto the top half of your blank canvas, like so…


Now what we want to do is make this view take up the top 1/4 of our screen, roughly. To do this, we will use constraints. These constraints are our way of telling the app, no matter what screen size you’re running on, you have to follow these rules. So as a first example lets make a constraint that the top of this new view we have placed must always be positioned at the top of the screen. So to set a constraint, first click within the new view we created and then click the icon in the picture below found at the bottom of the main panel.


When you click this icon the constraints screen will pop up. From here you can set the constraints of how far the object you’ve selected will be from its nearest neighbour above, to the right, below and to the left. Also you can set the width and height of the object. For now, set the left, top and right constraints to zero. As the nearest neighbour in all three directions is the main view (ie the edge of the screen) this will lock our new view into position pushed against the top, left and right of the screen. Then select “add 3 constraints at the bottom of the constraints screen. In the picture below, I have only changed the top constraint and that is why it says “add 1 constraint”.


At this point lets take a note of a couple of things. First, in the main view you can now see that our new view has red lines on the top and bottom border. The reason for this is because, with the constraints we have given, the app knows how wide the view needs to be, it needs to fill the full width of the screen right? But it doesn’t know how high the view should be, all it knows is that it starts at the top of the screen but we haven’t given it  any rules about how far down the screen it needs to come.

We’ll fix that in a moment, but first lets just point out where we can see what constraints we have set for a specific object so far. Making sure our new view is selected, make sure the two icons circled below have been highlighted…


The very top right icon lets us see the attributes window which is the window on the right side of the screen in the picture above. If you are just writing code and you don’t need that window you can click that icon to hide it to give yourself a bit more space to work with. The icon inside the attributes window, that looks like a ruler, displays the sizing options for the object you have selected, including the constraints. If you scroll down a little you’ll see a section called constraints as you can see in the picture above. So here we can see constraints for trailing to, leading to and align top. What we want to do now, is give it the last bit of information it needs to know, which is how far down the screen the view should go.

To do this, click on the constraints icon we clicked earlier, and this time, in the height field, type in 120. (you can adjust this to your own taste later but for now this is close enough for us to work with). Make sure the height box is ticked before clicked “add 1 constraint at the bottom of the screen again. And voila, you should see the red lines in your view disappear. One last thing before we end this step 1 part of the tutorial, lets change the colour of this view so we can see it stand out easier in the future.

First click the icon circled in the picture below, next to the sizing options icon from our previous step. This is the attributes icon…



Within this attributes window, you can see an option for Background which I have circled in the picture above. Select this and choose a new colour for your view. You can see above I have selected an orange background.

So this is the end of the first step. It seems as though we haven’t achieved much yet, but we’ve got the boring bit of opening a new project out the way, and we’ve learned a little about constraints. All these windows and options will become more familiar over time with some practice.

So, onto the next step. If the post is not yet available, it will be soon! In the meantime leave any questions in the comments and I will respond ASAP.