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!

Now it is true that must tech imported from the USA seems to cost more with this mythical international tax and at first glance the iPad pricing in the UK is a lot more but let’s break it down for the 16Gb WiFi iPad.

In the US this is $499. The UK price announced is £429.  At a direct comparison at today’s exchange rates of 1.48, that comes to $648.  Wow that seems an awful lot more.  However that simply isn’t a fair comparison.

In the US all prices exclude sales tax which our friends in America accept is always added at point of sale and calculate the price in their head all the time.  In the UK we have VAT so the tax is always added (and at the moment it’s 17.5%).  So let’s take off the VAT from £429 and it comes to £365.

Convert that to USD and we see the UK iPad price is actually $540.  So the UK iPad is actually $41 more expensive in the UK than the US… that’s a whole £27, although yesterday it was £25.

I’m sure there are some import taxes or costs and £27 more isn’t really a lot of money, sure I’d prefer not to have to pay it but it isn’t what I’d call rip-off Britain compared with the US price.

If anyone is to blame it’s the level of VAT we get charged in the UK.

If we compare our £429 iPad with VAT to what it costs, in say California with federal and local sales tax of 10.75% we see that in the US the iPad costs $552.64 which is £373.

So the entire reason we feel we are being ripped off for our technology is nothing to do with Apple in this case and everything to do with the Government and our VAT.

Of course importing it isn’t a solution either, because you did remember to pay your VAT when it came through customs didn’t you?

As a user, and future owner of one of these devices I’m disappointed.

As a developer, I’m angry and let me explain why.  International developers are now at a severe disadvantage to US based developers without great expense to themselves, of finding a way to import the iPad from the USA.

US based developers have been able to see how their app looks, feels and works on a physical iPad whilst those of us not in the US have only had the simulator which is simply not good enough.  Anyone who has developed anything more than a one screen app for the iPhone will know that the simulator often behaves differently to the ARM architecture of the iPhone itself.

I’m not asking for Apple to give developers discounts, special advance access, free shipping, etc.  All I am asking is for Apple to allow a level playing field for developers and so that international developers that have PAID to register in the iPhone Developer Program should have a way of gaining access to the devices to be able to develop and test on.

At the moment there is no fair playing field between developers in the US and those of us who are not, of which I wouldn’t be surprised if there are more outside the US than in it.

Robert Scoble has written a great blog post on why Apple’s prediction was so wrong.

The guide below is available to print out on the website PhotographerNotATerrorist.org

I highly recommend carrying it with you in your camera bag at all times.

Also make sure you follow @PHNAT on twitter and join the Facebook group

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

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!

It’s even less than a thin client of old (read: Citrix). When did we suddenly decide that thin clients were a good idea again?

I’ll just put one single thought and it was said by Marc Andreessen in 1995

“[Netscape will soon reduce Windows to] a poorly debugged set of device drivers.”

Yeah that went well didn’t it.

It’s a horrible task but it’s just been made a whole lot easier using a great online application called FreeAgent.

For me it allows me to keep any invoices in check, remittance notes and all my expenses (including uploading a scanned PDF copy of the actual receipt).

Then come Self-Assessment time I can see my expenses all in one place and how much I can be expected to pay for my taxes.  It’s so easy it’s a dream, I can’t recommend it highly enough!

What’s more if you click through for a 30 day free trial from this link now, you’ll get a 10% discount!

Now I’ll say upfront I don’t have much experience with this sort of application and I’ve never used Sage, etc . When you sign up for FreeAgent you get your own URL (http://yourcompany.freeagentcentral.com) and login, but this has one of the easiest to use interfaces I’ve seen for something that is a very complex and powerful web application.

In a matter of an hour I had all my yearly expenses in the system and added my income and even my PAYE P60 for my Self-Assessment.

I’ve only touched a handful of the features on offer, it also allows bank account integration which I’m sure is incredibly powerful, I’ve just not used it yet!

The Features (shamelessly copied from the FreeAgent website)

• Manage Projects & Time
  Manage your projects and contacts, track the time you spend and create flexible timesheet reports.
• Simple, Powerful Invoicing
  Create great looking invoices with no fuss. Email them to the client and easily track through to payment.
• Keep track of Expenses
  Keep tabs on your business and out-of-pocket expenses and quickly rebill to clients.
• Superior Online Banking
  Online banking that’s better than the banks. Compare accounts and track balances.
• Realtime Accounts
  No complicated procedures, FreeAgent simply works out your accounts as you run your business.
• Unrivalled Tax Features
  Our unique Tax timeline lets you see important UK income, VAT and corporate tax dates and how much is due.

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

Basically there is a killer bug which means you can’t click the Cancel button on a UIActionSheet and forces the user to either close the App or use one of the destructive action buttons to get rid of the alert.

It appears to be a changed from OS <= 2.1 to >= 2.2. In iPhone OS 2.1 and earlier, the UIActionSheet comes up from the top of the tab bar, but in 2.2, it comes up from the bottom of the tab bar, and thus covers the tab view but the tab view still takes focus. If you try to press the cancel button below the top of the tab bar (barely visible through the semi-transparent UIActionSheet), the press does not register. If you click above the underlying tab bar, the press does work.

This is how you fix it.

1) In your AppDelegate.h function

+ (UITabBarController *)tabbarController;

Note that tabbarController should be different than your ACTUAL UITabBarController name.

Next edit your AppDelegate.m functiuon and above your @implementation

static AppDelegate *s_appdelegate = nil;

@implementation AppDelegate

Inside applicationDidFinishLaunching add

s_appdelegate = self;

At the bottom of AppDelegate.m before @end add

+ (UITabBarController *)tabbarController
{
	return s_appdelegate ? s_appdelegate.tabBarController : nil;
}

Finally in your child view in which you wish to display your UIActionSheet add

	UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"Delete?"
		delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:@"Yes" otherButtonTitles:nil, nil];

	UIView *viewBase = self.view;
	viewBase = [[AppDelegate tabbarController] view];
	[sheet showInView:viewBase];
	[sheet release];