Posts Tagged ‘UI’

iPhone UI – About Page Trends & Roundup

March 2nd, 2010 iPhone SDK Tips

iPhone about pages have become an art in theirselves. Below is a roundup of all the ones I’ve found interesting…More added as they come.

Some Simple iPhone UI Elements

March 1st, 2010 iPhone SDK Tips

I’ve been a little busy lately and have some ideas queued up but I havent had the chance to post much. Today something quick.

When developing my first app, I had some simple questions I could only answer by looking at what apps already do. Questions like “How is a single text field and keyboard on a page displayed to the user? How is a date best added/altered in a view? How can I enter in a full sized textbox for the user to enter a note? Insipration Source: Things from Cultured Code. They use some basic iPhone UI elements, but its just done so well.

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

February 19th, 2010 iPhone SDK Tips

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

iPhone UI – Best UI Elements I have seen

February 10th, 2010 iPhone SDK Tips

This post is also a deviation from the norm, an ever updating page of iPhone/iPad OS elements that I really like.