DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Universal Launch Images with PhoneGap

Universal Launch Images with PhoneGap

Remy Sharp user avatar by
Remy Sharp
·
Aug. 31, 10 · Mobile Zone · Interview
Like (0)
Save
Tweet
3.09K Views

Join the DZone community and get the full member experience.

Join For Free

I've been playing with PhoneGap a lot recently, in part to prepare Marbles2, but also to bring JS Console to the iPhone as a native app. I've always wanted to create an app that worked on all devices, but getting the launch image correct for each device can be tricky.

How the launch image works on PhoneGap

Basically there's two launch images. Once for the native app and once (manually by PhoneGap) whilst the UIWebView (aka Safari) is loading up. The native one is handled by the app as per the documentation on the Apple developer site, but the overlaid image is hardcoded to 'Default.png'. This is what we'll fix.

Changes to PhoneGapDelete.m

To get the three devices to work properly, you need to make a change to PhoneGapDelete.m. Changing the following line†:

UIImage* image = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Default" ofType:@"png"]];
imageView = [[UIImageView alloc] initWithImage:image];
[image release];

To:

UIImage *image = [UIImage imageNamed:"Default"];
imageView = [[UIImageView alloc] initWithImage:image];
// [image release]

† Note that I've not learnt Objective-c, I've just messed around and Googled enough to get to this point!

imageNamed

The reason we switch from initWithContentsOfFile to imageNamed is for two reasons:

  1. initWithContentsOfFile is also using the bespoke pathForResource which returns the full path to the file, which we don't want as I'll explain.
  2. initWithContentsOfFile apparently doesn't correctly pick up the @2x resources for the iPhone 4 retina displays

Adding the Launch Images

Now you need to create three images, for:

  1. iPhone 3GS and below
  2. iPad
  3. iPhone 4 double resolution

The details of the resolutions are available Apple's developer reference.

The iPhone 4 image is easy, you call it Default@2x.png and drag it in to the xcode project. The iPhone 3GS (and below) image is called Default.png and also dragged in to the project (there will probably already be a phonegap default image that you'll overwrite). Finally the iPad image needs to be called Default~ipad.png.

This only works because we've made the change to use initWithImage because it'll automatically detect the device type and add the extension.

One Final Tip

If you notice that when your app loads the launch image jumps, it's because the phonegap UIWebView is (incorrectly) offset by negative 20 pixels - we can fix this too.

Michael Brooks wrote a really elegant little bit of code that fixes the offset in the web view that's also contributing to the launch image jumping.

Add the code from this gist http://gist.github.com/510407 to your *AppDelegate.m (in that if your app is called jsconsole, add the code to jsconsoleAppDelegate.m).

Once that code is in, you'll have your universal phonegap app with launch images all in the appropriate size for the app.

I used this technique for the iOS version of JS Console (though I'm not totally sure it'll get accepted to the itunes store!!!).

Finally, if you want to learn more about PhoneGap, my conference Full Frontal, is running a full day workshop with Brian LeRoux entirely on PhoneGap, so check it out!

From http://remysharp.com/2010/08/30/universal-launch-images-with-phonegap

app

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Deployment of Low-Latency Solutions in the Cloud
  • Why I'm Choosing Pulumi Over Terraform
  • Modernize Legacy Code in Production: Rebuild Your Airplane Midflight Without Crashing
  • Choosing Between GraphQL Vs REST

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo