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.
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.
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 firstname.lastname@example.org. 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…
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.