Optimizing apps for Apple's Retina Display

Published on August 4, 2010

The iPhone 4 features a high resolution display called 'Retina Display' with a resolution of 640 by 960 pixels, resulting in a really high level of detail in comparison to the iPhone 3GS or older models.

Because of the higher resolution, the iPhone 4 requires some efforts from developers to optimize their apps for the iPhone 4. Standard UI controls are displayed perfectly by default, but graphics created by the developer have to be optimized by them, basically making them twice as big.

Unfortunately as of yet, lots of developers still need to do so. Many of the apps I have installed on my iPhone still have low-res graphics. This is too bad, because even now the iPhone 4 has this amazing display, these apps actually look (a lot) worse than on the 3GS.

Optimizing your apps

As I said above, optimizing the graphics basically means making them bigger. When designing your interface, do so on a 640 by 960 pixel canvas. When running your application in the iPhone Simulator, you can set the device on iPhone 4. This will give you a full-sized display on your Mac. If your application looks great this way, you've done a good job.

Some applications feature more graphical content than others, for example apps with lots of photos or videos. In some scenarios it might be desirable to provide different sized content depending on the iPhone model being used, because older models are less powerful and have less memory available for your application. If you experience performance issues with high-res iPhone 4 optimized content you might want to present low-res content to older models.

Displaying graphics depending on the device model can be done by duplicating image files and adding an '@2x' suffix. So, when the normal image file is named 'button.png', the hi-res version should be 'button@2x.png'. You don't need any additional code for this. In Interface Builder or your code, assign the normal version (without the suffix) to an object. The same goes for the application icon. The resolution of the 2x icon should be 114 by 114 pixels. You will need to add a separate 'Icon' property in the Info.plist file for this icon.

If for some reason you do want to perform a check in your code, you can do so by checking the scale factor of the display. Older models will return a scale factor of 1.0, while the iPhone 4 will return 2.0. You can check this with:

float factor = [UIScreen mainScreen].scale;

Depending on the type of application you're developing further optimizations can be made to utilize the new retina display the best you can. If you are a registered iPhone developer, I recommend watching the WWDC session 134 ('Optimize your iPhone App for the Retina Display') video, available on iTunes.

Video: WWDC Session 134 - Optimize your iPhone App for the Retina Display (requires iPhone developer program membership)

1 Comment

[iPad] Tutorial: Creating a PopoverController

Published on April 3, 2010

This tutorial explains what PopoverControllers are and how you can use them to create Popover's in your iPad application. To be able to follow this tutorial, you'll need the iPhone OS 3.2 SDK. Older versions for the iPhone itself cannot be used to create Popovers.

Popovers, what?

A Popover is a 'popup' view displayed on top of your regular iPad application interface. In this view, you can do whatever you like, such as providing the user with options or displaying additional functionality, usually related to the object you tapped on that triggers the popover. The main advantage of popovers is that they show up on the same screen, instead of replacing it like on the iPhone or iPod touch.

Let's get started

If you're not working on a project yet, the first step is of course to create one. To use Popover's it doesn't matter what kind of project you start, as long as you don't forget to set the product on 'iPad'. For this tutorial, I'll be sticking to the 'View application'.

When your new project is loaded, you'll notice a default view has already been created with the name of your project followed by 'ViewController.xib' in the Resources folder. I called the project iPadTutorial, so my main view is called iPadTutorialViewController.xib

The next thing to do is setup a basic interface to attach the Popover to. There are two ways to 'attach' a Popover to your interface, the first is by attaching it to a BarButtonItem, the second way to attach it to a pre-defined rectangle. With the last option you can basically attach it to any place on your iPad screen, but for now I'll use the first one.

Open the .xib of the main ViewController in Interface Builder and drag the following objects from the Library to your view:

Your interface should now look like the screenshot below. You can further create your interface of course, but for this tutorial, right now this is all you need.

