Beginning iOS Development by James Anderson

DHSB THINKSPACE

Beginning iOS Development

WRITTEN BY JAMES ANDERSON

Beginning iOS Development Thanks to Steve Margetts, Kamran Malik and Étienne Fermie for their invaluable help and feedback throughout the process of creating this book.

First of all, let's start with a bit of background to iOS development. The App Store opened in late 2007 for developers like myself to submit apps to. Apple would then review these apps to verify that they were suitable for all ages. Since 2007, there have in total been over 500,000 apps on the App Store. That's a staggering amount, for a company who was only just beginning to uncover the success of the iPhone. Why should we be learning how to code? Perhaps a better question would be, "why not?". If developers out there can make millions of pounds from developing something which can help people with their everyday lives - why not? Of course, not everybody is as successful as the creators of Instagram or Angry Birds, but if you don't try - you'll never know. "Coding" sounds really geeky - I don't like the sound of it! Actually, I couldn't agree more! I hate the word coding. It just makes being a developer sound like somebody sat in a darkened room, all by themselves, coding away really quickly whilst hunched over their laptop. Developing iOS apps is far from that. It's quite possibly the "cool" end of the programming spectrum. Don't worry about starting out as an iOS developer; you will not turn into a zombie! How do I start? It's super easy! Firstly though, you need a Mac. Unfortunately the software does not run on Windows. Not to fret though - if you get £2 pocket money a week and roughly £150 for both your birthday and Christmas, you could buy an iMac in just over two and a half years! This is, of course, before you start making your millions from developing apps. Download Xcode from http://developer.apple.com or the Mac App Store (this might take a while as the installation file is > 4GB) then open it up. We're going to create a countdown app to Easter! To begin with, we need to figure out how this app is going to be created - step by step. © Image taken from haymarket for educational, non-commercial purposes

Open Xcode and create a new project

2 1) We need to create a view ( UIView inside a NIB) where the user can set a date (NSDate) to countdown to. 2) There needs to be a button (UIButton) which allows the user to start the countdown and another button which gives them the ability to stop/reset the countdown. 3) When the user taps the "Countdown" button, we need to check what the current date is and compare it to the countdown date given by the user. 4) A label (UILabel) needs to be added to the app to give an indication to the user how long is left before the date is reached. 5) When the user closes the app, the data will need to be saved for when the app is next launched (NSUserDefaults). 6) When the app is relaunched, the data will need to be loaded and the countdown date label updated. Ok, now we know the structure of the app, we can begin developing it.

Select â&#x20AC;&#x153;Single View Applicationâ&#x20AC;? 3

Click on ‘ViewController.xib’

6 Fill out the text fields like so

4 You should be able to see this left-hand sidebar (if not, make sure the buttons on the toolbar - shown below - are selected)

Click on ‘View’ under objects. Now change the background colour to white instead of grey

Now drag a UIImageView onto the View and make sure that it fits the entire screen 4

I have provided you with some user interface graphics in the folder named ‘Resources’. Drag in the file called ‘MainBackground.png’ and drop it under ‘ViewController.xib’

Click on the UIImageView and type ‘MainBackground.png’ into the image textfield

Make sure that the screen looks like this (with ‘Copy items into...’ unchecked) and hit ‘Finish’

Now drag a UILabel onto the view (on top of the UIImageView)

your project, like you did for the background image in steps 8 & 9. Type ‘CountdownBackground.png’ in the image textfield.

14 Reposition the UILabel (to the centre) and make the text larger. Also feel free to change the colour and font, but remember that the chosen font needs to be clear to read. I would personally recommend that you use Helvetica Neue Light for most standard text, or bold for titles.

13 You can now add another image which will be used as the countdown background. Drag a UIImageView in and import ‘CountdownBackground.png’ into

Hit enter and make sure that the image content view size is ‘Aspect Fit’. This makes sure that this image is not stretched in an odd way. Try using ‘Scale To Fill’ and you’ll see that the image has been disproportionally stretched. Finally it should look like this (see the image diagonally to your left) However, there is no point having the image if there are no numbers on it. Let’s drag in some UILabels to place on top of the background. 6

