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.