[iPhone] Tutorial - Create a Hello World iPhone app

Create a Hello World iPhone app

For my first iOS tutorial, I will describe how to create the typical Hello World application for iPhone, which we will build on in future posts. I assume you have an Intel-based Mac with Xcode installed.

1. Launch Xcode and create a new project by clicking the Create A New Xcode Project button on the splash screen (Figure A). Or, if you dismissed the splash screen, you can select File | New | Project from the menu. Select Single View Application from the list of templates.
Figure A

2. Verify that all of these options are set in the next dialog box (Figure B) - if you don’t, you will have problems following this tutorial:

• Product Name is Hello.
• Device Family is set to iPhone.
• Use Storyboards is not selected.
• Use Automatic Reference Counting is selected.

Figure B


The project will be created and set up with specific files based on these initial settings.
3. Click Next and pick a location to store the project. Xcode will create a Hello folder under whichever folder you select.
4. Build and run the application by selecting Product | Run from the menu or by pressing Command-R. You should see iPhone simulator launch and the application running inside of it. The app currently displays a blank grey view (Figure C).


Figure C


5. The app already supports multiple orientations. In order to test this in the simulator, you can select Hardware | Rotate Right from the menu. Notice that it will rotate into portrait and both landscape orientations.

6. Click the main project file from the file navigator to view a Summary of the project (Figure D); this allows you to set the Bundle Identifier, Version, supported Devices, Deployment Target, Initial Orientations, Icons, and Splash screens. All of these settings are specified in the Info.plist file, which you can get to by clicking the Info tab. However, most of the common things you will modify are in the Summary tab. I will skip over all of the settings that are available to your app, but you should learn them prior to submitting to the App Store.


Figure D


7. Open the ViewController.xib file. This brings up the Interface Builder editor, which allows you to create your initial view. It should look similar to the grey view you saw when you ran the application. This is the initial view that gets loaded by the app. Make sure the Utilities panel is visible, and the Object library is displayed. Drag a Label into the view and resize it to fit most of the screen with a small margin. Click the Attributes Inspector and change the Text to Hello, Alignment to center, and Font size to 100. The label should look like Figure E.


Figure E


8. Build and run in the simulator, and notice that our label appears (Figure F).

Figure F


9. Rotate the simulator into landscape mode; you’ll notice that the label does not stay in the center once it rotates into a landscape orientation. You can fix that by opening the ViewController.xib file, clicking the label, and switching to the Size inspector. Locate Autosizing and notice that it is bound to the top and left sides of the view (Figure G).

Figure G


9. Remove those settings in order to keep the label centered, and enable resizing of the width and height. Autosizing should look like Figure H.

Figure H


10. Run the app in the simulator and then change the device orientation to landscape. Notice that it rotates and keeps the label perfectly center (Figure I).

Figure I


That’s it! The classic Hello World app was implemented without coding, and we get the added bonus of supporting multiple orientations. In my next TechRepublic tutorial, you will do some coding to turn this application into a functioning clock.