3 March 2009

Author

Jan Vantomme

Categories

iPhone
Tutorial

How to create a FullScreen iPhone Application

In this short tutorial I’m going to show you how to build an FullScreen iPhone application. This article might be useful for everyone who wants to create a game for the iPhone platform. You will need the Apple Developer tools and the iPhone SDK installed on your computer to finish this tutorial.

Take 1: Interface Builder

Create a new project with the View-Based Application template.

Create a new View-Based Application

Double-Click FullScreenViewController.xib to open Interface Builder.

Double-Click FullScreenViewController.xib to launch Interface Builder

Go to the Attributes Inspector panel (Shortcut: Cmd + 1) and set Status Bar to None.

Set Status Bar to None

Go to the Size Inspector panel (Shortcut: Cmd + 3) and resize the View to 320 by 480 pixels.

Resize the View to 320 by 480 pixels

Save your file, close Interface Builder and go back to your XCode project. Click Build and Go to run your application in the iPhone Simulator. You will see that the Status Bar is still there.

Build the Application and see the Status Bar in iPhone Simulator

Take 2: Edit the Info.plist file

Double-Click Info.plist file in XCode to edit the file. Add an extra Key/Value pair and set its Key to UIStatusBarHidden.

Add the UIStatusBarHidden key to the Property List

Change the Value Type of UIStatusBarHidden to Boolean. A checkbox will now apear in the value column.

Change the Value type of UIStatusBarHidden to Boolean

Click the checkbox to do the FullScreen magic.

Click the checkbox to hide the Status Bar

Build the Application again and see that the Status Bar is now hidden in the iPhone Simulator.

The Status Bar is now hidden in iPhone Simulator

Download the project

You can download the example project.

Top · Tweet about this

Browse Articles

5 Opinions posted so far. Now go post your own. To the comment form!

  1. From:Harold Campbell
    Date: 5 April 2009, 07:25

    gravatar

    This works exactly as described. Thanks.

    Top · Permanent link to this comment

  2. From:Jan Vantomme
    Date: 5 April 2009, 19:30

    gravatar
  3. From:Mark
    Date:24 January 2010, 23:21

    gravatar

    Nice tutorial, much easier than other full screen methods and very nicely explained. Thank you!

    Top · Permanent link to this comment

  4. From:BUDDAx2
    Date:25 April 2010, 21:39

    gravatar

    Its nice. But how to create one view without status bar and other one with?

    Top · Permanent link to this comment

  5. From:Jan Vantomme
    Date:26 April 2010, 16:46

    gravatar

    You can hide or show the status bar programmaticaly with this line of code:

    [[UIApplication sharedApplication] 
        setStatusBarHidden:YES animated:NO];

    Top · Permanent link to this comment

Commenting is closed for this article.

Subscribe to this blog

About this blog

This is the personal weblog of Jan Vantomme.
I write about the everyday things that move me as a designer. I write shorter things on Twitter.

Add to Technorati Favorites

Some of the blogs I like

Subtraction
A blog on design by Khoi Vinh
Adaptive Path
A blog on User Experience
All In The Head
Ponderings and code by Drew McLellan
Extending Grapplica
A blog on graphic design by Lander Janssens
Shaun Inman
A blog on web design and development by Shaun Inman