Design Programming with Apple SDK - Part 3

Go back - Design Programming with Apple SDK - Part 2

Testing your App in the Simulator

When you are ready to test your app in the iOS Simulator simply click on the Run button in the upper left of the main Xcode window. The first time you do this, you may be asked to set the computer in Developer Mode. Choosing Yes and entering your password will save you the trouble of entering your password each time you use the iOS Simulator.

Since we chose the iPhone option for our target device, we should choose to use the iPhone Simulator for our testing device. You can set this by clicking the Scheme to the right of the Run button.

The iPhone Simulator should now run, showing the progress of our App so far. At this point we should have a working App – although the only thing our App does at this point is to display a white screen. So let’s add some functionality.

Adding objects to our App

In the Navigator area on the left of the window, click on the MainStoryboard.storyboard file. This should display a canvas that looks like an iPhone. Next we need to open the object library.

To open the object library we need to first make sure that our Utilities area is open. This is done by clicking the right view button on the top right of our window. In the bottom of our Utilities area we need to open the objects library by clicking the little button that looks like a box; this should be the second button from the right, about a third of the way from the bottom of the Utilities area.

Now that we have the Objects library open we can add some items onto the canvas. Within the Objects library, choose Controls from the pop-up menu that says Objects; this will narrow down our list of objects to make it easier to find what we are looking for. First we drag a Label from the Object library area onto the canvas. Then we drag a Round Rect Button onto the canvas. These are the only two items we will need for now.

Once the view items are on the canvas, it is easy to move them around by dragging them to the desired location; alignment guides automatically show up to help you align your view items. You can also adjust the size of the view items by clicking on the view item on the canvas and dragging any of the square resize handles that appear.

You can enter in text for the Label by double-clicking it and typing in the text. Now we are going to add “Button has not been pressed” as the text for the Label. An alternative way of doing this is by going to the Attributes inspector. You get to the Attributes inspector from the Utilities area. On the top part of the Utilities area clicking the forth button from the right – the one that looks like an upside down house – should open the Attributes inspector. You can also hover the mouse over these buttons to see what do.

In the Attributes inspector, when the Label is clicked, you should see an area to input the text for the label. There are also options for text color, font size and alignment. For now let’s just make sure that the text is set to “Button has not been pressed” and set the alignment to center. Now we can adjust the size and location of our Label to our liking.

The options for the button work the same way. For now the only thing we need to do to the button is to set the text to “Press Me.” This can be done through the Title option in the Attributes inspector or by double clicking on the button on the canvas.

If we like, we can test the app in the Simulator to make sure that the view items are showing up as we expect. Of course the button does not do anything at this point. Let’s fix that.

Read Next - Design Programming with Apple SDK - Part 4