The UINavigationItem button is an excellent example of this larger hit area. Try touching near (but not on) the standard “Back” button in any navigation-based iPhone app. It responds. I never even noticed this interaction until I started this post, and that’s precisely the goal.

But when Apple doesn’t auto-extend the hit area, the developer should. There are two approaches:

• programmatically grow button’s hit area via UIView::hitTest
• hooking up a larger invisible button to the visible one.

For the invisible button, use Interface Builder to create a large UIButtonTypeCustom UIButton, hook up its touchDown, touchUpInside, touchUpOutside events to custom selectors in the controller, and use UIButton::setHighlighted on the original button to mimic a real tap, as described in this spot-on StackOverflow comment. (And don’t try setting the button’s alpha to zero; the button will no longer respond to touch events.)

Either way, an oversized hit area is especially necessary for smaller buttons, like the 29×31 “Detail Disclosure” button (UIButtonTypeDetailDisclosure) or the 18×19 “Info Light” button (UIButtonTypeInfoLight). Try simply adding the “Info Light” i button to a blank screen, running it on a device, and tapping it; it’s frustratingly small.

bdunagan$ codesign -f -s 'EMC Corporation' 'Retrospect.app'
codesign_allocate: for architecture i386 object:
/Retrospect.app/Contents/MacOS/Retrospect malformed object (unknown load command 5)
Retrospect.app: object file format invalid or unsuitable

Googling for those exact phrases lead nowhere. Eventually, I came across an excellent StackOverflow comment from Apple employee Chris Espinosa: different OSes. In fact, that was the problem. The application bundle was built on 10.6 and I was trying to use codesign on 10.5. Doesn’t work.

This time, the UI looks right, and clicking works as expected. I wrote up a small sample app to demo the link arrows; see Google Code.

The key is tracking. In the previous post, I used NSCell::hitTestForEvent to detect whether a click “hit” the link arrow image on a mouse down event, but then I immediately acted on it, without waiting for a mouse up event. Jarring and wrong.

I need to track what happens after that initial NSLeftMouseDown event. For this, I use NSCell::trackMouse to track all relevant mouse events until the next NSLeftMouseUp event. Thanks to Apple’s PhotoSearch sample app and Rowan Beentje’s Sequel Pro code for this much needed direction.

There are a couple corner cases I handle in trackMouse:

• mouse down outside => mouse up inside (no click)
• mouse down inside => mouse up outside (no click)
• mouse down inside => mouse drag out => mouse drag in => mouse up inside (click)

These mouse event sequences are what people expect from buttons, and I want people to think of the link arrows as buttons, as iTunes treats them.

Below is the main code from LinkArrowCell.m. The rest is just scaffolding.

// snipped from LinkArrows/LinkArrowCell.m (MIT license)

- (void)drawInteriorWithFrame:(NSRect)aRect inView:(NSView *)controlView {
	NSRect textRect = NSMakeRect(aRect.origin.x, aRect.origin.y, aRect.size.width - kLinkArrowWidth - kLinkArrowWidthPadding, aRect.size.height);

	// Draw text.
	[super drawInteriorWithFrame:textRect inView:controlView];

	// Draw link arrow.
	if ([self shouldDisplayLink]) {
		if (![self isHighlighted]) {
			// The cell is not highlighted.
			[linkArrow setImage:[NSImage imageNamed:@"link_arrow"]];
			[linkArrow setAlternateImage:[NSImage imageNamed:@"link_arrow_click"]];
		}
		else if ([[[self controlView] window] isKeyWindow] && [[[self controlView] window] firstResponder] == [self controlView]) {
			// The cell is highlighted, and the window is key.
			[linkArrow setImage:[NSImage imageNamed:@"link_arrow_highlight"]];
			[linkArrow setAlternateImage:[NSImage imageNamed:@"link_arrow_click_highlight"]];
		}
		else {
			// The cell is highlighted, but the window is not key.
			[linkArrow setImage:[NSImage imageNamed:@"link_arrow_click"]];
			[linkArrow setAlternateImage:[NSImage imageNamed:@"link_arrow"]];
		}

		[linkArrow drawInteriorWithFrame:[LinkArrowCell linkRect:aRect] inView:controlView];
	}
}

