Left-most and right-most buttons on UIToolbar are hard to click

Question

Hi everybody,

I spent a couple of days trying to resolve this problem, therefore I decided to share the solution with you so you can dedicate more time to your families:

Suppose you have a UIToolbar which needs to accommodate a large number of buttons (say 5). When user tries to click on left-most or right-most button she often hits the adjacent button instead. Initially the code looked this way:

self.bookmarkButton = [[[UIBarButtonItem alloc] ...;
 self.sendButton = [[[UIBarButtonItem alloc] ...;    
 self.backstageButton = [[[UIBarButtonItem alloc] ...;
 self.voteButton = [[[UIBarButtonItem alloc] ...;
 self.vipButton = [[[UIBarButtonItem alloc] ...;

 UIBarButtonItem *sep0 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];
 UIBarButtonItem *sep1 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];
 UIBarButtonItem *sep2 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];
 UIBarButtonItem *sep3 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];


 [self setItems:[[[NSArray alloc] initWithObjects: self.bookmarkButton, sep0, self.sendButton, sep1, self.voteButton , sep2, self.backstageButton, sep3,  self.vipButton, nil]  autorelease]];

I tried a few techniques such as setting explicit button widths and removing separators, increasing the widths of left-most and right-most buttons but non of them worked for various reasons.

The most reliable way to resolve the issue was to introduce two more separators, one to the left of the left-most button and one to the right of the right-most button. Something like that:

self.bookmarkButton = [[[UIBarButtonItem alloc] ...;
 self.sendButton = [[[UIBarButtonItem alloc] ...;   
 self.backstageButton = [[[UIBarButtonItem alloc] ...;
 self.voteButton = [[[UIBarButtonItem alloc] ...;
 self.vipButton = [[[UIBarButtonItem alloc] ...;

 UIBarButtonItem *sep0 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];
 UIBarButtonItem *sep1 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];
 UIBarButtonItem *sep2 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];
 UIBarButtonItem *sep3 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];

UIBarButtonItem *sepLeft = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];

UIBarButtonItem *sepRight = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil] autorelease];

 [self setItems:[[[NSArray alloc] initWithObjects: sepLeft, self.bookmarkButton, sep0, self.sendButton, sep1, self.voteButton , sep2, self.backstageButton, sep3,  self.vipButton, sepRight, nil]  autorelease]];

This resolved the problem entirely. Of course all the buttons shifted slightly towards the center as you can see here:

http://pics.livejournal.com/andre_po/pic/00004t7f

but this is a reasonable price to pay.