Drag them in from the right-hand sidebar. We need eight UILabels in total. One each for the days, hours, minutes and seconds.

16 On each label (or click one then hold shift and click the rest to change all of them), change the text colour to white. Then change the text ‘Label’ to ‘0’. Make sure the text size is big enough (about 30px). Make the font weight bold. Also change the text alignment to ‘center’.

17 Your view should now look like this. It’s time to add some buttons. Remember when we were planning this app and we wanted to put in two buttons? One for starting and one for stopping / resetting the countdown. We can add these in now. Drag two UIButtons into your view and resize them so that they look good. Once you’ve done this, rename the buttons. One is titled ‘Begin Countdown’ and the other is titled ‘Stop Countdown’.

Change ‘Rounded Rect’ to ‘Custom’ on both of the buttons. 7

Drag the two files named ‘BeginCountdown.png’ and ‘StopCountdown.png’ into your project (just like you did for another image in Steps 8 & 9).

You can set the button’s image to each of those files, obviously depending on which button it is. So the first button will have the image ‘BeginCountdown.png’ and the other will have the image ‘StopCountdown.png’.

20 You now need to change the dimensions of the button. Now, as we are on the ‘Attributes Inspector’, you will need to click on the next button on the toolbar at the top to change inspectors as from this view, we cannot change the dimensions of the button. Change the width to ‘233’ and the height to ‘60’. Do this for both buttons. These values are very important, because unfortunately UIButton images cannot be proportionally scaled from the NIB file (the file you are currently editing). It can, however, be achieved by using code but we’ll use these known values for the moment.

Your view should now look something like this. All we are missing now is the ability to set the date and time to countdown to. Let’s create a new UIView inside the current UIView to add this in. Drag a new UIView into the existing one, like so:

Position it sensibly and make the background colour clear. You can do this by clicking on the new UIView and on the right-hand sidebar (Attributes Inspector), you can set the background colour:

Choose ‘Clear Color’

Drag in a UITextField and resize it like so. Now add a UILabel to the left-hand side and again, resize it. Align the text to the right.

23 Click on the UITextField and where it says ‘Border Style’, select the button highlighted in red (see demo on the left). Import the image ‘TextFieldBackground.png’ from the ‘Resources’ folder into the project. We’re going to set this as the background image for the UITextField. Click on it and enter ‘TextFieldBackground.png’ to set the background. 9

Add a UIButton titled ‘Choose Date’. Resize this so it looks good (see image above). Like with the ‘Begin Countdown’ image, we can change this button to a custom one and set the image to ‘ChooseDate.png’. However, remember to import the image first. Use the following dimensions: ‘217’ for width and ‘56’ for height. You can change the dimensions, just like you did in Step 20. This is how it should look now:

There’s a problem - the UIDatePicker overlaps the other UI elements, which looks unprofessional and is impractical. To sort this, we’re going to add some animations! Before we can do that, we need to hide the UIDatePicker and link up that ‘Choose Date’ UIButton. Hide the UIDatePicker by selecting it and in the sidebar on the right, make sure ‘hidden’ is ticked. Now for the code!

26 Now we’re going to start adding some code in the project. Open ‘ViewController.h’ and you should see a view like this:

25 Add a UIDatePicker to the view, just below that last button we edited.

27 In between the @interface line and @end line, add a new line by pressing ‘Enter’. Add some brackets and add the following text, like so: IBOutlet UIButton *chooseDateButton; Copy the above code like so:

Now open ViewController.xib again and click on the ‘Choose Date’ button: On the right-hand sidebar, click on this button to show the ‘Connections Inspector’.

Now add this code below the closing bracket: -(IBAction)doChooseDate;

Click and drag from the ‘Touch Up Inside’ button to ‘File’s Owner’ then select ‘doChooseDate’, as shown here:

28 Now the UIButton’s action has been linked up with the UI. So we can go back to ‘ViewController.m’, and add the method for this action.