- (NSUInteger)hitTestForEvent:(NSEvent *)event inRect:(NSRect)cellFrame ofView:(NSView *)controlView {
	// Figure out hit point in view.
	NSRect linkRect = [LinkArrowCell linkRect:cellFrame];
	NSPoint p = [[[NSApp  mainWindow] contentView] convertPoint:[event locationInWindow] toView:controlView];
	if (p.x > linkRect.origin.x && p.x < (linkRect.origin.x + linkRect.size.width) &&
		p.y > linkRect.origin.y && p.y < (linkRect.origin.y + linkRect.size.height)) {
		// Point inside link arrow.
		[linkArrow setState:NSOnState];
		return NSCellHitContentArea | NSCellHitTrackableArea;
	}
	else {
		// Point outside link arrow.
		[linkArrow setState:NSOffState];
		return [super hitTestForEvent:event inRect:cellFrame ofView:controlView];
	}
}

- (BOOL)trackMouse:(NSEvent *)event inRect:(NSRect)cellFrame ofView:(NSView *)controlView untilMouseUp:(BOOL)untilMouseUp {
	// Check if link arrow was hit.
	int hitType = [self hitTestForEvent:[NSApp currentEvent] inRect:cellFrame ofView:controlView];
	BOOL isButtonClicked = hitType == (NSCellHitContentArea | NSCellHitTrackableArea);
	if (!isButtonClicked) return YES;

	// Ignore events other than mouse down.
	if ([event type] != NSLeftMouseDown) return YES;

	// Grab all events until a mouse up event.
	while ([event type] != NSLeftMouseUp) {
		// Check if link arrow was hit.
		hitType = [self hitTestForEvent:[NSApp currentEvent] inRect:cellFrame ofView:controlView];
		isButtonClicked = hitType == (NSCellHitContentArea | NSCellHitTrackableArea);
		// Update the cell's display.
		[controlView setNeedsDisplayInRect:cellFrame];
		// Pass event if not hit.
		if (!isButtonClicked) {
			[NSApp sendEvent:event];
		}
		// Grab next event.
		event = [[controlView window] nextEventMatchingMask:(NSLeftMouseUpMask | NSLeftMouseDraggedMask | NSMouseEnteredMask | NSMouseExitedMask)];
	}

	// Perform click only if link arrow was hit.
	if (isButtonClicked) {
		[self performClick:nil];
	}

	return YES;
}

Before I went with the trackMouse approach, I looked at subclassing NSCell and overriding startTrackingAt, continueTracking, stopTracking. For some reason, my overridden methods never triggered. Very odd as Apple’s NSCell docs bring up the approach, and many developers refer to it working on various email lists like cocoa-dev. Still not sure why this path didn’t work, but trackMouse certainly does.

Again, a sample project for this code is at Google Code.

// Detect the modifier flags (keys) from the current NSEvent.
NSEvent *event = [NSApp currentEvent];
if (event != nil) {
	BOOL isCommandKey = ([event modifierFlags] & NSCommandKeyMask) != 0;
	BOOL isShiftKey = ([event modifierFlags] & NSShiftKeyMask) != 0;
}

// add UIAccelerometerDelegate as a delegate to the controller
// add a UILabel to the XIB and hook it up to the controller
// add QuartzCore framework

// MainViewController.h
@interface MainViewController : UIViewController <UIAccelerometerDelegate> {
	IBOutlet UILabel *textLabel;
}
@end

// MainViewController.m
#import "MainViewController.h"
#import <QuartzCore/QuartzCore.h>

@implementation MainViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
		// Set this controller as the accelerometer's delegate.
		[[UIAccelerometer sharedAccelerometer] setDelegate:self];
    }
    return self;
}

- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
	// Get the rotation in radians.
	CGFloat rotation = (atan2(acceleration.x, acceleration.y) + M_PI);
	// Dampen it a bit.
	float div = 48 / (2 * M_PI);
	rotation = (int)(rotation * div) / div;
	// Animate the movement a bit.
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:.2];
	textLabel.layer.transform = CATransform3DMakeRotation(rotation, 0, 0, 1);
	[UIView commitAnimations];
}

