It is remarkably easy to do so and I implore all all iPhone developers to please upgrade all their apps to support the Retina Display on the iPhone 4, otherwise your app just looks blurry.

What Apple achieved with the Retina Display is a remarkable feat. The screen is still exactly the same size of 3.5 inches but where you used to have 1 pixel you now have 4. This means UI elements are scaled exactly by 2.

Developers were always told to design for a screen resolution of 320×480 pixels, so don’t I need to change my UIViewControllers to have a different size?

Well no, and this is how Apple have been incredibly clever. The screen dimensions are now 320×480 points, and not pixels so in your UIViewController you still have the size 320×480. With me so far?

Images

Ok so lets say I have an image that needs to span the width of the screen and is only 100 pixels high on an iPhone 3G or 3Gs we simply embed an image of 320pixels by 100pixels. So that image that we’ve called banner.png, for example, looks perfect on those old devices but they look blurry on the iPhone 4.

I can hear you asking, if the screen is 320points wide but is actually 640pixels wide, how do I provide both an iPhone 4 and iPhone 3G(s) version of this and how much code does it take.

Well my answer is, very easy and zero, that’s right, zero code modifications.

Now you did have a high resolution, or vector version of your artwork right? Ok well open it up and scale it to exactly double the size of the original file. So you’ll now have an image that is 640×200 pixels and save it as banner@2x.png (as the original was called banner.png). Add the new image to your resources in your XCode project.

You can call your image in exactly the same way as before

UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,320,100)];
[myImage setImage:[UIImage imageNamed:@"banner.png"]];
[self.view addSubview:myImage];
[myImage release];

When you run your app on your iPhone 4 (or the iPhone 4) simulator the image will magically use the banner@2x.png version instead. Clever isn’t it!

Default splash images

This is exactly the same as for images, just include a Default@2x.png image in your bundle and the iPhone 4 will use it instead.

Springboard App Icon

Ok now this one is a little more complicated, but not by much. If you’ve already designed a Universal (iPhone and iPad) app then you’ll be familiar with this technique, and actually there are a couple of ways to do it but I’ll explain the one from the Apple Docs.

If you want to still provide support to iOS 3.1.x and below you’ll still need a

CFBundleIconFile

with Icon.png in it for your Info.plist but you should now also include an array entry of

CFBundleIconFiles

Include an Icon.png file, this is your non-iPhone 4 57×57 file
Include an Icon@2x.png file, this is your iPhone 4 114×114 file.

Yep once again it really is that simple.

Conclusion

If you have an app that simply uses SDK UI Elements and/or images, which the majority of iPhone app do, then you simply have no excuse not to support the Retina Display… so what are you waiting for, go cut graphics and submit!

So as promised here is the final part of my MapKit tips and tricks using the iPhone SDK.

Sorry it’s a little later than I intended as I wanted my version of the feature live in the AppStore before I published the article.

So we’ve seen before how to create a simple map, well now let’s see how to create a really small thumbnail sized version like this (sorry there is no anti-aliasing, the iPhone simulator doesn’t support it on MapKit, works fine on the actual device though!)

In my version, I take this code and add it to a much larger view controller like this

A bit of shameless plugging: this comes from Tweetings for the iPhone

I won’t cover anything more to this other than getting the map to a state where you can add it to any view of yours using the [object addSubview:mapView] call.

Generating the map

This is the same as generating a large map, that we’ve covered before, except the frame will be of a different size, however the most important factor here is we are going to scale the map

float scaleBy = 0.80;
MKMapView *mapView = [[[MKMapView alloc] initWithFrame:CGRectMake(-5, 0, 100/ scaleBy, 50/scaleBy)] autorelease];
mapView.delegate=self;
mapView.layer.cornerRadius = 10.0; // Make the corners rounded
mapView.opaque = NO; // If you are using in a UITableView never set to YES!
mapView.scrollEnabled = NO; // Don't allow user interaction
mapView.zoomEnabled = NO;
mapView.layer.borderColor = [UIColor colorWithWhite:0.0f alpha:0.5f].CGColor;
mapView.layer.borderWidth = 1.0f/ scaleBy;
mapView.layer.transform = CATransform3DMakeScale(scaleBy, scaleBy, 1.0);

At this point you can actually now add it to your view and set any other properties in the same way as you would normally, job done…. yes it really is that simple!

Part one of this section on MapKits showed how to embed a map and place a floating toolbar for switching the map views, however it didn’t cover how to drop the pin where you wanted it.

Create the Object

First lets create a new NSObject for the place mark. Let’s call it ‘PlaceMark’

PlaceMark.h

#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>

@interface PlaceMark : NSObject {
	CLLocationCoordinate2D coordinate;
	NSString *subtitletext;
	NSString *titletext;
}
@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;
@property (readwrite, retain) NSString *titletext;
@property (readwrite, retain) NSString *subtitletext;
-(id)initWithCoordinate:(CLLocationCoordinate2D) coordinate;
- (NSString *)subtitle;
- (NSString *)title;
-(void)setTitle:(NSString*)strTitle;
-(void)setSubTitle:(NSString*)strSubTitle;

