Lesson 1 of my tutorial. This will cover some of the basics of XCode and culminate in the creation of a single page App but with very limited functionality. This will not replace the plethora of information already provided by Apple, but it will hopefully provide a very easy to understand start on your first App.
In order to develop your App you need XCode installed on your Mac.
People have questioned whether a Mac has to be used or whether some hybrid or hacked Windows machine can be used. I am not proposing to write about this development on anything other than a Mac, and using any development tools other than those specifically supplied for this purpose, i.e. XCode. This tutorial hereafter assumes you already have XCode installed and you are ready to go. It also assumes you have no prior knowledge of XCode but have an awareness of iPhone and existing Apps, and some coding experience.
When you open XCode you need to Create New Product
You will then be presented with some templates that already exist for different Application types, and you can select any library files you may have created yourself during previous development. As this is our first develoment we will use a template. Each template when selected gives a brief summary of its use at the bottom of the screen. The templates available allow for a basic Navigation App, (suitable for displaying lists), a Tab Bar App, (the menu bar at the bottom of the screen), a Utility App, (for flip screens similar to the Weather Apps), an OpenGL App, (for games), a Window-based App and a View App.
The Window-based Application is the most basic of all of the templates. If you select this option you will have to create a view controller and add some code before you can even change the background colour of the screen for your App. If you wish to start at the very basic level and you wish to have a geater understanding of how XCode, the interface builder and your App works you should read Your First iPhone Application tuturial provided as part of Apple’s development tuturial set.
The view template is a good starting point so we will select this.
On inputting your chosen name for the App you are given the code and framework necessary for a basic App. This app can be built choosing the Build and Run action at the top of the XCode window.
Running it at this stage will start the simulator and present you with a blank grey screen. Your App has nothing to display at the moment and has no icon. We will change that by adding some buttons, text boxes and widgets, but first some information about the file structure of your App.
Structure Of Files
On the left hand side of your XCode window there is the name of your App at the top and then what looks like a number of folders. This is the structure your files are placed in.
- Classes = the source code for your App (.h for header files, .m for Objective ‘C’ source files)
- Other Sources = main and any code you may have imported (we will not be changing these files in this tutorial)
- Resources = Your User Interface files. (.xib for XCode Interface Builder files and .plist for properties file)
- Framework = Library files
- Products = Resulting App (Note: there could be many products)
Each file type is represented by a different symbol so they can be easily identified. Selection of the top level of the folders, i.e. your App name, results in all of the associated files being listed in the main XCode window.
The other folders of Targets, Executables, Find Results, Bookmarks, SCM, Implementation Files and Interface Builder files allow for different views of the same files and for source control and searching. Further information on these will be provided later as necessary.
Creating A User Interface
Within Resources select
This will open up Interface Builder and two new windows; one specifically for the ViewController.xib file and one for the View. It should also open two other windows; one showing the Library within Interface builder, and the other the Inspector window, (If it doesn’t these can be found under Tools).
The Interface Builder Library will display icons of the buttons, data views and bars you can use within your View. The inspector will allow you to change other aspects of your view such as the background colour.
It is worth looking at the different options available and having a play with different colour schemes and buttons/text input.
Some points to note
- It is necessary to save any changes to your view before choosing the Build and Run option within XCode, (By using File/Save in Interface Builder). Otherwise your changes will not be seen. It is also possible to ‘build and go in Xcode’ from within Interface builder (File->’Build and Go in Xcode’. It is also possible to use ‘File->Simulate interface’ to get a quick preview of a working interface (Note this runs only the interface elements it does not compile any code)
- Some of the methods/classes such as CoreLocation require extra Frameworks (libraries) to be linked against. They are added in Xcode via right clicking the project target icon and selecting getInfo as shown.
This brings up the following window.
Hit the + button to add a new framework
Select as appropriate.
Here is my first View 
And the resulting simulator screen
Next Tutorial
Once you are happy that you understand the different options and buttons you can use you will be ready to move onto the next tuturial. This will cover adding the necessary functionality behind some buttons so they actually do something.
Recent Comments