iPhone

Create a Hello World iPhone app

Learn how to implement the classic Hello World app for the iPhone -- no coding required. The tutorial also has the added bonus of supporting multiple orientations.

For my first iOS tutorial on TechRepublic, 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.

About

Todd Moore is an app developer, technology host, and published author. His most popular application, White Noise, has been downloaded by millions of sleep-deprived customers. Although his app has received critical acclaim in the press, the biggest co...

8 comments
Paul@PaulSchluter.com
Paul@PaulSchluter.com

I do not see the autosizing option? I do not get that additional grid that also shows the Example and positioning option? I get a brief flash of the it going to the Attributes frame, but it disappears immediately. going back to the Size Inspector does not show it. Any clues?

mhyde
mhyde

This does not seem to follow for 4.4.1. I do not see a "viewController.xib" file

tabet.tabet
tabet.tabet

Do you have a similar Apps tutorial for Android? Thanks.

gmeader
gmeader

After clicking on New Project, the Choose a template for your new project dialog appears. Which template should I choose?

bradhorne81
bradhorne81

can you actually load them on your device or only see the simulation? from what I know you need to be a registered (paid) iOS developer before you can post them in the app store. wasn't sure if they would also stop you on your own devices too...

toddmoore
toddmoore

Select "Single View Application" from the list of templates. I'll get the article updated. Thanks

toddmoore
toddmoore

You have to have an iPhone Developer Program Membership ($99 per year) to load apps on a device. Using the simulator doesn't require it.