@end

PlaceMark.m

#import "PlaceMark.h"

@implementation PlaceMark
@synthesize coordinate, titletext, subtitletext;

- (NSString *)subtitle{
	return subtitletext;
}
- (NSString *)title{
	return titletext;
}

-(void)setTitle:(NSString*)strTitle {
	self.titletext = strTitle;
}

-(void)setSubTitle:(NSString*)strSubTitle {
	self.subtitletext = strSubTitle;
}

-(id)initWithCoordinate:(CLLocationCoordinate2D) c{
	coordinate=c;
	return self;
}
@end

Adding a pin to your map

Firstly remember to add

#import "PlaceMark.h"

To your map controller, from the previous example inside the displayMap function under the region.center call

PlaceMark *addAnnotation = [[[PlaceMark alloc] initWithCoordinate:location] retain];
[addAnnotation setTitle:@"The Pin Title"];
[addAnnotation setSubTitle:@"The pin subtitle goes here"];

[mapView addAnnotation:addAnnotation];

Then create the following delegate method

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>) annotation{
    MKPinAnnotationView *annView=[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"MyPin"];
    annView.animatesDrop=TRUE;
    annView.canShowCallout = YES;
	[annView setSelected:YES];
	annView.pinColor = MKPinAnnotationColorPurple;
    annView.calloutOffset = CGPointMake(-5, 5);
    return annView;
}

Voila you now have a pin dropped on the map and automatically selected. If you don’t want the title automatically displayed then change

[annView setSelected:YES];

The final part demonstrates how to create a mini map

In the first of a few posts I intend to make I’ll demonstrate some examples using the iPhone SDK.

This example will demonstrate how to embed a map, using the MKMapKit framework inside a UIView using the iPhone SDK. Note you must be using iPhone OS 3.0 or higher for this to work. The ultimate aim is to get a UIView that looks similar to this.

For this example I will assume you are already familiar with navigation and UIViews in the SDK (and so I won’t cover how to get the navigation bar at the top of this screenshot)

Add the framework

First up you must go to the Frameworks folder of your XCode project and add the existing framework of MKMapKit.

Then inside the header file for your view add

#import <MapKit/MapKit.h>

Adding MapKit references to the header

Now we must add the mapKit instance to the header as well as the MapKit delegate

@interface MapKitViewController : UIViewController <MKMapViewDelegate> {
	MKMapView *mapView;
}
-(void)displayMap;

Initialize the Map

- (void)viewDidLoad {
	mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
	mapView.delegate=self;

	[self.view addSubview:mapView];
	[NSThread detachNewThreadSelector:@selector(displayMap) toTarget:self withObject:nil];
}

-(void)displayMap {
	MKCoordinateRegion region;
	MKCoordinateSpan span;
	span.latitudeDelta=0.2;
	span.longitudeDelta=0.2;

	CLLocationCoordinate2D location;
	location.latitude = -35;
	location.longitude = 146.2381;
	region.span=span;
	region.center=location;

	[mapView setRegion:region animated:TRUE];
	[mapView regionThatFits:region];
}

- (void)dealloc {
	[mapView release];
        [super dealloc];
}

This will give us a map fitting the screen with the region and zoom level set to best fit the coordinates given. Note that I have physically defined the coordinates here in this example, you can use something like the Google GeoCode API to convert addresses, etc to coordinates. I won’t cover that here.

Changing the map type

In the example above is a tool bar allowing you to switch map types

Let’s define the toolbar in the header file inside the @implementation

UISegmentedControl *buttonBarSegmentedControl;

Now inside the main code inside ViewDidLoad we add

buttonBarSegmentedControl = [[UISegmentedControl alloc] initWithItems:
	[NSArray arrayWithObjects:@"Standard", @"Satellite", @"Hybrid", nil]];
	[buttonBarSegmentedControl setFrame:CGRectMake(30, 10, 280-30, 30)];
        buttonBarSegmentedControl.selectedSegmentIndex = 0.0;	// start by showing the normal picker
	[buttonBarSegmentedControl addTarget:self action:@selector(toggleToolBarChange:) forControlEvents:UIControlEventValueChanged];
	buttonBarSegmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
	buttonBarSegmentedControl.backgroundColor = [UIColor clearColor];
	[buttonBarSegmentedControl setAlpha:0.8];

	[self.view addSubview:buttonBarSegmentedControl];

Then we must add the function for what happens when we tap on the tool bar

- (void)toggleToolBarChange:(id)sender
{
	UISegmentedControl *segControl = sender;

	switch (segControl.selectedSegmentIndex)
	{
		case 0:	// Map
		{
			[mapView setMapType:MKMapTypeStandard];
			break;
		}
		case 1: // Satellite
		{
			[mapView setMapType:MKMapTypeSatellite];
			break;
		}
		case 2: // Hybrid
		{
			[mapView setMapType:MKMapTypeHybrid];
			break;
		}
	}
}

In the next example, I’ll cover how to add the annotations (the small pins) to the map