iPhone SDK FirstRun.png – Displaying Special ‘one off’ info in an app

19/02/2010

In making MicroCRM, I wanted to display some temp information to the user when a table list was empty. I wanted to make it as clear as possible a ‘lead’, ‘job’ or ‘invoice’ needs to be added first.

This is not a new concept in iPhone/Mac apps, but I want to share my implementation.

1. Firstly, I made the picture I wanted to display in my app.  Then it was added to my Xcode project. Below is the actual artwork the app uses.

2. The following code is placed in  (void)viewWillAppear: for the ViewController I wanted to place the image. (I have commented it well to help the reader).

//de.009 - FirstRun Image if ArrayCount is 0

[firstRunImage removeFromSuperview];

int InvoiceCount = [appDelegate.Array count];    //get number of Invoices<br />
NSString *arraycount = [NSString stringWithFormat:@"%d", InvoiceCount];<br />
NSLog (@"Leads Page Loaded: %@ Entries",arraycount);    //Log code for number of items in array


if (InvoiceCount==0) {       //If there are no invoices<br />
NSLog (@"Adding First Run Image");     //Log code<br />
firstRunImage=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img-FirstRun.png"]];     //Allocate UIImageView to hold the image, and define the image<br />
firstRunImage.frame = CGRectMake(0,0,320,100);      //Define Frame Size<br />
[self.view addSubview:firstRunImage];    //Add ImageView to current view<br />
} else {<br />
[firstRunImage removeFromSuperview];    //Otherwise remove it<br />
[firstRunImage release], firstRunImage=nil;  //release memory<br />
}

See it in action

And thats it. I have the same code for all three sections of my app. To get the app, goto http://microcrmapp.com and follow the app store link.

Other implementations of a similar idea are found in many different apps. Apple’s own included apps, the facebook app and so on. There is a particularly common UI element that seems to be an imitation of apple’s own included ‘no data/history/updating’ page (see below). This is becoming more and more common place and it does seem to be a nice way to show the user ‘theres nothing!’.

I have even found a way to implement this, its using the amazing TapkuLibrary. I’ll let you work it all out for yourself now and it may even become a new post in the future

No comments yet.

Write a comment:

blog comments powered by Disqus