Archive for May, 2010



08
May

Data Entry Screens

Here’s a worth reading post on how to make data entry screens that center the current entry field above the keyboard by simply using a UIScrollView, instead of the mess of hardcoded animation blocks that we’ve been using up ’til now:

How To Create A Data Entry Screen

Couple problems with the code as presented, but read to the end of the comments and apply the keyboard notification responses there and you’re just about good!

07
May

Tip: UINavigationBar Background

 

So you’ve got this design from the artists for your new navigation-based app, and they want the navigation bar to look exactly like the artwork, a close gradient just doesn’t cut it. What to do? What to do? And if you look around, there are a number of suggestions on how to accomplish this, which are mostly overly complicated and in some places just plain wrong.

But, assuming that all the bars in the app are supposed to look the same which is most likely a safe assumption, why indeed there is an extremely simple way — just make a category to override UINavigationBar’s -drawRect! Easy once you think of it, indeed. And set the bar’s tint color appropriately for your image there too and buttons will respect that; so in our case here, the simple category

@implementation UINavigationBar (TWXUINavigationBar)
- (void)drawRect:(CGRect)rect
{
   UIImage *img  = [UIImage imageNamed: @"customnavigationbar.png"];
   [img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
   UIColor *topColor = [UIColor colorFromHexValue:0x910011];
   self.tintColor = topColor;
}
@end

where the tint color was taken from the top pixel of the .png file, results in

tintedbar.png

Very nice looking, yes? Now that’s a seriously easy way to satisfy those picky artistic types!

02
May

UITableViewCell from nib warning

If you’ve been reading for a while you might recall this post about loading your UITableViewCell layout from a nib. Or perhaps you stumbled across that somewhere else, or even came up with it on your own; well, if you have been doing that, turns out there’s an additional wrinkle you need to be aware of:

… The key here is that the CellIdentifier value must also be entered into Interface Builder, like this:

UITableViewCell-Identifier.png

If you don’t do this, then UITableViewCells will not be reused. (A telltale sign of this is that you’ll see lots of “creating a new cell” log messages.) There is no compiler or runtime warning if you fail to enter this critical piece of information into Interface Builder. So that log statement can be a useful warning…

Yes. Yes, indeed, if you have several thousand items in your list, and you’re loading directly from the nib each time, that could be very very bad. Be careful out there!

01
May

Compleat UI Design

OK, we’ve mentioned various UI design helpers here and there before: but this, this is veritably canonical.

iPhone and iPad Development GUI Kits, Stencils and Icons

Within this post you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone…

Right up to date with the iPad GUI PSD we mentioned a little while ago, so looks like that’s the best current reference to point your artist flunkies at.

h/t: @mattgemmell!

UPDATES:

How about Apps-on: Post-It notes for your iPhone design? (h/t: iPhoneFlow!)

Or MobileSketchbook.com’s iPad Stencil, to go with their iPhone version?

Or just download some iPad & iPhone Sketch Paper PDFs.

Or try iPhone Wireframe Kit – Google Docs online.

Like to do your prototyping on the actual phone? Check out Dapp.app.

And here’s a newer roundup: 11 UI Kits for iPhone and iPad Development!