Now let's return to Xcode. Since we're busy with views, let's just create the second view we'll be using for the Popover too. Click the File -> New File menu item, and pick the 'UIViewController subclass' item. Make sure that at the options panel the options 'Targeted for iPad' and 'With XIB for user interface' are checked. Click next and give it a fancy name. You can create the interface for the Popover view yourself, but just to check if it's correctly being loaded, add a UILabel or something.

We're done with the XIB files for now. Open the header (.h) file for your default View Controller so we can write some code.

In the header file we'll create the objects for our PopoverController, the UIBarButtonItem and of course the PopoverView itself.

@interface iPadTutorialViewController : UIViewController {
	UIPopoverController *popoverController;
	IBOutlet UIBarButtonItem *popButton;
	MyPopOverView *myPopOver;

- (IBAction)showPopover:(id)sender;
@property (nonatomic, retain) UIPopoverController *popoverController;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *popButton;
@property (nonatomic, retain) MyPopOverView *myPopOver;

You might notice the IBAction shown in the code above. This is the action called when you'll be clicking on the button to show the Popover. More on this later on.

Also synthesize these objects in the main (.m) sourcefile of the view.

@synthesize popoverController, popButton, myPopOver;

To attach these objects to the corresponding objects in the XIB file, we need to do a few things in Interface Builder. Open the .xib file and go to the Document window. You'll see 3 icons here, File's Owner, First Responder and View. For now, we only need the first one. Hold the icon while pressing the CTRL-key, and go the the Bar Button Item you've created earlier. You'll see a blue line following your mouse until you release it on the Button. A black popup should show up with in it the name you gave the UIBarButtonItem in the source. Click this name. The Button in the source and the one in the interface are now the same object. The second thing we need to do is attach the button the the IBAction we created. This is done by doing the previous step in reverse. CTRL-click on the BarButtonItem, and drag the blue line to the File's Owner icon. Then click the name of the IBAction in the black popup, and that's it. Save the .xib file and close the Interface Builder.

The final part of this tutorial is making the popover actually show up when you click the button. This will be done in the showPopover action we created earlier.

The first thing to do is check whether or not the popover is already visible. If so, we'll just hide it instead of drawing a new one over it. This can be done with the isPopoverVisible property (The exclamation point on line 1 means 'not'):

if(![popoverController isPopoverVisible]){
	// Popover is not visible

The next thing is to initialize the Popover-view with the XIB file, and attach the view to the controller. Add the following lines:

myPopOver = [[MyPopOverView alloc] initWithNibName:@"MyPopOverView" bundle:nil];
popoverController = [[UIPopoverController alloc] initWithContentViewController:myPopOver];

Make sure the name behind 'initWithNibName' exactly matches the filename of the popover view, without the .xib extension of course.

Now let's actually make the popover show up with the following line of code:

[popoverController presentPopoverFromBarButtonItem:sender permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];

The sender value of the presentPopoverFromBarButtonItem parameter will cause the popover to show up attached to the button that triggered the showPopover action. With permittedArrowDirections you can specify which directions the popover may be shown. This can be all 4 directions, or Any if you don't care. For now, let's leave it on Any.

The last thing to do is make sure the popover disappears when it's already shown. To do this, add the following code to the 'else' block:

[popoverController dismissPopoverAnimated:YES];

When you'll click on the button with the popover already visible, it will now simply fade out.

That's it

When you'll launch your application in the iPad simulator you should now see the interface you created at the beginning. Click on the button in the Navigation Bar to make the Popover appear.

Congratulations on your first Popover-using iPad app.

One more thing...

As previously stated there are two ways to attach the popover to your regular view. We discussed the first way in the tutorial, but I can imagine attaching the popover to the Navigation Bar isn't always what you want, so here's the other way.

You can also attach the popover to a rectangular area in your main view. Depending on where it is positioned, it will appear at any side of it. The code for attaching it this way is almost identical to the first, except of the usage of presentPopoverFromRect instead of the FromBarButtonItem, like the example below:

[popoverController presentPopoverFromRect:CGRectMake(10.0f, 10.0f, 10.0f, 10.0f) inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];

The parameters of CGRectMake are x, y, width and height.


If you got any additional questions about this tutorial, leave a reply or contact me by email (See the contact page). Good luck with developing your iPad application.

Updated on April 10, 2010: Fixed an error in the code under the 'One more thing...' caption


Click here to download the source.


Dus jij wilt een iPhone app maken? (Part II)

Published on December 7, 2009

This article is part of a school assignment and therefore written in Dutch.

Het programmeren

Je hebt je applicatie nu ontworpen, dus is het tijd om te gaan programmeren. Apple biedt op zijn website een uitgebreide 'Reference Library' aan waarin alle frameworks uit de SDK gedocumenteerd staan. Wil je jouw applicatie (hopelijk) goedgekeurd krijgen is het van belang dat je enkel de gedocumenteerde frameworks gebruikt. Als je niet-officiële frameworks gebruikt zal je applicatie bij voorbaat al afgekeurd worden.

De bij de SDK meegeleverde Xcode software bevat standaard diverse tools om fouten in je code op te sporen of om te testen op welke punten je jouw applicatie nog kunt verbeteren. Gebruik deze tools. Je wilt niet dat je applicatie crashed als Apple deze aan het testen is, dus spoor problemen op en verbeter deze bij voorbaat al. Zo is de kans groter dat je applicatie een stuk sneller goedgekeurd zal worden.

Het testen

Als het programmeerwerk (zo goed als) afgerond is, is het tijd om te testen. Bij kleine applicaties is dit goed zelf te doen, maar bij grotere en meer complexe applicaties (denk bijvoorbeeld aan games) kan het geen kwaad hier meerdere personen voor in te schakelen. Op deze manier kun je jouw applicatie op verschillende iPhones testen, bij voorkeur verschillende varianten (Een applicatie als een game kan op de nieuwste iPhone 3GS bijvoorbeeld prima werken, maar op een originele iPhone 2G totaal onspeelbaar zijn). Problemen die je tijdens het testen tegenkomt kun je nu nog herstellen alvorens je jouw applicatie indient bij de App Store.

Het publiceren

De laatste stap is uiteraard het gepubliceerd krijgen van je applicatie. Dit is helaas ook het punt waar het ontwikkelen voor de iPhone stopt met gratis zijn. Om je applicatie in de App Store te krijgen moet je een betaalde iPhone developer worden. Dit kost je omgerekend €79 per jaar. Voor dit bedrag heb je toegang tot alle materialen op de Apple Developer website, de Developer Forums en iTunes Connect. Dat laatste heb je nodig om de applicatie in te sturen ter goedkeuring.

Als je via iTunes Connect je applicatie opstuurt naar Apple wordt deze door Apple reviewed. Dit kan soms een flinke tijd duren, maar als alles goed gaat krijg je vanzelf een mailtje met de mededeling dat je applicatie geplaatst is in de App Store. Vanaf dat moment kan elke iPhone of iPod touch-eigenaar ter wereld (of in ieder geval in de landen waarin jij je applicatie aanbiedt) jouw nieuwe iPhone applicatie downloaden en gebruiken.


Dus jij wilt een iPhone app maken? (Part I)

Published on December 7, 2009

This article is part of a school assignment and therefore written in Dutch.

Het maken en publiceren van een iPhone applicatie is makkelijker dan het lijkt. Dit artikel gaat in het kort langs de stappen die je volgt bij het maken en publiceren van je applicatie.

Het beginnen

De eerste stap bij het maken van een iPhone applicatie is het downloaden van de iPhone SDK. Hiermee heb je toegang tot de frameworks die je nodig hebt om je applicatie te maken. Om de SDK te kunnen downloaden is een registratie noodzakelijk, deze is overigens geheel gratis.

Kennis van Objective-C of andere programmeertalen is handig voordat je aan de slag gaat, maar ook zonder kennis kun je ver komen. Apple biedt zelf een aantal 'Getting Started' videos aan, en ook op het internet zijn veel tutorials te vinden voor de startende (maar ook de gevorderde) iPhone ontwikkelaar. Een voorbeeld van een dergelijke site is de weblog iCodeBlog.

Het bedenken

Het kan zijn dat je bij voorbaat al een goed idee voor een applicatie hebt. Als je een idee hebt is het altijd handig eens door de App Store te bladeren om te kijken naar eventueel vergelijkbare apps. Het zou immers een verspilling van tijd zijn als je na het ontwikkelen van je applicatie erachter komt dat iemand anders je voor is geweest.

Als je nog geen idee hebt wat je wilt maken kan de App Store ook een hulpmiddel zijn, maar dan om juist ideeën op te doen. Bekijk eens wat applicaties en bedenk hoe jij daar een waardevolle toevoeging aan zou kunnen doen.

Het ontwerpen

Een van de belangrijkste dingen om te onthouden wanneer je jouw iPhone applicatie gaat ontwerpen is: Keep it simple. Een belangrijk kenmerk van succesvolle iPhone applicaties is het gebrek aan functionaliteit. Kies een doel voor je applicatie, en beperk je applicatie tot dat specifieke doel.

Voor het ontwerpen van de interface voor je applicatie kun je de Interface Builder gebruiken. Hiermee kun je door middel van drag & drop redelijk snel een interface in elkaar zetten, en in de iPhone Simulator uit proberen voordat je gaat programmeren.


Working on something new...

Published on October 23, 2009

Recently I started working on a new project, again a small game (see the screenshot below). It's a snake-like game which you can play single, against your iPhone/iPod touch or against other players. Though it's far from finished, the screenshot below should give an idea on what it's gonna be like. Updates will follow as development continues.


Financial report for July... $0 earned

Published on September 1, 2009

Last week I received a mail from Apple with the financial report of July. Since my only app Hit It! is available for free, it wasn't a big shocker that I haven't earned a single dollar. Meanwhile, Hit It! sales continue to grow slowly, now with an average of 2 or 3 downloads a day with a total of 496 in the past month. Not exactly a huge success, but since it's my first app, I'm happy at least some people are downloading it.

I'm also working on an app update for Hit It! with some bug fixes and implementations of some stuff that seem to be missing in the current version.

1 Comment

Hit It! Ready for Sale

Published on July 20, 2009

After 'only' 13 days of reviewing, Hit It! was approved yesterday and it now available in the App Store. It's directly accessible by the link below or just by searching on the name in the App Store.

Link: http://www.itunes.com/apps/HitIt%21.


Naming issues and iTunes Artwork

Published on July 8, 2009

This morning when I ran the latest Hit It! build on my iPhone I noted that the space I removed from the filename also had a negative effect on the display name. Meanwhile I learned that there is a special property in the Info.plist for the display name on the iPhone called 'Bundle Display Name'. After re-adding the space here, the iPhone showed the correct app name.

Another thing I noted was the lack of an icon in the iTunes Applications-overview. Google helped me out and after adding a 512x512 icon under the name of 'iTunesArtwork' to the project's root folder, this worked as well.

I just re-uploaded my binary with correct naming and artwork, now let's see how long review takes.


Hit It! on it's way!

Published on July 5, 2009

My first iPhone app, a small game called Hit It! is finally in review. After a few days of cursing and browsing the web for solutions why my app couldn't be uploaded, I finally figured out it's was a fricking space in the App's name.

Now there must be a way to allow spaces in an App's name, I just haven't figured out how yet. In the mean time, I decided to just get rid of the space to allow the app to be uploaded through iTunes Connect.

The current status is 'In review', so now it’s just waiting until it gets approved... or rejected...