@end

-(BOOL)canBecomeFirstResponder {
    return YES;
}

- (void) viewDidAppear:(BOOL)animated {
	[self becomeFirstResponder];
    [super viewDidAppear:animated];
}

- (void) viewDidDisappear:(BOOL)animated {
	[self resignFirstResponder];
	[super viewDidDisappear:animated];
}

- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event {
	if (event.subtype == UIEventSubtypeMotionShake) {
		// TODO: insert code here.
	}
	[super motionEnded:motion withEvent:event];
}

“Nothing about the iPad is obviously revolutionary, but it didn’t need to be: the iPhone OS and iPhone hardware are already revolutionary.

Apple already reinvented John’s mobile computing and my input mechanics and novice usability in 2007 with the iPhone. We’ve had the truly magical and revolutionary product this entire time, but we take it for granted now, and we’ve forgotten how awesome it already is.”
- Marco Arment from Tumblr and Instapaper

“The iPad as a particular device is not necessarily the future of computing. But as an ideology, I think it just might be. In hindsight, I think arguments over ‘why would I buy this if I already have a phone and a laptop?’ are going to seem as silly as ‘why would I buy an iPod if it has less space than a Nomad?’”
- Steven Frank from Panic

Not exactly filling the void with an iPad post, particularly one that’s two weeks late to the party and starts with what smarter people have already said. I blame Things for not being more insistent.

I agree that Apple’s iPad is the next step in computing: simplified computing. Yes, it has its shortcomings (inherent to a 1.0 release, which the iPhone had only three years ago), but it keeps with the design decisions that made the iPhone/iPod Touch ridiculously popular.

To illustrate the need, let me tell you about the “Check disc” incident. Over Christmas, my Dad subscribed to the New York Times Crossword Puzzle. The NYT doesn’t have an online puzzle component, so he had to download Across Lite, a third party Windows app. He called me after using it for a couple days about a “disc” issue. Whenever he tried to save the day’s puzzle, the app displayed, “Cannot write to file. Check disc.” It was such a weird error that I wanted to see it for myself. With VMWare Fusion on my Mac, I installed Across Lite and got the same error within a minute. I didn’t actually figure out what the problem was (read-only directory?); instead, I simply told my Dad how to use the “Save As…” option to save the puzzle to the Desktop. Problem solved.

But the larger problem is not solved. The incident is a perfect example of the abstraction problems that current computing environments have. They want to deal in apps and documents and photos, but they still break these abstractions daily. Windows gives me app shortcuts available from the Start menu, but those are a mediocre hack to abstract away the monstrous Program Files folder. Mac apps are nicely treated as atomic objects (even though they are folders), but people still run them out of read-only DMGs, leading to equally confusing error messages. All these semi-porous abstractions lead to a lot of unnecessary confusion.

The iPhone OS enforces the abstraction to a much better degree, and we’ve seen the results: over two billion apps downloaded on seventy million devices in eighteen months. All these little apps are islands of data, a per-app version of the Newton’s data soup platform. The iPad simply extends this OS to a larger surface.

I want one.

NSImage *mainIcon = [NSImage imageNamed:@"main_icon"];
NSImage *overlayIcon = [NSImage imageNamed:@"overlay_icon"];
[mainIcon lockFocus];
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];
[overlayIcon drawInRect:NSMakeRect([mainIcon size].width / 2, 0, [mainIcon size].width / 2, [mainIcon size].width / 2) fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1.0];
[mainIcon unlockFocus];

On my MacBook Pro, I have a lot of items in the menu bar: Tweetie, LittleSnapper, Jing, Evernote, BusySync, MobileMe, along with the standard set. Recently, when I needed to make my own, I started wondering what they are. Actual apps or app components? Activity Monitor confirmed that most are separate applications, although Tweetie’s is just a component. Good, so how do I make one?

All I had to do is add a single row to Info.plist: set LSUIElement to true. The other code is boilerplate, creating a controller in Xcode and hooking up some outlets in Interface Builder. I created a quick sample project on Google Code under MenuBarItem (screenshot below). Thanks again to Glyphish for an awesome set of free icons, including the pictured coffee mug.